ReactJS Beginner Course 2025 | Learn React By Building a Website

Key Concepts

• React: A JavaScript library for building user interfaces.
• Components: Reusable, self-contained UI building blocks (JavaScript functions returning JSX).
• JSX: A syntax extension to JavaScript allowing HTML-like structures within JavaScript code.
• Props: Data passed from a parent component to a child component.
• Virtual DOM: A lightweight copy of the real DOM, used by React for efficient UI updates.
• State: A mechanism for managing and tracking data changes in React components, triggering UI re-renders when updated.
• Hooks: Functions that let you “hook into” React state and lifecycle features from function components (e.g., useState).
• useState Hook: A React Hook that allows functional components to manage state.
• map() function: A JavaScript array method used to iterate over an array and transform each element into a new element, often used to render lists of components in React.

React Concepts and Fundamentals

• React Overview: React is a JavaScript library developed by Facebook for building dynamic and interactive user interfaces. It promotes breaking down UIs into reusable components.
• JSX Explanation: JSX is a syntax that allows embedding JavaScript expressions within HTML-like structures. It's used to define the UI that React components render.
  • Example: Displaying a variable name within an <h1> tag: <h1>My name is {name}</h1>.
• Components as Building Blocks: Components are JavaScript functions that return JSX, representing self-contained UI elements like buttons, forms, or entire pages.
• Props for Reusability: Props enable passing data from parent components to child components, allowing for dynamic and reusable components.
• Virtual DOM for Performance: React uses a virtual DOM to efficiently update the actual DOM, minimizing direct manipulations and improving performance.

Setting Up a React App with Vite

• Node.js Requirement: Node.js (or another package manager) is required to set up and run React projects.
• Code Editor: VS Code is used as the code editor in the video.
• Project Setup with Vite: Vite is a build tool that simplifies the creation and running of React projects. It's presented as a faster alternative to create-react-app.
• Vite Command: npx create vite . (the dot specifies to create the project in the current directory)
• Framework Selection: Vite supports various frameworks, including React, Vue, and Vanilla JavaScript.
• Variant Selection: Vite offers options for TypeScript or JavaScript. The tutorial recommends JavaScript for beginners.
• npm install: Installs all necessary packages listed in package.json, including React and React DOM.
• npm run dev: Starts the React development server, typically at http://localhost:5173.

React Project Structure

• vite.config.js: Configuration file for Vite settings (optional for beginners).
• package.json: Contains project metadata, including dependencies like react and react-dom.
• index.html: The main HTML file that serves as the template for the React app. It contains a single <div id="root"> where the React app is injected.
• main.jsx: The entry point for the React application. It uses ReactDOM.createRoot to render the main App component into the root element.
• App.jsx: The main component of the application, serving as the entry point for the UI.
• CSS Files: CSS files (e.g., index.css, app.css) are used for styling. They are imported using import './index.css'.
• assets Folder: Used to store assets like images. Images in the assets folder can be imported directly into the code.
• public Folder: Used to store static files (e.g., images, icons) that are accessed publicly. Files in the public folder are accessed directly via URL (e.g., /vite.svg).

Building a Quiz App: UI and Components

• Components Folder: A folder to organize React components (e.g., components/Quiz.jsx).
• Quiz.jsx Component: A component responsible for rendering the quiz UI and logic.
• Question Bank: A JavaScript array containing objects representing quiz questions, options, and correct answers.
  • Example:

    const questionBank = [
      {
        question: "What is the capital of France?",
        options: ["Berlin", "London", "Paris", "Rome"],
        answer: "Paris",
      },
      // ... more questions
    ];
    

• Rendering Questions and Options: The map() function is used to iterate over the options array and render a button for each option.
• Class Names in React: Use className instead of class to assign CSS classes to elements in JSX.
• Navigation Buttons: Buttons for navigating between questions (previous and next).

State Management and Reactivity

• The Concept of State: State is used to manage data that changes over time and triggers UI updates when modified.
• useState Hook: The useState hook is used to declare state variables and their corresponding update functions.
  • Example: const [currentQuestion, setCurrentQuestion] = useState(0);
• Updating State: Use the update function (e.g., setCurrentQuestion) to modify state values. Direct modification of state variables will not trigger UI updates.
• Tracking User Answers: A state variable userAnswers is used to store the user's answers for each question.
• Handling Option Selection: The handleSelectOption function updates the userAnswers state with the selected option for the current question.
• Managing Current Question: The currentQuestion state variable tracks the index of the currently displayed question.
• Navigation Logic: The goToNext and goToPrev functions update the currentQuestion state to navigate between questions.
• Disabling Buttons: The disabled property is used to disable the "Previous" button on the first question and the "Next" button if an option hasn't been selected.

Conditional Rendering and UI Updates

• Conditional Class Names: JavaScript expressions are used within className to dynamically add or remove CSS classes based on state.
  • Example: Adding the "selected" class to a button if it's the selected option:

    className={`option ${selectedAnswer === option ? "selected" : ""}`}
    

• Displaying "Finish Quiz" Button: Conditional rendering is used to display "Finish Quiz" on the last question instead of "Next".

Results Component and Props

• Creating a Results.jsx Component: A new component is created to display the quiz results.
• Passing Data with Props: Data (e.g., userAnswers, questionBank) is passed from the Quiz component to the Results component using props.
• Destructuring Props: Props are destructured in the Results component to access the passed data.
  • Example: function Results({ userAnswers, questionBank }) { ... }
• Calculating the Score: A getScore function is used to calculate the user's score by comparing their answers with the correct answers in the questionBank.
• Displaying the Score: The calculated score is displayed in the Results component.

Restarting the Quiz

• restartQuiz Function: A function is created in the Quiz component to reset the quiz state (e.g., currentQuestion, userAnswers, isQuizFinished).
• Passing Function as Prop: The restartQuiz function is passed as a prop to the Results component.
• Resetting State: The restartQuiz function updates the state variables to their initial values, effectively restarting the quiz.

Conclusion

The tutorial provides a comprehensive introduction to React by building a quiz application. It covers fundamental concepts like components, JSX, props, state, and hooks. The project demonstrates how to structure a React application, manage state, handle user input, and conditionally render UI elements. The tutorial emphasizes the importance of breaking down UIs into reusable components and using state to manage data changes and trigger UI updates. The instructor encourages viewers to explore the linked React course for a more in-depth learning experience.