React.js is a JavaScript library for building user interfaces, especially single-page apps. Created by Meta, it focuses on components, speed, and interactivity.
1๏ธโฃ What is React?
React lets you build reusable UI components and update the DOM efficiently using a virtual DOM.
Why Use React?
โข Reusable components
โข Faster performance with virtual DOM
โข Great for building SPAs (Single Page Applications)
โข Strong community and ecosystem
2๏ธโฃ Key Concepts
๐ฆ Components โ Reusable, independent pieces of UI.
function Welcome() {
return <h1>Hello, React!</h1>;
}
๐ง Props โ Pass data to components
function Greet(props) {
return <h2>Hello, {props.name}!</h2>;
}
<Greet name="Riya" />
๐ก State โ Store and manage data in a component
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Add</button>
</>
);
}
3๏ธโฃ Hooks
useState โ Manage local state
useEffect โ Run side effects (like API calls, DOM updates)
import { useEffect } from 'react';
useEffect(() => {
console.log("Component mounted");
}, []);
4๏ธโฃ JSX
JSX lets you write HTML inside JS.
const element = <h1>Hello World</h1>;
5๏ธโฃ Conditional Rendering
{isLoggedIn ? <Dashboard /> : <Login />}
6๏ธโฃ Lists and Keys
const items = ["Apple", "Banana"];
items.map((item, index) => <li key={index}>{item}</li>);
7๏ธโฃ Event Handling
<button onClick={handleClick}>Click Me</button>
8๏ธโฃ Form Handling
<input value={name} onChange={(e) => setName(e.target.value)} />
9๏ธโฃ React Router (Bonus)
To handle multiple pages
npm install react-router-dom
import { BrowserRouter, Route, Routes } from 'react-router-dom';
๐ Practice Tasks
โ Build a counter
โ Make a TODO app using state
โ Fetch and display API data
โ Try routing between 2 pages
๐ฌ Tap โค๏ธ for more