Learn REACT with Real Code Examples

import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
};

export default Counter;

Demonstrates a simple counter using React useState hook.

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export const useTheme = () => useContext(ThemeContext);

const ThemeProvider = ({ children }) => {
    const [isDark, setIsDark] = useState(false);
    const toggleTheme = () => setIsDark(!isDark);
    return <ThemeContext.Provider value={{ isDark, toggleTheme }}>{children}</ThemeContext.Provider>;
};

export default ThemeProvider;

Uses React Context and useState to toggle dark/light theme.

import React, { useState } from 'react';

const TodoApp = () => {
    const [todos, setTodos] = useState([]);
    const [task, setTask] = useState('');
    const addTodo = () => setTodos([...todos, { task, completed: false }]);
    const toggleTodo = index => {
        const newTodos = [...todos];
        newTodos[index].completed = !newTodos[index].completed;
        setTodos(newTodos);
    };
    return (
        <div>
        <input value={task} onChange={e => setTask(e.target.value)} />
        <button onClick={addTodo}>Add</button>
        <ul>{todos.map((todo, i) => <li key={i} onClick={() => toggleTodo(i)} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>{todo.task}</li>)}</ul>
        </div>
    );
};

export default TodoApp;

Simple Todo list with add, remove, and toggle completion using useState.

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

const DataFetcher = () => {
    const [data, setData] = useState([]);
    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/posts')
        .then(res => res.json())
        .then(setData);
    }, []);
    return <ul>{data.map(item => <li key={item.id}>{item.title}</li>)}</ul>;
};

export default DataFetcher;

Fetches data from API and displays it using useEffect and useState.

import React, { useState } from 'react';

const FormExample = () => {
    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)} placeholder="Enter name" />
        <button type="submit">Submit</button>
        </form>
    );
};

export default FormExample;

Demonstrates controlled form inputs and submission handling.

import React, { useState } from 'react';

const ModalExample = () => {
    const [isOpen, setIsOpen] = useState(false);
    return (
        <div>
        <button onClick={() => setIsOpen(true)}>Open Modal</button>
        {isOpen && <div className="modal"><p>Modal Content</p><button onClick={() => setIsOpen(false)}>Close</button></div>}
        </div>
    );
};

export default ModalExample;

Displays a modal using conditional rendering and state.

import React, { useReducer } from 'react';

const reducer = (state, action) => {
    switch(action.type) {
        case 'INCREMENT': return { count: state.count + 1 };
        case 'DECREMENT': return { count: state.count - 1 };
        case 'RESET': return { count: 0 };
        default: return state;
    }
};

const ReducerCounter = () => {
    const [state, dispatch] = useReducer(reducer, { count: 0 });
    return (
        <div>
        <h2>Count: {state.count}</h2>
        <button onClick={() => dispatch({type: 'INCREMENT'})}>+</button>
        <button onClick={() => dispatch({type: 'DECREMENT'})}>-</button>
        <button onClick={() => dispatch({type: 'RESET'})}>Reset</button>
        </div>
    );
};

export default ReducerCounter;

Manages counter state using useReducer hook for more complex logic.

import React, { createContext, useContext, useState } from 'react';

const CounterContext = createContext();
export const useCounter = () => useContext(CounterContext);

const CounterProvider = ({ children }) => {
    const [count, setCount] = useState(0);
    return <CounterContext.Provider value={{ count, setCount }}>{children}</CounterContext.Provider>;
};

export default CounterProvider;

Shares counter state across components using React Context.

import React, { useState } from 'react';

const Tabs = () => {
    const [active, setActive] = useState('tab1');
    return (
        <div>
        <button onClick={() => setActive('tab1')}>Tab 1</button>
        <button onClick={() => setActive('tab2')}>Tab 2</button>
        <div>{active === 'tab1' ? <p>Content 1</p> : <p>Content 2</p>}</div>
        </div>
    );
};

export default Tabs;

Switches between tab content using useState and conditional rendering.

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

const LocalStorageCounter = () => {
    const [count, setCount] = useState(0);
    useEffect(() => {
        const saved = localStorage.getItem('count');
        if (saved) setCount(parseInt(saved, 10));
    }, []);
    useEffect(() => {
        localStorage.setItem('count', count);
    }, [count]);
    return (
        <div>
        <h2>Count: {count}</h2>
        <button onClick={() => setCount(c => c + 1)}>+</button>
        <button onClick={() => setCount(c => c - 1)}>-</button>
        </div>
    );
};

export default LocalStorageCounter;

Persists counter value in localStorage using useEffect.