React.js (or simply React) is an open-source JavaScript library developed by Facebook (Meta) for building user interfaces (UIs) — especially single-page applications (SPAs).

It helps you create reusable UI components that efficiently update and render when your data changes.

🧩 Why Use React?

Here’s why developers love React:

1. Component-Based Architecture – Build encapsulated, reusable UI pieces.
2. Virtual DOM – Updates only what’s necessary, improving performance.
3. Declarative Syntax – Describe what you want the UI to look like, not how to update it.
4. Fast Rendering – Efficient diffing and updating of the DOM.
5. Huge Ecosystem – Tons of libraries, tools, and community support.
6. Can Be Used Everywhere – Web (React DOM), mobile (React Native), desktop (Electron).

⚙️ Setting Up React

Option 1: Using Create React App

Simplest way to start a new React project.

npx create-react-app my-app
cd my-app
npm start

Option 2: Using Vite (faster modern build tool)

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Folder structure (simplified)

my-react-app/
├── src/
│   ├── App.js
│   ├── index.js
│   ├── components/
│   └── ...
├── public/
└── package.json

🧠 Core React Concepts

1. Components

React apps are built from components.
A component is a reusable piece of UI, usually defined as a function or class.

Functional Component (modern way)

function Welcome() {
  return <h1>Hello, React!</h1>;
}

Using the Component

function App() {
  return (
    <div>
      <Welcome />
      <p>Welcome to React Basics.</p>
    </div>
  );
}

export default App;

2. JSX (JavaScript XML)

React uses JSX, which lets you write HTML-like code inside JavaScript.

const element = <h1>Hello, JSX!</h1>;

JSX is not HTML — it’s syntactic sugar that compiles to JavaScript.

3. Props (Properties)

Props are like function arguments — they allow you to pass data into components.

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

// Usage
<Greeting name="Raj" />

4. State

State is used to store and manage data that can change over time.
React re-renders components automatically when state updates.

import { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

5. Event Handling

React handles events using camelCase syntax and function references.

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

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

6. Conditional Rendering

Render elements conditionally using JavaScript logic.

function UserStatus({ loggedIn }) {
  return (
    <div>{loggedIn ? <h2>Welcome Back!</h2> : <h2>Please Log In</h2>}</div>
  );
}

7. Lists and Keys

Render lists using .map() and unique keys.

const fruits = ["Apple", "Banana", "Cherry"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

8. Hooks (introduced in React 16.8)

Hooks allow you to use state and lifecycle features in functional components.

Common hooks:

• useState() → Manage component state
• useEffect() → Run side effects (like fetching data)
• useContext() → Share data between components without props

Example with useEffect:

import { useState, useEffect } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(timer); // cleanup
  }, []);

  return <p>Time: {seconds}s</p>;
}

9. React DOM Rendering

React applications are typically rendered into a root DOM node.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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

🧱 React Architecture Overview

React application structure:

index.js → main entry point
App.js → main component
components/ → reusable UI parts

Data flow is unidirectional:
Parent → Child via props.

🚀 Summary Table

Concept	Description
Library Type	UI library (not a full framework)
Created By	Facebook (Meta)
Language	JavaScript (with JSX)
Architecture	Component-based
Rendering	Virtual DOM
File Extension	.js or .jsx
Common Tools	Vite, Create React App, Next.js