Learn React in 30 Days: From Zero to Production

React is the world's most popular JavaScript library for building user interfaces, maintained by Meta (formerly Facebook). With over 23 million weekly downloads on npm and powering applications from Netflix to Airbnb, React has become an essential skill for modern web developers. This 30-day immersive course transforms beginners into confident React developers through a structured, project-driven curriculum.

React uses a declarative paradigm, making it fundamentally different from traditional DOM manipulation with vanilla JavaScript or jQuery. Instead of imperatively writing step-by-step instructions to update the page, you declare the desired UI state, and React efficiently computes the minimal set of DOM changes needed.

The React ecosystem has evolved dramatically since its introduction in 2013. Modern React revolves around functional components with Hooks (introduced in React 16.8), JSX, and a rich ecosystem of tools including Vite, Next.js, Redux Toolkit, and React Query. In 2024 and beyond, the recommended way to build React applications uses Vite as the build tool (replacing the now-deprecated Create React App), with React 19 bringing server components, actions, and improved performance.

Footnotes

1. How To Learn React In 2024 - React Roadmap - PedroTech's comprehensive React roadmap for 2024 covering fundamentals to ecosystem tools. ↩

2. A Definitive Guide to React Architecture Patterns - eTatvaSoft's guide on React architecture patterns and best practices since React's 2013 introduction. ↩

3. The Most Popular Build Tools for React Developers in 2024 - Telerik article covering Vite, Turbopack, Rollup, and other modern React build tools. ↩

The 30-Day Roadmap at a Glance

This course is organized into four progressive phases, each building on the last. The repository 30 Days of React by Asabeneh provides an excellent companion structure covering 30 distinct topics from setup through advanced patterns to final projects.

Each day requires approximately 1.5–3 hours of focused study combining theory, coding exercises, and mini-projects. By Day 30, you will have built multiple real applications and possess the skills to confidently develop production-grade React apps.

Footnotes

1. 30-Days-Of-React by Asabeneh - A step-by-step 30-day React challenge covering setup through advanced hooks and projects. ↩

Phase 1: Foundations (Days 1–7)

Day 1: JavaScript Refresher & Environment Setup

Before touching React, ensure your JavaScript fundamentals are solid. React heavily relies on ES6+ features, and gaps in JavaScript knowledge will become painful obstacles. The key prerequisites include:

• Arrow functions: const greet = (name) => \Hello, ${name}!``
• Destructuring: const { name, age } = person; and const [first, second] = array;
• Spread/Rest operators: const newObj = { ...oldObj, updated: true };
• Template literals: `Result: ${value}`
• Array methods: .map(), .filter(), .reduce(), .find(), .some()
• Promises & async/await: Handling asynchronous operations
• ES Modules: import and export syntax

For your development environment, install Node.js (v18+ LTS), VS Code with the ES7+ React/Redux/React Native snippets extension, and create your first React project using Vite:

1npm create vite@latest my-react-app -- --template react
2cd my-react-app
3npm install
4npm run dev

Vite has become the standard build tool for new React projects in 2024, replacing the deprecated Create React App. It offers significantly faster hot module replacement (HMR) and optimized builds using Rollup.

Days 2–3: JSX & the Virtual DOM

JSX is not a template language — it is syntactic sugar for React.createElement() calls. Understanding this distinction is crucial:

1// JSX syntax
2const element = <h1 className="title">Hello, React!</h1>;
3
4// Compiles to:
5const element = React.createElement('h1', { className: 'title' }, 'Hello, React!');

Key JSX rules:

• You must return a single parent element (or use a Fragment <>...</>)
• All tags must be properly closed (<img />, <br />)
• Use className instead of class, htmlFor instead of for
• JavaScript expressions go inside { } braces
• Conditional rendering uses ternary operators or && inside JSX

The Virtual DOM is React's secret to performance. When state changes, React creates a new Virtual DOM tree, diffs it against the previous one, and computes the minimal set of real DOM changes needed — a process called reconciliation.

Footnotes

1. 30-Days-Of-React by Asabeneh - A step-by-step 30-day React challenge covering setup through advanced hooks and projects. ↩

2. 5 React Architecture Best Practices for 2024 - SitePoint's guide on scalable project structures and component organization. ↩

Phase 2: Core React (Days 8–14)

Days 8–9: Mastering State with useState

State is the heart of React's reactivity system. The useState hook provides a way to declare reactive variables in functional components:

1const [state, setState] = useState(initialValue);

Critical concepts to master:

1. State updates are asynchronous — React batches updates for performance. You cannot read the updated value immediately after calling setState.

2. Use the functional updater form when the new state depends on the previous state:

1// ❌ Can cause stale state bugs in rapid updates
2setCount(count + 1);
3
4// ✅ Always uses the latest state value
5setCount(prevCount => prevCount + 1);

3. State is isolated per component instance — each component has its own independent state.

4. Lifting state up — when two sibling components need to share data, move the state to their nearest common parent and pass it down via props.

$$\text{Component Re-render Trigger} = f(\text{state change}, \text{props change}, \text{parent re-render})$$

Days 10–11: Event Handling & Forms

React uses synthetic events to ensure consistent event handling across all browsers. Key patterns:

1// Event handler inline
2<button onClick={() => handleClick(id)}>Delete</button>
3
4// Event handler reference
5<button onClick={handleClick}>Click Me</button>
6
7// Accessing event object
8<input onChange={(e) => setValue(e.target.value)} />

Controlled components are the React way to handle forms. The component's state becomes the "single source of truth":

1function Form() {
2  const [email, setEmail] = useState('');
3  const [password, setPassword] = useState('');
4
5  const handleSubmit = (e) => {
6    e.preventDefault();
7    console.log({ email, password });
8  };
9
10  return (
11    <form onSubmit={handleSubmit}>
12      <input value={email} onChange={(e) => setEmail(e.target.value)} />
13      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
14      <button type="submit">Submit</button>
15    </form>
16  );
17}

Days 12–13: Conditional Rendering & Styling

React offers multiple patterns for rendering different UI based on conditions:

For styling, modern React supports CSS Modules (scoped class names), inline styles (for dynamic styles), and CSS-in-JS libraries like styled-components or emotion. CSS Modules are often the simplest and most performant choice for new projects.

Day 14: Week 2 Project — Task Manager

Build a Task Manager application that integrates everything from Phase 2:

• Add, delete, and toggle tasks
• Filter by status (all/active/completed)
• Controlled form inputs with validation
• Conditional rendering for empty states and filters
• CSS Modules for scoped styling

Footnotes

1. State Management in React – Hooks, Context API and Redux - GeeksforGeeks comprehensive guide on useState, useReducer, and Context API. ↩

Phase 3: Hooks & Patterns (Days 15–22)

Days 15–17: Side Effects & useEffect

useEffect is the second most important hook after useState. It handles all "side effects" — operations that reach outside the React render cycle:

1useEffect(() => {
2  // Effect: runs after render
3  const subscription = subscribe();
4
5  // Cleanup: runs before next effect & on unmount
6  return () => subscription.unsubscribe();
7}, [dependency]); // Only re-run when dependency changes

The dependency array is the most critical (and error-prone) aspect of useEffect:

Common pitfalls and how to avoid them:

1. Infinite loop: Calling setState inside an effect with no dependency array
2. Stale closure: Referencing a state variable in an effect without including it in the dependency array
3. Missing cleanup: Forgetting to return a cleanup function for subscriptions, timers, and event listeners
4. Over-fetching: Fetching data on every render instead of only on mount

Days 18–19: useReducer & useRef

useReducer is preferred when state transitions are complex or when the next state depends heavily on the previous one:

1const initialState = { count: 0, step: 1 };
2
3function reducer(state, action) {
4  switch (action.type) {
5    case 'increment': return { ...state, count: state.count + state.step };
6    case 'decrement': return { ...state, count: state.count - state.step };
7    case 'setStep':   return { ...state, step: action.payload };
8    case 'reset':     return initialState;
9    default:          throw new Error(`Unknown action: ${action.type}`);
10  }
11}
12
13function Counter() {
14  const [state, dispatch] = useReducer(reducer, initialState);
15  return (
16    <div>
17      <p>Count: {state.count}</p>
18      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
19      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
20    </div>
21  );
22}

useRef serves two primary purposes:

• Accessing DOM elements: const inputRef = useRef(null); <input ref={inputRef} />
• Storing mutable values that persist across renders but should NOT trigger re-renders (e.g., previous values, timer IDs, measurement values)

Days 20–21: Custom Hooks

Custom hooks are the primary mechanism for code reuse in React. The convention is to name them starting with use:

1// Custom hook: fetches data from an API
2function useFetch(url) {
3  const [data, setData] = useState(null);
4  const [loading, setLoading] = useState(true);
5  const [error, setError] = useState(null);
6
7  useEffect(() => {
8    const controller = new AbortController();
9    setLoading(true);
10    fetch(url, { signal: controller.signal })
11      .then(res => {
12        if (!res.ok) throw new Error(`HTTP ${res.status}`);
13        return res.json();
14      })
15      .then(setData)
16      .catch(err => {
17        if (err.name !== 'AbortError') setError(err.message);
18      })
19      .finally(() => setLoading(false));
20
21    return () => controller.abort();
22  }, [url]);
23
24  return { data, loading, error };
25}
26
27// Usage
28function UserProfile({ userId }) {
29  const { data, loading, error } = useFetch(`/api/users/${userId}`);
30  if (loading) return <Spinner />;
31  if (error) return <Error message={error} />;
32  return <UserCard user={data} />;
33}

Day 22: Context API

The Context API solves "prop drilling" — the problem of passing props through many intermediate components that don't use them:

1// 1. Create context
2const ThemeContext = createContext('light');
3
4// 2. Provide value at tree root
5function App() {
6  return (
7    <ThemeContext.Provider value="dark">
8      <Dashboard />
9    </ThemeContext.Provider>
10  );
11}
12
13// 3. Consume in any descendant
14function ThemedButton() {
15  const theme = useContext(ThemeContext);
16  return <button className={`btn-${theme}`}>Click Me</button>;
17}

When to use Context vs Redux: Use Context for "low-frequency" updates (theme, auth, locale). For high-frequency updates or complex state interactions, use Redux Toolkit or Zustand, as Context triggers re-renders on all consumers when the value changes.

Footnotes

1. State Management in React – Hooks, Context API and Redux - GeeksforGeeks comprehensive guide on useState, useReducer, and Context API. ↩

2. Why You Should Use Redux in 2024 - Mark Erikson's talk on Redux evolution, RTK, and when Redux vs alternatives are appropriate. ↩

Phase 4: Ecosystem & Projects (Days 23–30)

Days 23–24: React Router

React Router v6+ provides a declarative, component-based routing system:

1import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';
2
3function App() {
4  return (
5    <BrowserRouter>
6      <nav>
7        <Link to="/">Home</Link>
8        <Link to="/about">About</Link>
9        <Link to="/users/42">Profile</Link>
10      </nav>
11      <Routes>
12        <Route path="/" element={<Home />} />
13        <Route path="/about" element={<About />} />
14        <Route path="/users/:id" element={<UserProfile />} />
15        <Route path="*" element={<NotFound />} />
16      </Routes>
17    </BrowserRouter>
18  );
19}
20
21function UserProfile() {
22  const { id } = useParams();
23  return <h1>User {id}</h1>;
24}

Key React Router v6 concepts:

• <Routes> and <Route> for declarative route definition
• useParams() for accessing URL parameters
• useNavigate() for programmatic navigation
• Nested routes with <Outlet /> for layout patterns
• <NavLink> for active link styling

Days 25–26: Data Fetching & React Query

While you can fetch data with useEffect, the modern approach uses TanStack Query (React Query), which provides automatic caching, background refetching, pagination, and optimistic updates:

1import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
2
3const queryClient = new QueryClient();
4
5function UsersList() {
6  const { data, isLoading, error, isError } = useQuery({
7    queryKey: ['users'],
8    queryFn: () => fetch('/api/users').then(res => res.json()),
9    staleTime: 5 * 60 * 1000, // 5 minutes
10  });
11
12  if (isLoading) return <Spinner />;
13  if (isError) return <Error message={error.message} />;
14  return <UserList users={data} />;
15}

Why React Query over useEffect + useState?

• Automatic caching and deduplication of requests
• Background refetching to keep data fresh
• Built-in loading, error, and stale states
• Pagination and infinite scroll support
• Optimistic updates for instant UI feedback
• Offline support and retry logic

Days 27–28: Redux Toolkit

Redux Toolkit (RTK) has resolved the historical boilerplate problems of Redux with createSlice, createAsyncThunk, and createApi:

1import { createSlice, configureStore, createAsyncThunk } from '@reduxjs/toolkit';
2
3// Async thunk
4const fetchUsers = createAsyncThunk('users/fetch', async () => {
5  const res = await fetch('/api/users');
6  return res.json();
7});
8
9// Slice with reducers
10const usersSlice = createSlice({
11  name: 'users',
12  initialState: { list: [], status: 'idle', error: null },
13  reducers: {
14    addUser(state, action) { state.list.push(action.payload); },
15  },
16  extraReducers: (builder) => {
17    builder
18      .addCase(fetchUsers.pending, (state) => { state.status = 'loading'; })
19      .addCase(fetchUsers.fulfilled, (state, action) => {
20        state.status = 'succeeded';
21        state.list = action.payload;
22      })
23      .addCase(fetchUsers.rejected, (state, action) => {
24        state.status = 'failed';
25        state.error = action.error.message;
26      });
27  },
28});
29
30// Store
31const store = configureStore({ reducer: { users: usersSlice.reducer } });

Day 29: Testing & Performance Optimization

Testing Stack: Use Vitest (test runner) + React Testing Library + jsdom for unit and integration tests:

1// Counter.test.jsx
2import { render, screen, fireEvent } from '@testing-library/react';
3import { describe, it, expect } from 'vitest';
4import Counter from './Counter';
5
6describe('Counter', () => {
7  it('increments count on button click', () => {
8    render(<Counter />);
9    const button = screen.getByRole('button', { name: /\+1/i });
10    fireEvent.click(button);
11    expect(screen.getByText('Count: 1')).toBeInTheDocument();
12  });
13});

Performance optimization techniques:

Day 30: Capstone Project

Build a full-featured Project Management Dashboard incorporating:

• React Router for multi-page navigation
• Redux Toolkit for global state
• React Query for API data fetching
• Custom hooks for reusable logic
• Form handling with validation
• Responsive CSS Modules styling
• Unit testing with Vitest
• Deploy to Vercel or Netlify

Footnotes

1. Why You Should Use Redux in 2024 - Mark Erikson's talk on Redux evolution, RTK, and when Redux vs alternatives are appropriate. ↩ ↩²