🌐 ReactJS Tutorial

A JavaScript Library for Building User Interfaces

1. Introduction to ReactJS

What is ReactJS? A JavaScript library developed by Facebook for building UIs. It is component-based, declarative, and efficient.

Why React?

• Reusable components
• Virtual DOM for performance
• Strong ecosystem & community support

2. Setting up the Environment

Install Node.js (LTS version). Create a React project:

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

Alternative (Vite):

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

3. JSX (JavaScript XML)

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

Rules:

• Must return a single parent element
• Use {} for JS expressions
• Attributes use camelCase (e.g., className)

4. Components

Functional Component:

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

Class Component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

5. Props (Properties)

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

<Greeting name="Alice" />

6. State

import React, { useState } from "react";

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

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

7. Lifecycle Methods (Hooks)

import React, { useState, useEffect } from "react";

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

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <p>Timer: {seconds} sec</p>;
}

8. Event Handling

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

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

9. Conditional Rendering

function UserGreeting(props) {
  return props.isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>;
}

10. Lists and Keys

function ItemList() {
  const items = ["Apple", "Banana", "Cherry"];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

11. Forms

function MyForm() {
  const [name, setName] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Hello ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

12. React Router

npm install react-router-dom

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<h1>Home</h1>} />
        <Route path="/about" element={<h1>About</h1>} />
      </Routes>
    </BrowserRouter>
  );
}

13. State Management

Context API:

const ThemeContext = React.createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

For large apps: Redux, Zustand, Recoil.

14. Styling

• Inline CSS: <h1 style={{ color: "blue" }}>Hello</h1>
• CSS Modules: import styles from "./App.module.css";
• Styled-components: const Button = styled.button`background: blue; color: white;`;

15. Advanced Topics

• React Hooks (useMemo, useCallback, useReducer, custom hooks)
• Performance optimization (memo, lazy loading, Suspense)
• Server-Side Rendering (Next.js)
• Testing with Jest & React Testing Library

© 2025 ReactJS Tutorial