Introducing React30: Master React.js in 30 Days by building 30 practical projects Quiz

Explore React.js concepts such as state, hooks, APIs, and user authentication by building diverse frontend and full-stack projects. This quiz helps reinforce key topics and techniques from a 30-day hands-on React journey.

1. Understanding useState in React

   Which React hook is essential for managing component state, such as tracking a counter value in a simple clicker application?

   1. useState
   2. useContext
   3. useEffect
   4. useRef

   Explanation: useState is designed for managing state within functional components, making it ideal for dynamic values like counters. useEffect handles side effects, useRef stores mutable values without triggering re-renders, and useContext accesses shared context rather than managing local state.

2. Handling Real-Time Updates in React

   When building a real-time digital clock in React, which hook would you commonly use to handle interval-based side effects like updating the time every second?

   1. useState
   2. useCallback
   3. useEffect
   4. useMemo

   Explanation: useEffect is used for side effects such as setting intervals or fetching data, which are necessary for real-time updates. useState manages state but not side effects. useMemo and useCallback are for optimizing performance and do not handle effects like timers.

3. Fetching Data with Axios in React

   To display a user feed from an external API in a React app, which combination is typically used to make the API request and update the UI with new data?

   1. Axios with useEffect
   2. useRef with setInterval
   3. useSelector with useMemo
   4. fetch with useCallback

   Explanation: Axios with useEffect allows for performing HTTP requests and updating the component when data is received. useRef with setInterval is unrelated to data fetching. useSelector is specific to state from Redux, not fetching data. Using fetch with useCallback is not a common pattern for API calls.

4. Building Navigation in React Apps

   Which library is commonly used in React projects to create navigation between different pages, such as a Navbar component?

   1. Axios
   2. Redux Toolkit
   3. React Router
   4. Jest

   Explanation: React Router is designed for browser-based routing and navigation in React applications. Redux Toolkit is for state management, Axios is for API requests, and Jest is a testing library, none of which provide routing functionality.

5. Implementing User Authentication

   What backend technologies are typically combined to create a user authentication API for a MERN stack application?

   1. Node.js and SASS
   2. React and Redux
   3. Express.js and MongoDB
   4. Axios and Jest

   Explanation: Express.js and MongoDB are backend frameworks used for routing and storing user data, respectively, in a MERN stack authentication setup. React and Redux operate mainly on the frontend. Axios is for HTTP requests and Jest for testing. Node.js is the runtime, and SASS is for styling.