Scribd
Upload
8 views6 pages

ReactJS Notes

React is a JavaScript library developed by Facebook for building user interfaces, particularly for single-page applications. It utilizes a virtual DOM for efficient updates, supports component-based architecture, and has a large community for easy integration with backends. The document covers setup, core concepts like components, state management, event handling, API integration, and advanced topics such as routing and performance optimization.

Uploaded by

pmsangle87
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views6 pages

ReactJS Notes

React is a JavaScript library developed by Facebook for building user interfaces, particularly for single-page applications. It utilizes a virtual DOM for efficient updates, supports component-based architecture, and has a large community for easy integration with backends. The document covers setup, core concepts like components, state management, event handling, API integration, and advanced topics such as routing and performance optimization.

Uploaded by

pmsangle87
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

REACT.

JS – COMPLETE DETAILED GUIDE (WITH CODE)

React kya hai?

React ek JavaScript library hai jo UI (User Interface) banane ke liye use ho hai.

Developed by Facebook (Meta)


SPA (Single Page Applica on) ke liye best

React kyu use karte hain?

✔ Fast (Virtual DOM)


✔ Component-based architecture
✔ Reusable UI
✔ Large community
✔ Easy integra on with backend (Node / APIs)

React kaise kaam karta hai? (IMPORTANT)

Virtual DOM

React real DOM ki jagah Virtual DOM banata hai.

Change detect karta hai


Sirf changed part update karta hai
Isliye React fast hota hai

React setup (Modern way)

npx create-react-app myApp

cd myApp

npm start

OR (recommended)

npm create vite@latest myApp

cd myApp

npm install

npm run dev

React Folder Structure


src/

├── components/

├── pages/

├── [Link]

├── [Link]

JSX (JavaScript + HTML)

const App = () => {

return <h1>Hello React</h1>;

};

export default App;

JSX me:

 class → className

 for → htmlFor

Components (CORE CONCEPT)

Func onal Component

func on Header() {

return <h2>Header Component</h2>;

Props (Data pass karna)

func on User(props) {

return <h3>Hello {[Link]}</h3>;

// Usage

<User name="Ananya" />


State (VERY IMPORTANT)

import { useState } from "react";

func on Counter() {

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

return (

<>

<h2>{count}</h2>

<bu on onClick={() => setCount(count + 1)}>+</bu on>

</>

);

Event Handling

<bu on onClick={() => alert("Clicked")}>

Click Me

</bu on>

Condi onal Rendering

{isLoggedIn ? <Dashboard /> : <Login />}

List Rendering

const users = ["A", "B", "C"];

{[Link]((u, index) => (

<li key={index}>{u}</li>

))}

useEffect Hook

useEffect(() => {
[Link]("Component mounted");

}, []);

API call ke liye use hota hai

API Integra on (REAL WORLD)

useEffect(() => {

fetch("h ps://[Link]/users")

.then(res => [Link]())

.then(data => setUsers(data));

}, []);

Forms Handling

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

<input

value={name}

onChange={(e) => setName([Link])}

/>

Controlled vs Uncontrolled

✔ Controlled → React state


✔ Uncontrolled → useRef

useRef Hook

const inputRef = useRef();

<input ref={inputRef} />

Li ing State Up

Parent component me state


Child me props ke through data
Context API (Prop Drilling ka solu on)

const MyContext = createContext();

React Router (Rou ng)

npm install react-router-dom

<Route path="/login" element={<Login />} />

Lazy Loading

const Home = [Link](() => import("./Home"));

Custom Hooks

func on useFetch(url) {

// logic

Error Boundary

class ErrorBoundary extends [Link] {}

Performance Op miza on

✔ [Link]
✔ useCallback
✔ useMemo

Authen ca on Flow

 Login

 Token store

 Protected routes

React + Bootstrap / Tailwind

npm install bootstrap


import "bootstrap/dist/css/[Link]";

Project Structure (PRO)

components/

pages/

services/

hooks/

context/

You might also like