SE-3003 Web Engineering Final Exam

A built-in React hook used to perform side effects, such as fetching data, setting up subscriptions, or managing timers. It runs after every render and allows interaction with the outside world.

A built-in React hook that helps you manage the state of your component, allowing you to store and update data that changes over time.

A feature in React that provides a centralized way to manage and share data across different components in your application, reducing the need for prop drilling.

A robust library for managing state in React applications. It offers a centralized store, actions, and reducers for predictable and efficient state updates.

The function in Redux that is used to trigger state changes by dispatching actions to the store. These actions are then processed by reducers, which update the state.

The main routing component in React Router v6, providing the foundation for creating a navigation system in your React application.

A React hook used to programmatically navigate to different routes within your application without relying on the browser's built-in history.

Allows you to define routes that accept dynamic parameters, enabling flexibility and content customization based on those parameters.

A method to represent and exchange secure information between parties. It is used to securely transmit information over HTTP without exposing sensitive data.

A library that allows reading environment variables from a '.env' file, separating sensitive data from code.

A web application framework for Node.js. It simplifies building APIs and web applications.

A request sent to a server to retrieve data from a specific resource.

A web service that handles CRUD operations for a specific resource, such as a doctor's information.

A component in React Router v6 that allows navigating to different routes in an application without relying on the browser's history.

A feature of React Router v6 that lets you define routes with dynamic parameters, making routes flexible and content adaptable.

A route in React Router v6 that acts as the main routing component, laying the groundwork for navigation within a React application.

The initial state of the Redux store for posts, initialized with an empty array of posts.

A Redux reducer function that fetches posts from a URL and updates the state with the fetched data.

An action creator that triggers the fetch_posts reducer, initiating the process of fetching and storing posts from a URL.

A Redux store that holds the state of the application, specifically the posts state managed by the postReducer.

A React component that displays the posts retrieved from the Redux store, showcasing the state in the application.

The map() method in JavaScript iterates over an array and applies a function to each element, creating a new array with the results.

The map() method in JavaScript is used to create a new array by applying a function to each element of an existing array. This function can modify the element or return a new value based on the existing element.

For each item in the items array, the map() method calls the provided function, which extracts the text property of each item. The result is a new array containing the text values.

The ternary operator is a shorthand way to write conditional expressions in JavaScript. It allows you to assign a value to a variable based on a condition, creating a concise way to handle if-else logic.

The return keyword in React components specifies what the component should render to the screen. It can return a single JSX element, an array of JSX elements, or a fragment.

The fetch API is a built-in way to make network requests in JavaScript. It allows you to retrieve data from servers or send data to servers, enabling communication with external resources.

The async/await keywords in JavaScript are used to handle asynchronous operations, such as network requests. They make it easier to write code that waits for a response before proceeding.

The useEffect hook in React enables you to perform side effects in your components. These side effects can include fetching data from an API, setting up event listeners, or managing timers.

The useEffect hook in React allows you to perform side effects within a component. It is typically used for tasks like fetching data, setting up subscriptions, or managing timers. It automatically runs after every render.

The useEffect hook, when paired with the dependency array [], ensures that the function inside it runs only once when the component initially renders. This is often used to fetch data only once on mount.

Data is fetched from the server using the fetchMessages function. This function is called inside the useEffect hook to retrieve data.

This code snippet utilizes the setTimeout function to delay the execution of fetchMessages for one second after the component renders. This introduces a deliberate delay in data fetching.

The Parent component renders the ChildA, ChildB, and ChildC components in a nested structure. Each child component receives props passed down from its parent.

Prop drilling refers to passing data through multiple levels of nested components using props. This can become tedious and unmanageable for complex component hierarchies.

The React.createContext function creates a context object. The UserContext context is initialized here, providing a central location to share data across components.

The useContext hook is used within the ChildC component to access the value stored in the UserContext. This eliminates the need to pass the username prop through the component hierarchy.

The useEffect hook allows you to perform side effects in your functional React components, such as fetching data, setting up subscriptions, and manipulating the DOM. It takes a callback function that will be executed after every render, and optionally an array of dependencies. When the dependencies change, the effect function will be re-run.

In this code, the useEffect hook is used to log a message to the console after the component has been successfully rendered. The dependency array [ready] indicates that the effect should re-run whenever the ready state variable changes.

The useState hook is a built-in React function that allows you to manage state within a functional component. It takes an initial value as an argument and returns an array containing two elements: the current state value and a function to update the state.

In this code, the useState hook is used to track whether the button is ready to be clicked.

The initial state of the ready variable is set to false. When the button is clicked, the setReady function is called with true, changing the state to true and triggering the useEffect hook to re-run.

The statement console.log('State is Ready!') and console.log('Returning JSX') are executed when the component is first rendered, before the useEffect hook is triggered. This means the output on the console will be "State is Ready!" followed by "Returning JSX" .

The useEffect hook executes after the component is rendered, so it will log "Component rendered successfully" after the initial render.

When the button is first clicked, the state is updated to true by calling setReady(true). The useEffect hook will re-run because its dependency array is [ready], resulting in a new console log of "Component rendered successfully", but the text on the web page will update to "Ready!".