React Foundation

1. What is React?

React is a JavaScript library used to create user interfaces (UI).

Instead of writing one huge HTML page, we divide the UI into components.

<h1>Welcome</h1>
<button>Login</button>

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <button>Login</button>
    </div>
  );
}

2. The React Learning Order

Learn React step by step. Do not jump directly into advanced React.

3. JSX

JSX = JavaScript + HTML-like syntax. It looks like HTML, but it is written inside JavaScript.

function App() {
  return (
    <h1>Hello React</h1>
  );
}

JavaScript expressions can be placed inside JSX using curly braces:

function App() {
  const name = "Avinash";
  return (
    <h1>Hello {name}</h1>
  );
}

4. Components

A component is simply a reusable piece of UI.

function Welcome() {
  return <h1>Welcome to React</h1>;
}

function App() {
  return (
    <div>
      <Welcome />
      <Welcome />
    </div>
  );
}

5. Props

Props are information passed from one component to another. Think of props like function arguments.

function Student(props) {
  return <h2>Hello {props.name}</h2>;
}

function App() {
  return (
    <div>
      <Student name="Ravi" />
      <Student name="John" />
    </div>
  );
}

function student(name) {
  console.log(name);
}
student("Ravi");

<Student name="Ravi" />

6. State

State = data that can change while the application is running.

React uses useState().

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

7. Events

React handles user actions using events.

<button onClick={handleClick}>
  Click Me
</button>

function handleClick() {
  alert("Button clicked!");
}

Common events: onClick, onChange, onSubmit, onMouseOver, onKeyDown

8. Forms

Forms are important for registration, login, search, contact, and payment.

import { useState } from "react";

function Login() {
  const [username, setUsername] = useState("");
  return (
    <div>
      <input
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <h2>{username}</h2>
    </div>
  );
}

9. Conditional Rendering

Display something only when a condition is true.

function App() {
  const loggedIn = true;
  return (
    <div>
      {loggedIn
        ? <h1>Welcome User</h1>
        : <h1>Please Login</h1>}
    </div>
  );
}

10. Lists

Use .map() to display items from an array.

function App() {
  const students = ["Ravi", "John", "Anita"];
  return (
    <ul>
      {students.map((student) => (
        <li>{student}</li>
      ))}
    </ul>
  );
}

Key point: In React, .map() is very important.

11. Hooks

Hooks are special React functions. Two important beginner hooks are:

useEffect(() => {
  console.log("Component loaded");
}, []);

12. React + Backend

React can provide the frontend UI while Node.js and Express.js provide backend services.

// React
fetch("http://localhost:3000/users")

// Express
app.get("/users", (req, res) => {
  res.json(users);
});

React receives the data and displays it.

13. The React Mental Model

When the data changes:

14. Your React Learning Roadmap

ReactDOM

ReactDOM is the bridge between React and the browser's DOM.

Virtual DOM

The Virtual DOM is a lightweight, in-memory representation of the user interface.

Reconciliation

When application data changes, React creates a new representation and compares it with the earlier one. This comparison process is called reconciliation.

Declarative and Idiomatic React

React is declarative because a component describes what the UI should look like for the current data. Imperative code instead gives direct commands about how to alter the page.

React determines the required DOM changes after state or props change. React is also idiomatic JavaScript: components are JavaScript functions and use normal variables, objects, functions, imports, arrays, and expressions. JSX is transformed into JavaScript before it reaches the browser.

🧠 Quick Self-Check