Introduction to ReactJS Components

This module helps you understand the key React concepts that make your Quiz App work. You'll learn how components break down the UI, how state and props control the data flow, how we fetch real-time questions using an API, and how events are handled to keep the app interactive. By the end of this module, you’ll clearly understand how each part of the app connects behind the scenes.

React components allow us to split the UI into reusable and manageable parts. Each screen or section in the Quiz App is a separate component. This makes the app easy to read, maintain, and expand.

In your app, the main components include:

• App.jsx: This is the root component. It controls the screen flow (welcome screen, quiz screen, score screen) and maintains the main state.
• WelcomeScreen.jsx: Displays the animated welcome screen and lets the user pick a quiz category.
• Quiz.jsx: Responsible for fetching quiz questions, handling answers, and displaying each question one at a time.
• QuestionCard.jsx: A small presentational component that shows the current question and answer choices.
• ScoreCard.jsx: Displays the final score and a list of correct/incorrect answers.

Each component is a JavaScript function that returns JSX, which is how we describe the UI using HTML-like syntax.