Getting Started with React in 2024

A practical guide for beginners picking up React in 2024. Covers the modern ecosystem, best practices, and the tools you actually need.

import { Alert } from '../components/Alert' import { Card } from '../components/Card' import { CodePlayground } from '../components/CodePlayground' import { StatsTable } from '../components/StatsTable' import { AuthorBio } from '../components/AuthorBio' import { Newsletter } from '../components/Newsletter' import { ImageWithCaption } from '../components/ImageWithCaption' import { ProgressTracker } from '../components/ProgressTracker' import { TabGroup, Tab } from '../components/Tabs'

React looks different than it did a few years ago. New patterns, better tooling, and features like Server Components have changed how we build things. Whether you're brand new or switching from another framework, this guide gets you up to speed.

Before diving in, make sure you have a basic understanding of HTML, CSS, and JavaScript (ES6+). Familiarity with the command line is also helpful. You'll need Node.js 18+ installed on your machine.

Why React in 2024?

There are solid options out there — Vue, Svelte, Angular. So why React?

The short answer: ecosystem maturity, a massive community, and Meta backing it. The introduction of React Server Components and improvements to Suspense have fixed a lot of the old pain points.

Setting Up Your Development Environment

The right starter depends on what you're building:

```bash # Create a new React project with Vite npm create vite@latest my-react-app -- --template react

# Navigate into the project cd my-react-app

# Install dependencies npm install

# Start the development server npm run dev `` Vite offers blazing-fast hot module replacement (HMR) and optimized builds. It's become the de facto standard for new React projects in 2024. ``bash # Create a new Next.js project npx create-next-app@latest my-next-app

# Navigate and start cd my-next-app npm run dev `` Choose Next.js if you need server-side rendering, API routes, or a full-stack framework with React. ``bash # Create a new Remix project npx create-remix@latest my-remix-app

# Navigate and start cd my-remix-app npm run dev ``` Remix focuses on web standards and progressive enhancement, making it excellent for data-heavy applications.

As of 2024, create-react-app (CRA) is no longer recommended. The React team suggests using a framework like Next.js or a build tool like Vite instead. If you encounter tutorials using CRA, the concepts still apply but the setup process differs.

Core Concepts: Components and JSX

React is all about components — reusable chunks of UI that manage their own state and rendering. Here's your first one:

Example

import { useState } from 'react'; function Greeting({ name = "World" }) { const [count, setCount] = useState(0); return ( <div className="greeting-card"> <h2>Hello, {name}! 👋</h2> <p>You've clicked the button {count} times.</p> <button onClick={() => setCount(count + 1)}> Click me! </button> </div> ); } export default Greeting;

<CodePlayground code={` function Greeting({ name = "World" }) { const [count, setCount] = React.useState(0);

return ( <div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}> <h2>Hello, {name}! 👋</h2> <p>You've clicked the button {count} times.</p> <button onClick={() => setCount(count + 1)} style={{ padding: '8px 16px', cursor: 'pointer' }} > Click me! </button> </div> ); } `} title="Try it yourself — Interactive Playground" description="Edit the code below and see the result in real-time" />

Key Takeaways from This Example

Components are functions that return JSX. They can accept props (inputs) and manage internal state. This simple mental model scales to complex applications.

JSX is a syntax extension that looks like HTML but lives in JavaScript
Props (name) let you pass data to components from their parents
State (count) lets components remember values between renders
Event handlers (onClick) respond to user interactions

Understanding Hooks

Hooks let you "hook into" React features from function components. Here are the ones you'll use daily:

useState — Managing State

Example

const [value, setValue] = useState(initialValue);

useEffect — Side Effects

Example

useEffect(() => { // Runs after render const subscription = api.subscribe(id); return () => { // Cleanup function subscription.unsubscribe(); }; }, [id]); // Only re-run when `id` changes

jsx example

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Styled Button</button>;
}

React 19 introduces the use hook, which simplifies working with Promises and Context. It can be called conditionally (unlike other hooks) and works naturally with Suspense boundaries. Keep an eye on this powerful addition!

Building Your First Real Application

Let's build something real — a Task Manager that puts everything together:

Features we'll implement:

Add, edit, and delete tasks
Mark tasks as complete
Filter by status (all, active, completed)
Persist data in localStorage
Responsive design with CSS Modules

Concepts covered:

Component composition
State management with useReducer
Custom hooks for localStorage
Conditional rendering
List rendering with keys

Example

import { useReducer } from 'react'; import { TaskInput } from './components/TaskInput'; import { TaskList } from './components/TaskList'; import { FilterBar } from './components/FilterBar'; import { useLocalStorage } from './hooks/useLocalStorage'; import styles from './App.module.css'; const taskReducer = (state, action) => { switch (action.type) { case 'ADD_TASK': return [...state, { id: crypto.randomUUID(), text: action.payload, completed: false, createdAt: new Date().toISOString() }]; case 'TOGGLE_TASK': return state.map(task => task.id === action.payload ? { ...task, completed: !task.completed } : task ); case 'DELETE_TASK': return state.filter(task => task.id !== action.payload); default: return state; } }; export default function App() { const [tasks, dispatch] = useReducer(taskReducer, [], () => { const saved = localStorage.getItem('tasks'); return saved ? JSON.parse(saved) : []; }); const [filter, setFilter] = useLocalStorage('filter', 'all'); const filteredTasks = tasks.filter(task => { if (filter === 'active') return !task.completed; if (filter === 'completed') return task.completed; return true; }); return ( <div className={styles.container}> <h1>Task Manager</h1> <TaskInput onAdd={(text) => dispatch({ type: 'ADD_TASK', payload: text })} /> <FilterBar current={filter} onChange={setFilter} count={tasks.length} /> <TaskList tasks={filteredTasks} dispatch={dispatch} /> </div> ); }

Essential Tools for Your React Toolkit

Here's what you actually need in 2024:

Category	Tool	Why
Build Tool	Vite	Lightning-fast dev server and builds
Styling	Tailwind CSS	Utility-first CSS without leaving your JSX
State Management	Zustand or Jotai	Lightweight, powerful state solutions
Data Fetching	TanStack Query	Caching, revalidation, and loading states
Routing	React Router v6+	Declarative, nested routing
Forms	React Hook Form	Performant forms with easy validation
Testing	Vitest + Testing Library	Fast unit and integration tests
Type Safety	TypeScript	Catch errors before runtime

Conclusion

React in 2024 is better than ever. The ecosystem is mature, tooling is fast, and the community is huge. Start with the basics — components, props, state, hooks — then branch out as you need more.

Week 1-2: Master components, props, and useState
Week 3-4: Learn useEffect, data fetching, and routing
Week 5-6: Build a complete project with state management
Week 7-8: Add TypeScript and testing
Ongoing: Explore Server Components, Suspense, and frameworks

export const metadata = { wordCount: 1450, lastVerified: "2024-03-20", codeExamplesWorking: true, };

Before diving in, make sure you have a basic understanding of HTML, CSS, and JavaScript (ES6+). Familiarity with the command line is also helpful. You'll need Node.js 18+ installed on your machine.

Why React in 2024?

There are solid options out there — Vue, Svelte, Angular. So why React?

Setting Up Your Development Environment

The right starter depends on what you're building:

```bash # Create a new React project with Vite npm create vite@latest my-react-app -- --template react

# Navigate into the project cd my-react-app

# Install dependencies npm install

# Navigate and start cd my-remix-app npm run dev ``` Remix focuses on web standards and progressive enhancement, making it excellent for data-heavy applications.

Core Concepts: Components and JSX

React is all about components — reusable chunks of UI that manage their own state and rendering. Here's your first one:

Example

<CodePlayground code={` function Greeting({ name = "World" }) { const [count, setCount] = React.useState(0);

Key Takeaways from This Example

Components are functions that return JSX. They can accept props (inputs) and manage internal state. This simple mental model scales to complex applications.

JSX is a syntax extension that looks like HTML but lives in JavaScript
Props (name) let you pass data to components from their parents
State (count) lets components remember values between renders
Event handlers (onClick) respond to user interactions

Understanding Hooks

Hooks let you "hook into" React features from function components. Here are the ones you'll use daily:

useState — Managing State

Example

const [value, setValue] = useState(initialValue);

useEffect — Side Effects

Example

useEffect(() => { // Runs after render const subscription = api.subscribe(id); return () => { // Cleanup function subscription.unsubscribe(); }; }, [id]); // Only re-run when `id` changes

jsx example

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Styled Button</button>;
}

Building Your First Real Application

Let's build something real — a Task Manager that puts everything together:

Features we'll implement:

Add, edit, and delete tasks
Mark tasks as complete
Filter by status (all, active, completed)
Persist data in localStorage
Responsive design with CSS Modules

Concepts covered:

Component composition
State management with useReducer
Custom hooks for localStorage
Conditional rendering
List rendering with keys

Example

Essential Tools for Your React Toolkit

Here's what you actually need in 2024:

Category	Tool	Why
Build Tool	Vite	Lightning-fast dev server and builds
Styling	Tailwind CSS	Utility-first CSS without leaving your JSX
State Management	Zustand or Jotai	Lightweight, powerful state solutions
Data Fetching	TanStack Query	Caching, revalidation, and loading states
Routing	React Router v6+	Declarative, nested routing
Forms	React Hook Form	Performant forms with easy validation
Testing	Vitest + Testing Library	Fast unit and integration tests
Type Safety	TypeScript	Catch errors before runtime

Conclusion

React in 2024 is better than ever. The ecosystem is mature, tooling is fast, and the community is huge. Start with the basics — components, props, state, hooks — then branch out as you need more.

Week 1-2: Master components, props, and useState
Week 3-4: Learn useEffect, data fetching, and routing
Week 5-6: Build a complete project with state management
Week 7-8: Add TypeScript and testing
Ongoing: Explore Server Components, Suspense, and frameworks

export const metadata = { wordCount: 1450, lastVerified: "2024-03-20", codeExamplesWorking: true, };

Getting Started with React in 2024

Why React in 2024?

Setting Up Your Development Environment

Core Concepts: Components and JSX

Key Takeaways from This Example

Understanding Hooks

useState — Managing State

useEffect — Side Effects

Building Your First Real Application

Essential Tools for Your React Toolkit

Conclusion

Continue learning this concept

Getting Started with React in 2024

Why React in 2024?

Setting Up Your Development Environment

Core Concepts: Components and JSX

Key Takeaways from This Example

Understanding Hooks

useState — Managing State

useEffect — Side Effects

Building Your First Real Application

Essential Tools for Your React Toolkit

Conclusion

Continue learning this concept

Why React in 2024?

Setting Up Your Development Environment

Core Concepts: Components and JSX

Key Takeaways from This Example

Understanding Hooks

useState — Managing State

useEffect — Side Effects

useContext — Sharing Data

Building Your First Real Application

Essential Tools for Your React Toolkit

Conclusion

Continue learning this concept

Why React in 2024?

Setting Up Your Development Environment

Core Concepts: Components and JSX

Key Takeaways from This Example

Understanding Hooks

useState — Managing State

useEffect — Side Effects

useContext — Sharing Data

Building Your First Real Application

Essential Tools for Your React Toolkit

Conclusion

Continue learning this concept