Recap of the Project and Further Learning

You’ve built and deployed your first interactive web app, congrats! This final module reviews what you’ve learned, gives you a live demo placeholder, includes a few MCQs to test your understanding, and wraps up your learning journey.

Learning Outcome

By completing this project, you will learn how to:

• Set up a React development environment (install Node.js, create files).
• Build a component-based UI in React using functional components and JSX
• Use the useState hook to manage component state.
• Fetch data from an external API (JokeAPI) and update React state with the response.
• Deploy a static site to Netlify for free hosting.

This demonstrates practical skills in React and front-end development.

Live Link & Output Screenshot

Live Demo: Random Jokes Generator Netlify

Below is a screenshot of the live app’s output. Each click on the button fetches a new joke from the API and displays it on the page.

MCQs

1. Which React Hook is used to add state in a functional component?
   a. useState 
   b. useEffect  
   c. useContext  
   d. useReducer

   Answer: a. useState (useState is the built-in React Hook that lets you store and update local state in functional components.)

2. What does React’s “virtual DOM” do?
   a. It replaces the real DOM completely.
   b. It allows React to update only parts of the real DOM that changed.
   c. It stores user data on the server.
   d. It styles components.

   Answer: b. It allows React to update only parts of the real DOM that changed. (The virtual DOM compares previous and current UI states and updates only the changed elements for better performance.)

3. Which of the following is NOT required for this project?
   a. Node.js (for npm)    
   b. A code editor    
   c. A paid API key    
   d. A web browser

   Answer: c. A paid API key (JokeAPI is free to use and does not require any authentication or payment.)

4. What is the main purpose of the Button component in our app?
   a. Fetch and display the joke.
   b. Hold the state for the joke.
   c. Render the button and trigger fetching the joke when clicked.
   d. Style the joke text.

   Answer: c. Render the button and trigger fetching the joke when clicked. (The Button component is responsible for rendering the UI button and handling the click event to fetch a new joke.)

5. How do we ensure the React app doesn’t reload the page when updating jokes?
   a. We must manually refresh the page.
   b. React’s state updates re-render only part of the UI, avoiding full reload.
   c. We use a backend server to reload data.
   d. It is not possible; the page always reloads.

   Answer: b. React’s state updates re-render only part of the UI, avoiding full reload. (React updates the component state using hooks like useState, allowing dynamic content changes without refreshing the page.)

Resources

Want to master ReactJS and build your portfolio by creating web apps like this? Check out GUVI’s IIT-M Pravartak Certified ReactJS Self-Paced Course, where you can master the art of building interactive user interfaces and web applications.

Additionally, if you want to understand how React works in a Full Stack environment, consider enrolling in GUVI’s IIM-M Pravartak Certified Full Stack Development Course, where you’ll learn React, Node.js, MongoDB, and more with hands-on projects, expert mentorship, and placement support. Perfect for beginners and professionals looking to upskill.