React from 0 to Infinity

src/App.jsx

function App() {
  return <h1>Hello World</h1>
}

export default App

src/main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
)

src/index.css

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem;
  font-family: Arial, sans-serif;
  color: #142033;
  background: #eef8ff;
}

button, input { font: inherit; }

src/Greeting.jsx

function Greeting({ name, subject }) {
  return (
    <article className="card">
      <h2>Hello, {name}!</h2>
      <p>Welcome to {subject}.</p>
    </article>
  )
}

export default Greeting

src/App.jsx

import Greeting from './Greeting.jsx'

function App() {
  return (
    <main>
      <h1>React Students</h1>
      <Greeting name="Ananya" subject="React" />
      <Greeting name="Ravi" subject="Components" />
    </main>
  )
}

export default App

Add to src/index.css

.card {
  max-width: 520px;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #b9d9ef;
  border-radius: 12px;
  background: white;
}

src/App.jsx

import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)

  return (
    <main>
      <h1>Practice Counter</h1>
      <p>Completed questions: <strong>{count}</strong></p>
      <p>{count >= 5 ? 'Excellent progress!' : 'Complete five questions.'}</p>
      <button onClick={() => setCount(value => value + 1)}>+1</button>
      <button onClick={() => setCount(value => Math.max(0, value - 1))}>-1</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </main>
  )
}

export default App

src/App.jsx

import { useState } from 'react'

function App() {
  const [name, setName] = useState('')
  const [students, setStudents] = useState([])

  function addStudent(event) {
    event.preventDefault()
    const cleanName = name.trim()
    if (!cleanName) return
    setStudents(current => [
      ...current,
      { id: crypto.randomUUID(), name: cleanName }
    ])
    setName('')
  }

  function removeStudent(id) {
    setStudents(current => current.filter(student => student.id !== id))
  }

  return (
    <main>
      <h1>Student List</h1>
      <form onSubmit={addStudent}>
        <label htmlFor="name">Student name</label>
        <input id="name" value={name}
          onChange={event => setName(event.target.value)} />
        <button type="submit">Add</button>
      </form>
      {students.length === 0 ? <p>No students yet.</p> : (
        <ul>{students.map(student => (
          <li key={student.id}>
            {student.name}{' '}
            <button onClick={() => removeStudent(student.id)}>Delete</button>
          </li>
        ))}</ul>
      )}
    </main>
  )
}

export default App

src/App.jsx

import { useEffect, useState } from 'react'

function App() {
  const [users, setUsers] = useState([])
  const [status, setStatus] = useState('loading')
  const [error, setError] = useState('')

  useEffect(() => {
    const controller = new AbortController()

    async function loadUsers() {
      try {
        setStatus('loading')
        const response = await fetch(
          'https://jsonplaceholder.typicode.com/users',
          { signal: controller.signal }
        )
        if (!response.ok) throw new Error(`HTTP ${response.status}`)
        setUsers(await response.json())
        setStatus('success')
      } catch (problem) {
        if (problem.name !== 'AbortError') {
          setError(problem.message)
          setStatus('error')
        }
      }
    }

    loadUsers()
    return () => controller.abort()
  }, [])

  return (
    <main>
      <h1>Users from Fetch</h1>
      {status === 'loading' && <p>Loading…</p>}
      {status === 'error' && <p role="alert">Error: {error}</p>}
      {status === 'success' && (
        <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>
      )}
    </main>
  )
}

export default App

npm install axios

src/services/api.js

import axios from 'axios'

export const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 8000
})

src/App.jsx

import { useEffect, useState } from 'react'
import { api } from './services/api.js'

function App() {
  const [posts, setPosts] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  useEffect(() => {
    const controller = new AbortController()
    api.get('/posts?_limit=8', { signal: controller.signal })
      .then(response => setPosts(response.data))
      .catch(problem => {
        if (problem.code !== 'ERR_CANCELED') setError(problem.message)
      })
      .finally(() => setLoading(false))
    return () => controller.abort()
  }, [])

  return (
    <main>
      <h1>Posts with Axios</h1>
      {loading && <p>Loading…</p>}
      {error && <p role="alert">{error}</p>}
      <ul>{posts.map(post => <li key={post.id}>{post.title}</li>)}</ul>
    </main>
  )
}

export default App

npm install react-router-dom

src/main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter><App /></BrowserRouter>
  </StrictMode>
)

src/App.jsx

import { NavLink, Route, Routes, useParams } from 'react-router-dom'

function Home() { return <h2>Home</h2> }
function Courses() { return <h2>Courses</h2> }
function Course() {
  const { courseId } = useParams()
  return <h2>Course: {courseId}</h2>
}
function NotFound() { return <h2>Page not found</h2> }

function App() {
  return (
    <main>
      <h1>Learning Portal</h1>
      <nav>
        <NavLink to="/">Home</NavLink> {' | '}
        <NavLink to="/courses">Courses</NavLink> {' | '}
        <NavLink to="/courses/react">React</NavLink>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/courses" element={<Courses />} />
        <Route path="/courses/:courseId" element={<Course />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </main>
  )
}

export default App

src/App.jsx

import { createContext, useContext, useReducer } from 'react'

const TasksContext = createContext(null)
const DispatchContext = createContext(null)

function reducer(tasks, action) {
  if (action.type === 'add') {
    return [...tasks, { id: crypto.randomUUID(), text: action.text, done: false }]
  }
  if (action.type === 'toggle') {
    return tasks.map(task => task.id === action.id
      ? { ...task, done: !task.done } : task)
  }
  if (action.type === 'delete') return tasks.filter(task => task.id !== action.id)
  throw new Error(`Unknown action: ${action.type}`)
}

function TaskList() {
  const tasks = useContext(TasksContext)
  const dispatch = useContext(DispatchContext)
  return <ul>{tasks.map(task => <li key={task.id}>
    <label><input type="checkbox" checked={task.done}
      onChange={() => dispatch({ type: 'toggle', id: task.id })} />
      {task.text}</label>
    <button onClick={() => dispatch({ type: 'delete', id: task.id })}>Delete</button>
  </li>)}</ul>
}

function App() {
  const [tasks, dispatch] = useReducer(reducer, [])
  function submit(event) {
    event.preventDefault()
    const text = new FormData(event.currentTarget).get('task').trim()
    if (text) dispatch({ type: 'add', text })
    event.currentTarget.reset()
  }
  return <TasksContext.Provider value={tasks}>
    <DispatchContext.Provider value={dispatch}>
      <main><h1>Tasks</h1>
        <form onSubmit={submit}><input name="task" required /><button>Add</button></form>
        <TaskList />
      </main>
    </DispatchContext.Provider>
  </TasksContext.Provider>
}

export default App

npm install @reduxjs/toolkit react-redux

src/app/store.js

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice.js'

export const store = configureStore({
  reducer: { counter: counterReducer }
})

src/features/counter/counterSlice.js

import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1 },
    decrement: state => { state.value -= 1 },
    reset: state => { state.value = 0 }
  }
})

export const { increment, decrement, reset } = counterSlice.actions
export default counterSlice.reducer

src/main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { Provider } from 'react-redux'
import { store } from './app/store.js'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode><Provider store={store}><App /></Provider></StrictMode>
)

src/App.jsx

import { useDispatch, useSelector } from 'react-redux'
import { decrement, increment, reset } from './features/counter/counterSlice.js'

function App() {
  const count = useSelector(state => state.counter.value)
  const dispatch = useDispatch()
  return <main>
    <h1>Redux Counter: {count}</h1>
    <button onClick={() => dispatch(increment())}>+1</button>
    <button onClick={() => dispatch(decrement())}>-1</button>
    <button onClick={() => dispatch(reset())}>Reset</button>
  </main>
}

export default App

npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: { environment: 'jsdom', setupFiles: './src/test/setup.js' }
})

src/test/setup.js

import '@testing-library/jest-dom/vitest'

src/App.test.jsx

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Provider } from 'react-redux'
import { store } from './app/store.js'
import App from './App.jsx'

test('increments the Redux counter', async () => {
  const user = userEvent.setup()
  render(<Provider store={store}><App /></Provider>)
  await user.click(screen.getByRole('button', { name: '+1' }))
  expect(screen.getByRole('heading')).toHaveTextContent('Redux Counter: 1')
})

package.json script to add

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint .",
  "preview": "vite preview",
  "test": "vitest"
}

This snapshot assumes the repository is named react-zero-infinity. Replace the name if yours is different.

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  base: '/react-zero-infinity/',
  plugins: [react()],
  test: { environment: 'jsdom', setupFiles: './src/test/setup.js' }
})

.github/workflows/deploy.yml

name: Deploy React to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run build
      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy
        id: deployment
        uses: actions/deploy-pages@v4

Commands

npm run test -- --run
npm run build
git init
git add .
git commit -m "Complete React course project"
git branch -M main
git remote add origin https://github.com/USERNAME/react-zero-infinity.git
git push -u origin main

Example A: counter

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

Example B: immutable object update

const [student, setStudent] = useState({ name: 'Saurabh', score: 80 })
setStudent(s => ({ ...s, score: s.score + 5 }))

Example A: document title

useEffect(() => {
  document.title = `Count: ${count}`
}, [count])

Example B: timer with cleanup

useEffect(() => {
  const id = setInterval(() => setSeconds(s => s + 1), 1000)
  return () => clearInterval(id)
}, [])

An empty dependency array means “connect after mounting, disconnect on unmount.” Include every reactive value used by the effect. Do not use an effect to calculate data that can be calculated during render.

Example A: theme

const ThemeContext = createContext('light')

function App() {
  return <ThemeContext value="dark"><Toolbar /></ThemeContext>
}
function Toolbar() {
  const theme = useContext(ThemeContext)
  return <button className={theme}>Save</button>
}

Example B: signed-in user

const UserContext = createContext(null)
function Profile() {
  const user = useContext(UserContext)
  return <p>{user ? user.name : 'Guest'}</p>
}

Example A: counter actions

function reducer(state, action) {
  if (action.type === 'increment') return { count: state.count + 1 }
  if (action.type === 'reset') return { count: 0 }
  throw Error('Unknown action')
}
const [state, dispatch] = useReducer(reducer, { count: 0 })
<button onClick={() => dispatch({ type: 'increment' })}>{state.count}</button>

Example B: task list

function tasksReducer(tasks, action) {
  switch (action.type) {
    case 'added': return [...tasks, { id: crypto.randomUUID(), text: action.text }]
    case 'deleted': return tasks.filter(t => t.id !== action.id)
    default: throw Error('Unknown action')
  }
}

Example A: focus an input

const inputRef = useRef(null)
<input ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>Focus</button>

Example B: retain a timer ID

const timerRef = useRef(null)
function start() { timerRef.current = setInterval(tick, 1000) }
function stop() { clearInterval(timerRef.current) }

Example A: filtered list

const visible = useMemo(
  () => products.filter(p => p.name.includes(query)),
  [products, query]
)

Example B: expensive statistics

const report = useMemo(() => calculateReport(scores), [scores])

It is a performance tool, not a correctness tool.

Example A: memoized child callback

const addTask = useCallback(text => {
  setTasks(ts => [...ts, { id: crypto.randomUUID(), text }])
}, [])

Example B: stable fetch function

const loadUser = useCallback(async () => {
  const response = await fetch(`/api/users/${userId}`)
  setUser(await response.json())
}, [userId])

Example A: tooltip position

useLayoutEffect(() => {
  setHeight(ref.current.getBoundingClientRect().height)
}, [])

Example B: restore scroll immediately

useLayoutEffect(() => {
  listRef.current.scrollTop = savedScroll
}, [savedScroll])

Prefer useEffect; layout effects block painting.

Example A: log a visit with the latest cart size

const onVisit = useEffectEvent(visitedUrl => {
  logVisit(visitedUrl, cart.length)
})

useEffect(() => {
  onVisit(url)
}, [url])

Example B: connection notification uses the latest theme

const onConnected = useEffectEvent(() => {
  showNotification('Connected', theme)
})

useEffect(() => {
  const connection = createConnection(roomId)
  connection.on('connected', onConnected)
  connection.connect()
  return () => connection.disconnect()
}, [roomId])

Effect Events are called only from effects. They let the effect react to one value while still reading the latest version of another value.

Example A: focus

const FancyInput = forwardRef(function FancyInput(props, ref) {
  const input = useRef(null)
  useImperativeHandle(ref, () => ({ focus: () => input.current.focus() }))
  return <input ref={input} />
})

Example B: dialog controls

useImperativeHandle(ref, () => ({
  open: () => dialog.current.showModal(),
  close: () => dialog.current.close()
}), [])

Example A: online status

function useOnlineStatus() {
  const online = useSyncExternalStore(subscribe, getSnapshot)
  useDebugValue(online ? 'Online' : 'Offline')
  return online
}

Example B: delayed formatting

useDebugValue(date, value => value.toLocaleDateString())

Example A: label and input

const id = useId()
<label htmlFor={id}>Email</label>
<input id={id} />

Example B: related hint

const id = useId()
<input aria-describedby={`${id}-hint`} />
<small id={`${id}-hint`}>At least 8 characters</small>

Do not use useId for list keys.

Example A: slow tab switch

const [isPending, startTransition] = useTransition()
startTransition(() => setTab(nextTab))

Example B: large search result update

setInput(value)
startTransition(() => setQuery(value))
return isPending && <p>Updating…</p>

Example A: search results

const deferredQuery = useDeferredValue(query)
<Results query={deferredQuery} />

Example B: chart

const deferredData = useDeferredValue(data)
const stale = deferredData !== data
<Chart data={deferredData} style={{ opacity: stale ? .5 : 1 }} />

Example A: browser online status

const online = useSyncExternalStore(
  callback => {
    addEventListener('online', callback)
    addEventListener('offline', callback)
    return () => {
      removeEventListener('online', callback)
      removeEventListener('offline', callback)
    }
  },
  () => navigator.onLine,
  () => true
)

Example B: tiny external store

const todos = useSyncExternalStore(
  todoStore.subscribe,
  todoStore.getSnapshot,
  todoStore.getServerSnapshot
)

Example A: insert a style rule

useInsertionEffect(() => {
  const style = document.createElement('style')
  style.textContent = rule
  document.head.append(style)
  return () => style.remove()
}, [rule])

Example B: register atomic CSS

useInsertionEffect(() => styleRegistry.add(className, css), [className, css])

Application code almost never needs this hook; it exists mainly for styling libraries.

Example A: validation

async function save(previous, formData) {
  const name = formData.get('name')
  if (!name) return { error: 'Name is required' }
  return { message: `Saved ${name}` }
}
const [state, formAction, pending] = useActionState(save, {})

<form action={formAction}>
  <input name="name" />
  <button disabled={pending}>Save</button>
  <p>{state.error || state.message}</p>
</form>

Example B: quantity action

async function updateQuantity(previous, formData) {
  const quantity = Number(formData.get('quantity'))
  return await api.updateCart({ quantity })
}
const [cart, updateCart, isPending] = useActionState(updateQuantity, initialCart)

Example A: optimistic message

const [optimisticMessages, addOptimistic] = useOptimistic(
  messages,
  (current, text) => [...current, { id: 'pending', text, sending: true }]
)
async function send(formData) {
  const text = formData.get('message')
  addOptimistic(text)
  await saveMessage(text)
}

Example B: instant like count

const [optimisticLikes, addLike] = useOptimistic(likes, n => n + 1)
async function like() {
  addLike()
  await api.like(postId)
}

Example A: promise data under Suspense

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise)
  return comments.map(c => <p key={c.id}>{c.body}</p>)
}

<Suspense fallback={<p>Loading…</p>}>
  <Comments commentsPromise={promise} />
</Suspense>

Example B: conditional context read

function Heading({ showTheme }) {
  if (!showTheme) return <h2>Plain</h2>
  const theme = use(ThemeContext)
  return <h2 className={theme}>Themed</h2>
}

use is a React API with hook-like behavior and special rules. Promise integration is especially relevant with frameworks and Suspense-enabled data sources.

Example A: pending submit button

import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()
  return <button disabled={pending}>{pending ? 'Saving…' : 'Save'}</button>
}

<form action={saveStudent}>
  <input name="name" />
  <SubmitButton />
</form>

Example B: show the value currently being submitted

function SubmissionStatus() {
  const { pending, data } = useFormStatus()
  if (!pending) return null
  return <p>Submitting {data?.get('email')}…</p>
}

The component calling useFormStatus must be inside the form it observes; it cannot observe a form returned by that same component.