Launch offer
Business website $150 USD Custom plugin $200 USD Ready in 5 days
Get a quote
malekimtiyajmca@gmail.com
React

React Complete Tutorial (103 Topics with Hooks, Router, APIs & Final Project)

Complete React tutorial covering JSX, components, hooks, routing, state management, APIs, TypeScript, testing, deployment, and a final React web application project.

August 21, 2026 By malekimtiyajmca@gmail.com 18 min read

This complete React tutorial covers 103 topics — from JSX and hooks to routing, APIs, state management, TypeScript, testing, and a final production-shaped React web application.

Course roadmap

1. Introduction to React

React is a JavaScript library for building user interfaces with components and declarative rendering. This series covers Vite setup, hooks, routing, state management, APIs, TypeScript, testing, and a complete final React app.

  1. Create a Vite React app.
  2. Learn components, hooks, and routing.
  3. Build the final React application.

Learning path

Setup + JSX + components
Props/state + hooks
Routing + API + auth
State libraries + performance
Testing + deployment
Final React web app

2. What is React?

React focuses on rendering UI from state. You describe what the UI should look like; React updates the DOM efficiently.

React at a glance

Components
Declarative UI
One-way data flow
Virtual DOM / reconciler
Rich ecosystem

3. Features of React

Hooks, concurrent features, and a huge package ecosystem make React productive for SPAs and more.

Feature highlights

JSX
Functional components + hooks
Composition
DevTools
React Router / state libs
SSR via frameworks (Next.js)

4. React vs JavaScript

You still need solid JS (ES modules, async, arrays/objects) to write good React.

Relationship

JavaScript → language
React → UI library using JS
JSX → syntax sugar compiling to JS
Browser still runs JS bundles

5. React vs Angular vs Vue

React is a UI library with flexible choices; Angular is a full framework; Vue sits between with approachable defaults.

Quick compare

React → library, flexible ecosystem
Angular → batteries-included framework
Vue → progressive framework, gentle curve
Pick by team skills & project needs

6. React Installation

Modern apps use Node.js + a build tool to compile JSX and bundle modules.

Install approach

Install Node.js LTS
Create app with Vite
npm install / npm run dev

7. Setting Up Node.js and npm

Node provides the toolchain; the browser runs the built app.

  1. Install Node.js LTS.
  2. Verify node and npm.
  3. Ready for Vite scaffolding.

Verify

node -v
npm -v

8. Creating a React App with Vite

Vite is the common modern replacement for Create React App in new projects.

  1. Run create vite with React template.
  2. Install dependencies.
  3. Start the dev server.

Scaffold

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

9. React Project Structure

Keep structure scalable: feature folders or layered folders — stay consistent.

Typical structure

src/main.jsx
src/App.jsx
src/components/
src/pages/
src/hooks/
src/api/
public/

10. JSX Introduction

JSX compiles to React.createElement / jsx runtime calls.

JSX idea

const el = <h1 className="title">Hello React</h1>;

11. JSX Syntax

Use fragments `<>…</>` when you don’t want an extra DOM node.

JSX rules

return (
  <>
    <h1 className="title">Home</h1>
    <img src={url} alt="Hero" />
  </>
);

12. JavaScript Expressions in JSX

Statements like if/for don’t go directly in JSX — use expressions or precompute.

Expressions

const name = 'Asha';
return <p>Hello {name.toUpperCase()} — {2 + 2}</p>;

13. React Components

Prefer small, composable components over giant files.

Component idea

UI piece + logic
Props in → JSX out
Compose components together

14. Functional Components in React

Hooks work with function components — this is today’s standard style.

Functional component

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

15. Class Components in React

New code should prefer functions + hooks; still useful when maintaining older apps.

Class component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

16. Props in React

Props make components reusable and predictable.

Props

<UserCard name="Asha" role="Editor" />

17. Passing Data Through Props

Keep props focused; avoid prop drilling with context when it gets deep.

Pass callback

<Button onClick={() => setOpen(true)} label="Open" />

18. Default Props in React

Default parameters in function signatures are the preferred approach.

Default params

function Button({ label = 'Submit', disabled = false }) {
  return <button disabled={disabled}>{label}</button>;
}

19. State in React

Updating state triggers a re-render with the new UI.

State idea

Props → from parent
State → owned by component
setState → schedule re-render

20. useState Hook in React

Use functional updates when next state depends on previous state.

useState

const [count, setCount] = useState(0);
<button onClick={() => setCount((c) => c + 1)}>{count}</button>;

21. Event Handling in React

Pass functions — don’t call them accidentally in JSX (`onClick={fn}` not `onClick={fn()}`).

Events

<button onClick={handleSave}>Save</button>
<input onChange={(e) => setValue(e.target.value)} />

22. Conditional Rendering in React

Prefer readable conditions; extract small components when JSX gets noisy.

Conditional

{isLoading && <Spinner />}
{user ? <Profile user={user} /> : <LoginPrompt />}

23. Rendering Lists in React

Keep list item components pure and keyed correctly.

List map

<ul>
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

24. Keys in React

Prefer IDs over array indexes unless the list is static.

Keys tip

Stable + unique among siblings
Avoid index keys for reordering lists
Don’t use random keys each render

25. Forms in React

Prevent default submit and validate before API calls.

Form sketch

<form onSubmit={handleSubmit}>
  <input value={email} onChange={(e) => setEmail(e.target.value)} />
  <button type="submit">Send</button>
</form>

26. Controlled Components in React

Controlled inputs are the default recommendation for most forms.

Controlled input

const [name, setName] = useState('');
<input value={name} onChange={(e) => setName(e.target.value)} />

27. Uncontrolled Components in React

Useful for simple forms or file inputs; controlled is still more common.

Uncontrolled

const inputRef = useRef(null);
<input ref={inputRef} defaultValue="Asha" />

28. Form Validation in React

Libraries (React Hook Form, Formik) help larger forms — understand basics first.

Validation tip

Required / format checks
Show field errors
Disable submit while invalid/loading
Server validation still required

29. useEffect Hook in React

Declare dependencies correctly; clean up subscriptions in the return function.

useEffect

useEffect(() => {
  const id = setInterval(() => setNow(Date.now()), 1000);
  return () => clearInterval(id);
}, []);

30. Component Lifecycle in React

useEffect covers most lifecycle needs in function components.

Lifecycle map

mount → useEffect(... , [])
update → useEffect with deps
unmount → effect cleanup
render → function body

31. useRef Hook in React

Great for input focus, previous values, and timer IDs.

useRef

const inputRef = useRef(null);
useEffect(() => { inputRef.current?.focus(); }, []);
<input ref={inputRef} />

32. useMemo Hook in React

Don’t overuse — measure first; prefer clear code.

useMemo

const total = useMemo(
  () => items.reduce((sum, i) => sum + i.price, 0),
  [items]
);

33. useCallback Hook in React

Useful with React.memo children that depend on referential equality.

useCallback

const onSave = useCallback(() => {
  save(item);
}, [item]);

34. useContext Hook in React

Create a context + provider; consume with useContext.

useContext idea

const ThemeContext = createContext('light');
const theme = useContext(ThemeContext);

35. Creating Custom Hooks in React

Custom hooks share logic, not UI — return values/callbacks.

Custom hook

function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = () => setOn((v) => !v);
  return [on, toggle];
}

36. React Hooks Rules

Follow the Rules of Hooks to keep state consistent across renders.

Rules

Top level only (no conditions/loops)
Only in React functions / custom hooks
Dependency arrays must be honest

37. State Management in React

Start simple (useState/useReducer); add Redux/Zustand when shared state grows.

State options

Local useState/useReducer
Context for limited shared state
Redux Toolkit / Zustand for app-wide state
Server state: React Query / SWR

38. Context API in React

Split contexts to avoid unnecessary re-renders; memoize provider values.

Provider tip

<AuthContext.Provider value={value}>
  {children}
</AuthContext.Provider>

39. Redux Introduction

Modern Redux means Redux Toolkit — skip legacy boilerplate when learning today.

Redux ideas

Single store
Actions describe events
Reducers update state immutably
UI subscribes to slices

40. Redux Toolkit

RTK simplifies store setup and immutable updates.

createSlice idea

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    incremented(state) { state.value += 1; },
  },
});

41. React Redux

Select only needed state to limit re-renders.

React Redux hooks

const value = useSelector((s) => s.counter.value);
const dispatch = useDispatch();
<button onClick={() => dispatch(incremented())}>+</button>;

42. Zustand State Management

Great when Redux feels heavy but context is awkward.

Zustand idea

const useStore = create((set) => ({
  count: 0,
  inc: () => set((s) => ({ count: s.count + 1 })),
}));

43. React Router

React Router maps URLs to components without full page reloads.

Router idea

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

44. Routing in React

Keep route config centralized as apps grow.

Routing tip

Route path → element
Layout routes with Outlet
Index routes
Navigate / Link for transitions

45. Dynamic Routes in React

Load data based on params in effects or loaders (data APIs).

Dynamic route

<Route path="/users/:id" element={<UserPage />} />
// const { id } = useParams();

46. Nested Routes in React

Parent renders `<Outlet />` for child routes.

Nested tip

Parent layout route
Child paths relative/absolute
Outlet for nested UI

47. Protected Routes in React

Redirect unauthenticated users to login; preserve return URL.

Protected route idea

function Protected({ children }) {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  return children;
}

48. Navigation and Redirects in React

Prefer declarative Link for accessibility and prefetch patterns where available.

Navigation

<Link to="/dashboard">Dashboard</Link>
const navigate = useNavigate();
navigate('/login');

49. API Integration in React

Separeate API clients from UI; handle loading/error states consistently.

API layer tip

api/client.js
feature hooks (useUsers)
UI consumes status + data
Cancel/ignore stale responses

50. Fetch API in React

Check res.ok; parse JSON; handle aborts with AbortController.

Fetch in effect

useEffect(() => {
  const ctrl = new AbortController();
  fetch('/api/items', { signal: ctrl.signal })
    .then((r) => r.json())
    .then(setItems)
    .catch(setError);
  return () => ctrl.abort();
}, []);

51. Axios in React

Interceptors help attach auth headers and normalize errors.

Axios tip

const api = axios.create({ baseURL: '/api' });
api.interceptors.request.use((config) => {
  // attach token
  return config;
});

52. REST API Integration in React

Align client models with API DTOs; avoid leaking transport details into UI.

REST client tip

Resource endpoints
DTO mapping
Consistent error type
Optimistic updates optional

53. GET, POST, PUT and DELETE in React

Use idempotent methods correctly; send JSON bodies with proper headers.

POST example

await fetch('/api/items', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name }),
});

54. Loading and Error States in React

Always give users feedback and recovery actions.

Status pattern

const [status, setStatus] = useState('idle'); // idle|loading|success|error

55. Authentication in React

Prefer httpOnly cookies when possible; if using JWT in storage, know XSS risks.

Auth pieces

Login/register UI
Token/session storage strategy
Auth context
Protected routes + APIs

56. Login and Registration in React

Disable double-submit; show field and form-level errors clearly.

Auth form tip

Controlled inputs
Client validation
API submit
Set auth state on success
Redirect to app home

57. JWT Authentication in React

Refresh tokens carefully; clear auth state on 401.

Bearer tip

headers: { Authorization: `Bearer ${token}` }

58. Protected APIs in React

Centralize auth headers in an API client; redirect on unauthorized.

Protected API tip

Attach credentials
Handle 401/403
Retry/refresh strategy
Don’t flash protected data

59. Local Storage in React

Never store secrets if XSS is possible; sync state carefully.

localStorage

localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');

60. Session Storage in React

Useful for wizard progress within a tab session.

sessionStorage

sessionStorage.setItem('step', '2');

61. Cookies in React

document.cookie is limited — auth cookies should usually be HttpOnly.

Cookie tip

HttpOnly + Secure + SameSite for auth
JS-readable cookies for non-sensitive prefs only
Prefer backend session design

62. File Upload in React

Show progress when possible; validate type/size client-side and server-side.

FormData upload

const body = new FormData();
body.append('file', file);
await fetch('/api/upload', { method: 'POST', body });

63. Image Upload in React

Revoke object URLs on cleanup to avoid memory leaks.

Preview tip

const url = URL.createObjectURL(file);
<img src={url} alt="Preview" />
// later: URL.revokeObjectURL(url)

64. React and Firebase

Initialize once; keep config out of public secrets that grant admin power.

Firebase areas

Auth
Firestore
Storage
Security rules are mandatory

65. Firebase Authentication in React

Subscribe to onAuthStateChanged to drive UI session state.

Auth state tip

onAuthStateChanged
Set user in context
Sign out clears state
Protect routes

66. Firebase Firestore in React

Model collections carefully; enforce security rules.

Firestore tip

getDocs / onSnapshot
addDoc / setDoc / updateDoc
Query limits + indexes
Rules > client trust

67. Firebase Storage in React

Combine with image preview + progress listeners.

Storage tip

uploadBytes / uploadBytesResumable
getDownloadURL
Path per user uid
Storage rules

68. React and TypeScript

Vite React-TS template is a great starting point.

TS benefit

Typed props
Typed hooks
Safer refactors
Better editor help

69. TypeScript Props and State in React

Export prop types for reusable components.

Typed props

type ButtonProps = { label: string; onClick: () => void };
function Button({ label, onClick }: ButtonProps) {
  return <button onClick={onClick}>{label}</button>;
}

70. TypeScript with React Hooks

Avoid `any`; prefer unknown + narrowing for uncertain data.

Typed ref

const inputRef = useRef<HTMLInputElement>(null);

71. Reusable Components in React

Prefer children/composition over too many boolean props.

Reuse tip

Small API surface
Composition via children
Consistent styling props
Document examples

72. Component Composition in React

children and render slots enable flexible layouts.

Composition

<Card>
  <Card.Title>Hello</Card.Title>
  <Card.Body>Content</Card.Body>
</Card>

73. Higher-Order Components in React

Hooks replaced many HOC use cases — still seen in legacy code.

HOC tip

withAuth(Component)
Prefer hooks/custom hooks today
Know HOCs for maintenance

74. Render Props in React

Also largely superseded by hooks for new code.

Render prop idea

<Mouse>{({ x, y }) => <cursor x={x} y={y} />}</Mouse>

75. React Portals

Portals preserve React tree context while changing DOM placement.

Portal tip

createPortal(<Modal />, document.getElementById('modal-root'));

76. Error Boundaries in React

Error boundaries are class-based (or libraries); they don’t catch event/async errors by default.

Error boundary tip

Fallback UI
Log errors
Wrap route segments
Not a substitute for try/catch in events

77. React Suspense

Used with lazy components and some data frameworks.

Suspense

<Suspense fallback={<Spinner />}>
  <LazyPage />
</Suspense>

78. Lazy Loading in React

Combine with Suspense and route-based splitting.

React.lazy

const Dashboard = React.lazy(() => import('./Dashboard'));

79. Code Splitting in React

Vite/webpack dynamic import() enables splitting naturally.

Code split tip

Route-level imports
Heavy modals/charts lazy
Analyze bundle size

80. React Performance Optimization

Profile first with React DevTools; avoid premature memoization.

Perf checklist

Profile re-renders
Memo only when needed
Virtualize long lists
Code-split routes
Compress images

81. React.memo

Pair with useCallback/useMemo when passing new function/object identities.

React.memo

const Item = React.memo(function Item({ label }) {
  return <li>{label}</li>;
});

82. List Virtualization in React

Critical for tables/feeds with thousands of items.

Virtualization tip

Windowing libraries
Fixed/variable row heights
Keep row components light

83. SEO in React

Client-only SPAs are weaker for content SEO — consider Next.js for public content sites.

SEO tip

Document titles per route
Meta tags (react-helmet-async / framework)
SSR/SSG for crawlable content
Fast LCP

84. React Server-Side Rendering

Most teams use a framework (Next.js) rather than hand-rolled SSR.

SSR idea

Server renders HTML
Hydration on client
Data fetching per framework rules
Watch mismatch hydration errors

85. Next.js Introduction

Next.js is the common production framework choice around React.

Next.js highlights

App Router / file routing
Server Components
SSR/SSG/ISR
API routes / server actions
Image optimization

86. React Testing

Prefer testing behavior over implementation details.

Test pyramid

Unit: pure logic/hooks
Component: Testing Library
E2E: Playwright/Cypress

87. Jest for React

Vitest is common with Vite — concepts transfer from Jest.

Jest/Vitest tip

test('adds', () => {
  expect(1 + 2).toBe(3);
});

88. React Testing Library

Avoid testing internal state; assert what users see and do.

RTL idea

render(<Login />);
await userEvent.type(screen.getByLabelText(/email/i), 'a@b.com');
await userEvent.click(screen.getByRole('button', { name: /sign in/i }));

89. End-to-End Testing for React

Keep e2e suite lean: login → core flow → logout.

E2E tip

Stable selectors (roles/test ids)
Seed test data
Run against staging
Fewer, valuable flows

90. Accessibility in React

Use eslint-plugin-jsx-a11y and manual keyboard testing.

A11y checklist

Semantic elements
Label inputs
Keyboard operable
Focus management in modals
Sufficient contrast

91. Responsive React Applications

Use CSS media/container queries; avoid JS resize listeners when CSS suffices.

Responsive tip

Mobile-first CSS
Fluid layouts
Responsive images
Touch-friendly targets

92. React UI Libraries

Choose libraries that match accessibility and design-system needs.

UI library tip

Don't fight the library
Theme tokens
Tree-shake / import paths
Keep custom CSS consistent

93. Material UI with React

Use the theme for spacing/palette consistency.

MUI tip

<Button variant="contained" color="primary">Save</Button>

94. Tailwind CSS with React

Works great with component composition and design tokens via config.

Tailwind tip

<button className="rounded bg-teal-700 px-4 py-2 text-white">Save</button>

95. React Animations

Respect prefers-reduced-motion for accessibility.

Animation tip

CSS for simple hover/transitions
Framer Motion for complex UI motion
Reduced motion media query

96. Environment Variables in React

Remember client env vars are public — never put secrets in frontend env.

Vite env

# .env
VITE_API_URL=https://api.example.com

97. React Security Best Practices

React escapes text by default — dangerous HTML APIs need care.

Security checklist

Avoid unsanitized dangerouslySetInnerHTML
Don't store auth tokens carelessly
CSP where possible
Depend on server authZ
Keep deps updated

98. Debugging React Applications

Debug render causes with why-did-you-render carefully in development only.

Debug toolkit

React DevTools
Browser Sources breakpoints
Network panel for APIs
Console errors/warnings
Strict Mode double-effects awareness

99. Git and GitHub with React

Use branches/PRs; protect env files with secrets.

Git tip

.gitignore node_modules dist .env
PR reviews
CI build/test
Conventional commits optional

100. React Deployment

`npm run build` outputs production files; configure SPA fallback routes.

Deploy tip

npm run build
# deploy dist/ and set SPA rewrite to index.html

101. React Interview Questions

Be ready for hooks rules, keys, reconciliation, state vs props, and useEffect deps.

Sample Q&A

Q: State vs props?
A: State owned/updated locally; props passed from parent and read-only.

Q: Why keys?
A: Help React identify list items across updates.

Q: useEffect cleanup?
A: Unsubscribe/timers to avoid leaks.

102. Real-World React Projects

Each project should include routing, API/state, and polished UI states.

Project ideas

Todo + localStorage
Notes app with auth
Product catalog + cart
Admin dashboard
Chat UI (websocket optional)

103. Final Project – Complete React Web Application

Ship a production-shaped app (e.g., task manager or recipe bookmarking): Vite + React, routed pages, auth flow, API integration, protected routes, loading/error/empty states, responsive UI, basic tests, and deployment notes.

  1. Define the app and routes.
  2. Implement auth + CRUD feature.
  3. Polish states and responsiveness.
  4. Test, document, and deploy.

Final project scope

1. Vite React (JS or TS)
2. React Router layout + pages
3. Auth (login/register) + protected routes
4. CRUD feature with API or mock server
5. Global state or server-state strategy
6. Form validation
7. Loading/error/empty UI
8. Responsive design
9. Basic component tests
10. README + deploy instructions

Suggested structure

src/pages
src/components
src/features/auth
src/features/items
src/api
src/hooks
src/context or store

Conclusion

You now have a full React path: components and hooks, routing and data fetching, state strategies, and production concerns like performance, a11y, and deployment. Finish the final React web application to turn the lessons into a portfolio-ready SPA.

Keep reading

Related guides

More setup guides and walkthroughs worth reading next.