ReactJS Introduction

Overview of React

• React is a JavaScript library for building user interfaces.
• Focuses on building web applications using components.

Components

• A component is a self-contained section of code, similar to Lego blocks.
• Each component can include both JavaScript and HTML.

JSX

• React uses a syntax extension called JSX (JavaScript XML).
• JSX allows writing HTML-like code within JavaScript files.

Virtual DOM

• React uses a Virtual DOM to improve rendering performance.
• Changes are tracked in the Virtual DOM, and only specific parts are updated in the real DOM.

Prerequisites

• Need to know JavaScript (including ES6 features) and HTML.

Installation Instructions

1. Download and install Node.js from nodejs.org.
2. Install a text editor (recommended: VS Code).
3. Create a project folder and use the terminal to initialize a new React project:
   • Command: npm create vit@latest to create a development server.
4. Select project name and framework (React).
5. Install dependencies and run the development server.

Project Structure

• node_modules: Contains external libraries and packages.
• public: Contains public assets (fonts, images).
• src: Contains source files.
  • assets: For bundled images and videos.
  • main.jsx: Entry point for the JavaScript file.
  • index.html: Main HTML file for the application.

Creating Components

• Create new components by defining a function and exporting it.
• Use the import statement to include components in other files.
• Use JSX to include components in the return statement.

Example: Creating a Header Component

• Create header.jsx for a simple header component.
• Use props to pass data from parent to child components.

Example: Creating a Footer Component

• Create footer.jsx and set up a footer component.

Props in React

• Props are used for passing data between components.
• Can pass various data types (strings, numbers, booleans).

Styling in React

Methods of Styling Components

1. External CSS Stylesheets
2. CSS Modules: More localized styles that avoid naming conflicts.
3. Inline Styles: Directly applied styles using JavaScript objects.

Conditional Rendering

• Render components based on conditions using if statements or ternary operators.

Rendering Lists

• Use the map method to render lists of components based on an array.

Handling Events

• Use onclick events to handle user interactions.
• Use the event parameter to access event details.

Using React Hooks

useState Hook

• Allows functional components to manage state.
• Returns a state variable and a setter function.

useEffect Hook

• Runs side effect code based on dependencies.
• Can be used for data fetching, subscriptions, or DOM manipulation.

useRef Hook

• References a DOM element without causing re-renders.

Creating Applications in React

• Example applications include a to-do list, stopwatch, and digital clock.
• Implement user interactions and dynamic content updates.

Conclusion

• React provides powerful tools for building dynamic web applications.
• Understanding components, props, hooks, and event handling is crucial for effective React development.