CST348 - WEEK 2: REACT

This week, we learned about React, a JavaScript library used to build user interfaces by creating components that return HTML structures called JSX. Similar to other programming languages, React allows developers to create reusable functions and components. Throughout the week, we explored several important React concepts and hooks.

Key concepts covered included:

useState: A React hook used to create stateful variables. When a state variable changes, React automatically rerenders the component so the updated data is displayed to the user.

React Router: A library used to build Single Page Applications (SPAs), allowing users to navigate between pages without requiring the browser to reload the entire website.

Props:  Arguments passed into components. Props are immutable; they should not be modified by the component receiving them.

useEffect: A React hook that allows developers to run functions when a component renders. The optional dependency array controls when the function executes. An empty array causes the function to run only once when the component first loads, while omitting the array causes it to run after every render.

useContext: A hook that simplifies sharing data across multiple components without having to pass props through every level of a component tree.

Rendering Lists and Tables: When displaying lists or table rows, React requires a unique key={id} attribute for each item. This helps React efficiently compare and update changes in the user interface.

useRef: A hook used when direct interaction with actual DOM elements is necessary. It provides a reference to the real DOM element behind a React component.

One of the most valuable parts for me this week was seeing these concepts demonstrated in Lab 3. While reading about React hooks and components helped me understand their purpose, watching them in action through the lab videos strengthened my understanding.