⚛️ React Fundamentals

React is a popular JavaScript library (created by Facebook) for building fast, dynamic, and reusable user interfaces using a component-based architecture.

SPA Friendly Component-Based Virtual DOM

? Quick Overview

⚛️ React is used to build modern, interactive web applications.
? UIs are split into small reusable pieces called components.
? Uses JSX (HTML-like syntax in JavaScript).
? Data is passed with props and managed with state.
⚡ Virtual DOM makes React apps very fast and efficient.

? Why Use React?

✅ Builds fast and scalable single-page applications (SPAs).
✅ Encourages clean, modular, and reusable code with components.
✅ Virtual DOM minimizes expensive real DOM updates.
✅ Strong ecosystem (React Router, Redux, Next.js, etc.).
✅ Backed by a huge open-source community and regular updates.

? Key Concepts in React

Components: Reusable building blocks of the UI.
JSX: HTML-like syntax inside JavaScript.
Props: Read-only data passed from parent to child components.
State: Data that can change over time inside a component.
Rendering: React renders components into a root DOM node.

? JSX (JavaScript XML)

JSX lets you write HTML-like code inside JavaScript. React then converts JSX into regular JavaScript using React.createElement().

? View Code Example

// JSX: writing UI using HTML-like syntax inside JavaScript
const element = <h1>Hello, React!</h1>;

Behind the scenes, React converts the JSX into:

? View Code Example

// React automatically compiles JSX to this JavaScript form
const element = React.createElement("h1", null, "Hello, React!");

?️ Output / Explanation

Both snippets create the same React element that represents an <h1> heading saying "Hello, React!". JSX is just a more human-friendly way to write this.

? React Components

React apps are made of components. Each component is a function (or class) that returns UI elements. Components make your UI reusable and easier to maintain.

? View Code Example

// Functional components used to build small pieces of UI
function Welcome() {
  return <h2>Welcome to React!</h2>;
}

function App() {
  return (
    <div>
      <Welcome />
      <p>This is rendered by React.</p>
    </div>
  );
}

?️ Output / Explanation

The App component renders a heading from Welcome and a paragraph below it. React combines both components to build the final UI on the page.

? Tip: Always start component names with a capital letter (e.g., Welcome), not lowercase. React treats lowercase names as normal HTML tags.

? Props (Properties)

Props allow components to receive data from their parents. They make components flexible and reusable because you can pass different values each time.

? View Code Example

// Using props to pass dynamic data into a component
function Greeting(props) {
  return <h3>Hello, {props.name}!</h3>;
}

function App() {
  return (
    <div>
      <Greeting name="Aarav" />
      <Greeting name="Diya" />
    </div>
  );
}

?️ Output / Explanation

The page will show two lines:

Hello, Aarav!
Hello, Diya!

The same Greeting component is reused with different name values.

? Tip: Props are read-only. To change data inside a component over time, you should use state.

⚙️ State in React

State is used to store data that can change over time, like counters or form input. When state changes, React automatically re-renders the component to show the new UI.

? View Code Example

// useState hook to add reactive state to a functional component
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click Me
      </button>
    </div>
  );
}

?️ Output / Explanation

Initially, the text shows You clicked 0 times. Every time you press Click Me, the count value increases by 1, and the text updates.

? Try It: In the code above, change setCount(count + 1) to setCount(count + 2) and observe how the counter increases by 2 each time instead of 1.

? Rendering React in HTML

React needs a root element in your HTML file. Your React app is mounted inside this element.

? View Code Example (HTML)

<!-- Root element inside index.html where React will render the app -->
<div id="root"></div>

Then, you attach your React app to this root element using JavaScript:

? View Code Example (React Entry)

// Entry point: connect React components to the root DOM node
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

?️ Output / Explanation

After this setup, whatever your App component returns will be rendered inside the <div id="root"> element on the actual web page.

? Tips & Best Practices

Use meaningful component names and keep components focused and small.
Break big UIs into many smaller, reusable components.
Keep your state as small and as local as possible.
Learn about hooks like useEffect for side-effects and data fetching.
Always return a single parent element from a component (use <div> or <React.Fragment>).

? Try It Yourself

Create a React component that displays your name.
Add a button that changes your name when clicked.
Modify the component to toggle between two different names.
Try changing the initial state value and observe the result.
Add another button to reset the name back to the original.
Display how many times the button has been clicked.
Change the text color when the name changes.
Add an input box to allow the user to enter their name dynamically.