React JS Complete Guide 2026: Beginner to Master

// Regular function syntax (requires manual binding in class components)
function clickHandlerRegular() {
  console.log(this); // 'this' depends on invocation context
}

// Arrow function syntax (lexically binds 'this' of parent scope)
const clickHandlerArrow = () => {
  console.log(this); // 'this' is preserved lexically
};

// Destructuring props directly inside function signature
const UserProfile = ({ username, role = "Developer", status }) => {
  return (
    <div className="p-4 rounded border">
      <h2>{username}</h2>
      <p>Role: {role}</p>
      <span>Status: {status}</span>
    </div>
  );
};

// Rendering lists using .map()
const ItemList = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

// Asynchronous data fetching with async/await and error handling
const fetchUserData = async (userId, signal) => {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`, { signal });
    if (!response.ok) {
      throw new Error("Network response was not OK");
    }
    const data = await response.json();
    return data;
  } catch (error) {
    if (error.name === "AbortError") {
      console.log("Fetch aborted");
    } else {
      console.error("Fetch failed: ", error);
    }
    throw error;
  }
};

// Simple Hello World structure
import React from 'react';
import { createRoot } from 'react-dom/client';

const App = () => {
  return <h1>Hello World from React 19!</h1>;
};

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

// JSX Representation
const elementJSX = <h1 className="title">Hello World</h1>;

// Compiled equivalent (using plain React.createElement)
const elementPlain = React.createElement(
  'h1',
  { className: 'title' },
  'Hello World'
);

// Conceptual representation of a Virtual DOM Node
const vNode = {
  type: 'div',
  props: {
    className: 'container',
    children: [
      { type: 'h1', props: { children: 'Virtual DOM Demo' } }
    ]
  }
};

// Modern Functional Component syntax
import React from 'react';

const ProfileCard = ({ name, bio }) => {
  return (
    <div className="profile-card">
      <h3>{name}</h3>
      <p>{bio}</p>
    </div>
  );
};

export default ProfileCard;

// Legacy Class Component syntax (kept for reference and interview prep)
import React, { Component } from 'react';

class LegacyProfileCard extends Component {
  render() {
    const { name, bio } = this.props;
    return (
      <div className="profile-card">
        <h3>{name}</h3>
        <p>{bio}</p>
      </div>
    );
  }
}

export default LegacyProfileCard;

// Composing parents and children
const Header = () => <header><h1>My Dashboard</h1></header>;
const Footer = () => <footer>© 2026</footer>;

const PageLayout = () => {
  return (
    <div className="layout">
      <Header />
      <main>
        <p>Main content goes here.</p>
      </main>
      <Footer />
    </div>
  );
};

// Reusable wrapper using the 'children' prop
const Modal = ({ isOpen, children }) => {
  if (!isOpen) return null;
  return (
    <div className="modal-overlay">
      <div className="modal-content">
        {children}
      </div>
    </div>
  );
};

// Usage:
// <Modal isOpen={true}>
//   <h2>Login</h2>
//   <input type="text" placeholder="Username" />
// </Modal>

// Fragment usage to return adjacent elements without wrapper div
const TableRow = () => {
  return (
    <React.Fragment>
      <td>Name</td>
      <td>Email</td>
    </React.Fragment>
  );
};

// Short syntax:
const ShortTableRow = () => {
  return (
    <>
      <td>Name</td>
      <td>Email</td>
    </>
  );
};

// Parent passing dynamic variables and functions to a child
const Dashboard = () => {
  const handleAlert = (msg) => alert(msg);
  
  return (
    <div className="p-8">
      <WelcomeBanner
        username="Dev"
        age={28}
        isAdmin={true}
        tags={['react', 'web']}
        onAlert={handleAlert}
      />
    </div>
  );
};

// Best practice: default props via ES6 destructuring parameters
const WelcomeBanner = ({ username, age = 18, isAdmin = false, onAlert }) => {
  return (
    <div className="banner">
      <h1>Welcome back, {username}!</h1>
      <p>Age: {age} {isAdmin && "(Admin Access)"}</p>
      <button onClick={() => onAlert("Hello from banner")}>Trigger Alert</button>
    </div>
  );
};

// Runtime type checking via PropTypes (legacy, preferred is TypeScript)
import PropTypes from 'prop-types';

const UserBadge = ({ label, level }) => {
  return <span className={`badge-${level}`}>{label}</span>;
};

UserBadge.propTypes = {
  label: PropTypes.string.isRequired,
  level: PropTypes.oneOf(['bronze', 'silver', 'gold']).isRequired
};

// Visualizing prop drilling: forwarding props down multiple levels
const TopComponent = () => {
  const [theme] = React.useState("dark");
  return <MiddleComponent theme={theme} />;
};

const MiddleComponent = ({ theme }) => {
  // Theme is unused here, only forwarded
  return <BottomComponent theme={theme} />;
};

const BottomComponent = ({ theme }) => {
  return <div className={`box theme-${theme}`}>Styled Content</div>;
};

// Counter showing standard useState and functional updates
import React, { useState } from 'react';

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

  const increment = () => {
    // Bad if multiple updates are queued: setCount(count + 1);
    // Good: Functional updates guarantee latest prev state
    setCount((prev) => prev + 1);
  };

  return (
    <div className="flex gap-4 items-center">
      <span>Count: {count}</span>
      <button onClick={increment}>Add</button>
    </div>
  );
};

// Toggling boolean values cleanly
const LightSwitch = () => {
  const [isOn, setIsOn] = useState(false);
  return (
    <button onClick={() => setIsOn(prev => !prev)}>
      {isOn ? "ON" : "OFF"}
    </button>
  );
};

// Correctly updating objects with the spread operator
const UserProfile = () => {
  const [user, setUser] = useState({ name: 'Dev', age: 27 });

  const birthday = () => {
    // WRONG: user.age = user.age + 1; setUser(user); (No reference change)
    // RIGHT: Spread details and overwrite target property
    setUser((prevUser) => ({
      ...prevUser,
      age: prevUser.age + 1
    }));
  };

  return <button onClick={birthday}>Age: {user.age}</button>;
};

// Correctly modifying arrays
const TodoList = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = (text) => {
    const newTodo = { id: Date.now(), text };
    // Add item (creates new array)
    setTodos((prevTodos) => [...prevTodos, newTodo]);
  };

  const removeTodo = (id) => {
    // Remove item (creates filtered array)
    setTodos((prevTodos) => prevTodos.filter(todo => todo.id !== id));
  };

  return <button onClick={() => addTodo("Learn State")}>Add Task</button>;
};

// useEffect with Fetch and AbortController cleanup
import React, { useState, useEffect } from 'react';

const UserDetail = ({ userId }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    
    const loadData = async () => {
      try {
        const res = await fetch(`https://api.example.com/users/${userId}`, {
          signal: controller.signal
        });
        const data = await res.json();
        setUser(data);
      } catch (err) {
        if (err.name !== 'AbortError') console.error(err);
      }
    };

    loadData();

    // Cleanup cancels pending requests when component updates/unmounts
    return () => controller.abort();
  }, [userId]);

  return <div>{user ? user.name : "Loading..."}</div>;
};

// useRef for DOM access and tracking previous state value
const AutoFocusInput = ({ value }) => {
  const inputRef = React.useRef(null);
  const prevValRef = React.useRef("");

  React.useEffect(() => {
    // Focus DOM input element on mount
    inputRef.current?.focus();
  }, []);

  React.useEffect(() => {
    // Keep track of previous state value
    prevValRef.current = value;
  }, [value]);

  return (
    <div>
      <input ref={inputRef} type="text" value={value} />
      <p>Previous Value: {prevValRef.current}</p>
    </div>
  );
};

// useReducer for complex form states
const formReducer = (state, action) => {
  switch (action.type) {
    case 'FIELD_CHANGE':
      return { ...state, [action.field]: action.value };
    case 'RESET':
      return { name: '', email: '' };
    default:
      return state;
  }
};

const UserForm = () => {
  const [state, dispatch] = React.useReducer(formReducer, { name: '', email: '' });

  return (
    <form>
      <input
        value={state.name}
        onChange={(e) => dispatch({ type: 'FIELD_CHANGE', field: 'name', value: e.target.value })}
      />
      <input
        value={state.email}
        onChange={(e) => dispatch({ type: 'FIELD_CHANGE', field: 'email', value: e.target.value })}
      />
    </form>
  );
};

// useMemo and useCallback to stabilize references
const ExpensiveComponent = ({ list, onProcess }) => {
  // Memoizes calculations to prevent recalculating on every render
  const sortedList = React.useMemo(() => {
    return [...list].sort((a, b) => b.score - a.score);
  }, [list]);

  // Memoizes function reference to prevent child re-renders
  const handleItemClick = React.useCallback((id) => {
    onProcess(id);
  }, [onProcess]);

  return (
    <ul>
      {sortedList.map(item => (
        <li key={item.id} onClick={() => handleItemClick(item.id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
};

// Standard Event Handlers and parameters
const ButtonGroup = () => {
  const handleClick = (e) => {
    console.log("Button clicked!", e.target);
  };

  const handleCustomClick = (id, e) => {
    console.log("Item ID clicked:", id, "Event:", e);
  };

  return (
    <div className="flex gap-4">
      {/* Simple reference */}
      <button onClick={handleClick}>Click Me</button>

      {/* Passing arguments via inline arrow function */}
      <button onClick={(e) => handleCustomClick(101, e)}>Click 101</button>
    </div>
  );
};

// Preventing default behaviors in event handlers
const SearchForm = () => {
  const [query, setQuery] = React.useState("");

  const handleSubmit = (e) => {
    e.preventDefault(); // Prevents page reload
    console.log("Submitting query:", query);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
      <button type="submit">Search</button>
    </form>
  );
};

// Common conditional rendering patterns
const LoadingSpinner = () => <div>Loading...</div>;
const ErrorMessage = ({ error }) => <div>Error: {error}</div>;

const UserPanel = ({ isLoading, error, data }) => {
  // Pattern 1: Early return (ideal for top-level checks)
  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorMessage error={error} />;
  if (!data) return null; // Render nothing

  return (
    <div className="profile">
      <h2>{data.name}</h2>
      {/* Pattern 2: Ternary operator inside JSX */}
      {data.isPremium ? (
        <span className="badge-gold">Premium Member</span>
      ) : (
        <span className="badge-free">Free Account</span>
      )}
      
      {/* Pattern 3: Short-circuit logical AND (&&) */}
      {data.hasNotifications && <span className="dot">●</span>}
    </div>
  );
};

// Standard list rendering with key and removal actions
const ContactList = () => {
  const [contacts, setContacts] = React.useState([
    { id: 'uid-1', name: 'John Doe', email: '[email protected]' },
    { id: 'uid-2', name: 'Jane Smith', email: '[email protected]' }
  ]);

  const deleteContact = (id) => {
    // Filter array (creates new reference)
    setContacts(contacts.filter(c => c.id !== id));
  };

  return (
    <ul className="divide-y">
      {contacts.map((contact) => (
        // KEY is attached to root tag returned by map loop
        <li key={contact.id} className="py-2 flex justify-between">
          <span>{contact.name} ({contact.email})</span>
          <button onClick={() => deleteContact(contact.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
};

// Standard Controlled inputs using a unified handler
const RegisterForm = () => {
  const [formData, setFormData] = React.useState({
    username: "",
    email: "",
    subscribed: false
  });

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: type === "checkbox" ? checked : value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Submit:", formData);
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <input name="username" value={formData.username} onChange={handleChange} />
      <input name="email" value={formData.email} onChange={handleChange} />
      <input type="checkbox" name="subscribed" checked={formData.subscribed} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

// Uncontrolled input utilizing useRef
const QuickContact = () => {
  const emailRef = React.useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Read input directly from the DOM reference
    alert("Email submitted: " + emailRef.current?.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" ref={emailRef} defaultValue="[email protected]" />
      <button type="submit">Send</button>
    </form>
  );
};

// Full Context Setup: Creation, Provider, and Custom Hook
import React, { createContext, useContext, useState } from 'react';

// 1. Create Context
const ThemeContext = createContext(undefined);

// 2. Create Custom Provider
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("dark");
  const toggleTheme = () => setTheme(t => t === "dark" ? "light" : "dark");

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 3. Create Custom Hook to consume context safely
export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme must be used within a ThemeProvider");
  }
  return context;
};

// Creating a lightweight Zustand Store
import { create } from 'zustand';

export const useCartStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  clearCart: () => set({ items: [] })
}));

// Usage in Component:
// const items = useCartStore((state) => state.items);
// const addItem = useCartStore((state) => state.addItem);

// Standard Redux Toolkit Slice
import { createSlice } from '@reduxjs/toolkit';

const authSlice = createSlice({
  name: 'auth',
  initialState: { user: null, loading: false },
  reducers: {
    setUser: (state, action) => {
      // Immer handles mutability safety under the hood
      state.user = action.payload;
    },
    logout: (state) => {
      state.user = null;
    }
  }
});

export const { setUser, logout } = authSlice.actions;
export default authSlice.reducer;

// React Router v6 setup with layouts and dynamic routes
import { BrowserRouter, Routes, Route, Link, Outlet, useParams } from 'react-router-dom';

const AppLayout = () => (
  <div>
    <nav className="flex gap-4 p-4 border-b">
      <Link to="/">Home</Link>
      <Link to="/products">Products</Link>
    </nav>
    <main className="p-6">
      {/* Outlet renders matched child route components */}
      <Outlet />
    </main>
  </div>
);

const ProductDetail = () => {
  const { productId } = useParams(); // Reading dynamic slug
  return <h2>Showing Product: {productId}</h2>;
};

const RootRouter = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<AppLayout />}>
        <Route index element={<h1>Home Page</h1>} />
        <Route path="products/:productId" element={<ProductDetail />} />
      </Route>
    </Routes>
  </BrowserRouter>
);

// Using React.memo to prevent re-renders when parent states change
import React, { useState } from 'react';

const ExpensiveDisplay = React.memo(({ title }) => {
  console.log("Expensive rendered!");
  return <h3>Display: {title}</h3>;
});

const Parent = () => {
  const [text, setText] = useState("");
  const [count, setCount] = useState(0);

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={() => setCount(c => c + 1)}>Clicks: {count}</button>
      {/* ExpensiveDisplay will NOT re-render when text changes because text is not a prop here */}
      <ExpensiveDisplay title="Stable Dashboard" />
    </div>
  );
};

// Custom Hook to manage local storage state
import { useState, useEffect } from 'react';

export function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    try {
      const saved = localStorage.getItem(key);
      return saved ? JSON.parse(saved) : initialValue;
    } catch {
      return initialValue;
    }
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// Custom Hook to debounce high-frequency state updates (like inputs)
import { useState, useEffect } from 'react';

export function useDebounce(value, delay = 500) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(handler); // Cleanup on update
  }, [value, delay]);

  return debouncedValue;
}

// Typing Props and Event handlers in React + TypeScript
import React, { useState } from 'react';

interface ButtonProps {
  label: string;
  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
  variant?: 'primary' | 'secondary';
}

const PrimaryButton: React.FC<ButtonProps> = ({ label, onClick, variant = 'primary' }) => {
  return <button onClick={onClick} className={`btn btn-${variant}`}>{label}</button>;
};

const InputForm = () => {
  const [val, setVal] = useState<string>(""); // Generics on useState

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setVal(e.target.value);
  };

  return <input type="text" value={val} onChange={handleChange} />;
};

// React 19 use() Hook resolving promises inline
import React, { use, Suspense } from 'react';

const fetchMessage = () => fetch('/api/msg').then(res => res.json());
const msgPromise = fetchMessage(); // Define outside or memoize

const MessagePanel = () => {
  // use() resolves the promise during rendering
  const message = use(msgPromise);
  return <p>Fetched Message: {message.text}</p>;
};

const App = () => (
  <Suspense fallback={<div>Loading promise...</div>}>
    <MessagePanel />
  </Suspense>
);

// useOptimistic Hook for instant UI updates
import { useOptimistic, useState } from 'react';

const TaskPanel = () => {
  const [tasks, setTasks] = useState([{ id: 1, text: "Learn React" }]);
  const [optimisticTasks, setOptimisticTasks] = useOptimistic(
    tasks,
    (state, newTaskText) => [...state, { id: Date.now(), text: newTaskText, sending: true }]
  );

  const addTask = async (formData) => {
    const text = formData.get("taskText");
    setOptimisticTasks(text); // Trigger instant optimistic view
    
    // Perform real network request
    await fetch('/api/tasks', { method: 'POST', body: JSON.stringify({ text }) });
    setTasks(prev => [...prev, { id: Date.now(), text }]);
  };

  return (
    <form action={addTask}>
      <input name="taskText" required />
      <button type="submit">Add Task</button>
      <ul>
        {optimisticTasks.map(t => (
          <li key={t.id}>{t.text} {t.sending && "(Sending...)"}</li>
        ))}
      </ul>
    </form>
  );
};

// Standard Vitest/RTL component test
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { expect, test, vi } from 'vitest';
import ClickButton from './ClickButton';

test('renders button and processes click event', async () => {
  const handler = vi.fn();
  render(<ClickButton onClick={handler} label="Submit" />);

  const btn = screen.getByRole('button', { name: /submit/i });
  expect(btn).toBeInTheDocument();

  await userEvent.click(btn);
  expect(handler).toHaveBeenCalledTimes(1);
});

// Compound Component Pattern (like select/option)
import React, { createContext, useContext, useState } from 'react';

const TabsContext = createContext(undefined);

export const Tabs = ({ children, defaultIndex = 0 }) => {
  const [activeIndex, setActiveIndex] = useState(defaultIndex);
  return (
    <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
      <div className="tabs-container">{children}</div>
    </TabsContext.Provider>
  );
};

Tabs.Tab = ({ index, label }) => {
  const { activeIndex, setActiveIndex } = useContext(TabsContext);
  return (
    <button
      onClick={() => setActiveIndex(index)}
      className={activeIndex === index ? 'active' : ''}
    >
      {label}
    </button>
  );
};

Tabs.Panel = ({ index, children }) => {
  const { activeIndex } = useContext(TabsContext);
  return activeIndex === index ? <div>{children}</div> : null;
};

// Fetching data with TanStack Query (React Query)
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

const fetchTodos = () => fetch('/api/todos').then(res => res.json());
const addTodoApi = (newTodo) => fetch('/api/todos', {
  method: 'POST',
  body: JSON.stringify(newTodo)
}).then(res => res.json());

const TaskList = () => {
  const queryClient = useQueryClient();
  
  // GET Query
  const { data: todos, isLoading, error } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos
  });

  // POST Mutation
  const mutation = useMutation({
    mutationFn: addTodoApi,
    onSuccess: () => {
      // Invalidate cache and trigger refetch
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    }
  });

  if (isLoading) return <span>Loading tasks...</span>;
  if (error) return <span>Error loading tasks</span>;

  return (
    <div>
      <button onClick={() => mutation.mutate({ text: 'New Task' })}>Add Task</button>
      <ul>
        {todos.map(t => <li key={t.id}>{t.text}</li>)}
      </ul>
    </div>
  );
};

src/
  features/         # Domain-driven features
    auth/
      components/   # Auth-specific widgets
      hooks/        # Auth logic
      api/          # Auth service/fetches
      types/        # Auth types
    dashboard/
  shared/           # Shared modules
    components/     # Reusable buttons, cards
    hooks/          # useLocalStorage, useFetch
    utils/          # Helper calculations
  pages/            # View entry layouts
  app/              # Router configs and providers
  index.css         # Global style tokens