Introduction to React

Overview of React

• React is a JavaScript library for building user interfaces.
• Focuses on using components, which are self-contained sections of code that can be reused.
• Uses JSX (JavaScript XML) which allows HTML-like syntax in JavaScript files.
• Utilizes a virtual DOM to improve performance by only updating parts of the real DOM that need changes.

Prerequisites

• Knowledge of JavaScript (arrays, classes, objects, ES6 features like arrow functions).
• Understanding of HTML and CSS.
• Free courses available for JavaScript, HTML, and CSS on the speaker's YouTube channel.

Installation Instructions

1. Download Node.js from nodejs.org.
   • Node.js allows JavaScript to run outside of a web browser.
   • The installation includes npm (Node Package Manager).
2. Install Visual Studio Code (VS Code) from code.visualstudio.com.
3. Create a project folder in VS Code.
4. Open the terminal and run:
   • npm init vite@latest to create a new React project.
   • Choose React as the framework and stick with JavaScript.
   • Install dependencies with npm install.
   • Start the development server with npm run dev.

Project Structure

• node_modules: Contains external libraries and packages.
• public: Assets like images, fonts, and videos.
• src: Main source folder where most development happens.
  • assets: Can contain bundled images/videos.
  • main.jsx: JavaScript entry point.
  • App.jsx: Root component where other components are added.
• package.json: Contains project metadata including dependencies.

Creating Your First Components

Creating a Header Component

1. Create a new file header.jsx in the src folder.
2. Define a function-based component that returns a header element with content.
3. Use this header in your App.jsx by importing it.

Creating a Footer Component

1. Create a new file footer.jsx.
2. Similar process as the header component.

Creating Additional Components

• You can create components for lists, cards, etc.
• Components can be reused and nested.

Props (Properties)

• Props allow passing data to child components.
• Props are accessed via props object in the child component.
• Example: Create a student component that receives a name and age via props.
• Use prop types to ensure correct data types are passed.

State Management with Hooks

useState Hook

• Used to manage state in functional components.
• const [state, setState] = useState(initialValue).
• Changes to state trigger re-renders of the component.

useEffect Hook

• Runs side effects in functional components.
• You can specify conditions under which the effect runs (e.g., on mount, when a state changes).
• Useful for fetching data, setting up subscriptions, and cleaning up.

Example Projects

TODO List App

• Create a simple app that allows adding and removing tasks.
• Use useState for managing tasks and useEffect for side effects.

Digital Clock

• Create a digital clock that updates every second using setInterval.
• Use useEffect to clear the interval when the component unmounts.

Stopwatch

• Develop a stopwatch that can start, stop, and reset.
• Track elapsed time using useRef and useState to manage running state.

Context API

• Use the Context API to avoid prop drilling.
• Create a global state that can be accessed by any component without passing props through the tree.

useRef Hook

• Use to reference and interact with DOM elements without triggering re-renders.
• Store mutable values that do not require rendering to update.

Summary

• React is component-based, allowing for modular and reusable UI elements.
• Hooks like useState, useEffect, and useRef make managing state and side effects straightforward.
• Context API simplifies data sharing without complicated prop chains.
• Practice by building simple applications and gradually increasing complexity.