React Quickstart

This quickstart guide will help you build your first React application in just 5 minutes. You’ll learn the fundamentals of React by creating an interactive counter component with state management.

This tutorial assumes you have Node.js installed and are familiar with basic JavaScript. If you need to install React first, check out the Installation Guide.

What You’ll Build

You’ll create an interactive counter application that demonstrates:

Component creation
State management with hooks
Event handling
JSX syntax
Component composition

Quick Setup

Create a new React project

Use Vite to quickly scaffold a new React project:

npm create vite@latest react-quickstart -- --template react
cd react-quickstart
npm install

This creates a new React project with all the necessary configuration.

Start the development server

Launch the development server to see your app:

npm run dev

Open your browser to http://localhost:5173. You should see the default Vite + React welcome page.

Open your code editor

Open the project in your favorite code editor:

code .

You’ll be working primarily in the src directory.

Building Your First Component

Let’s build a counter component that increments when you click a button. This example uses React’s useState hook, which is the fundamental way to manage state in function components.

Import React hooks

Open src/App.jsx and start by importing the useState hook from React:

import { useState } from 'react';

The useState hook is one of React’s most important features. It lets your components “remember” information between renders.

Create your counter component

Replace the contents of src/App.jsx with this code:

import { useState } from 'react';

function App() {
  // Declare a state variable called "count" with initial value 0
  const [count, setCount] = useState(0);

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>My First React App</h1>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default App;

Save the file and watch your browser automatically update with the new component!

Test your counter

Click the button in your browser. The count should increment with each click!

Notice how the component re-renders automatically when state changes. This is React’s declarative magic - you just update the state, and React handles updating the UI.

Understanding the Code

Let’s break down what’s happening in your counter component:

State Declaration

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

This line does several things:

useState(0) creates a state variable initialized to 0
count is the current state value
setCount is the function you call to update the state
When you call setCount, React re-renders your component with the new value

JSX Syntax

return (
  <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
    <h1>My First React App</h1>
    <p>You clicked {count} times</p>
    <button onClick={() => setCount(count + 1)}>
      Click me
    </button>
  </div>
);

This HTML-like syntax is called JSX. It lets you write markup directly in JavaScript. Key points:

Use curly braces {} to embed JavaScript expressions
Use onClick (camelCase) instead of onclick
You can use JavaScript expressions inside JSX like {count}

Event Handling

onClick={() => setCount(count + 1)}

This creates an event handler that:

Listens for click events on the button
Calls setCount with the new count value
Triggers a re-render with the updated state

Adding More Functionality

Let’s enhance your counter with additional features:

Add increment and decrement buttons

Update your component to include more controls:

import { useState } from 'react';

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

  return (
    <div style={{ 
      padding: '40px', 
      fontFamily: 'sans-serif',
      textAlign: 'center',
      maxWidth: '400px',
      margin: '0 auto'
    }}>
      <h1>Counter App</h1>
      <div style={{ 
        fontSize: '48px', 
        margin: '20px 0',
        color: count >= 0 ? 'green' : 'red'
      }}>
        {count}
      </div>
      <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
        <button onClick={() => setCount(count - 1)}>
          Decrement
        </button>
        <button onClick={() => setCount(0)}>
          Reset
        </button>
        <button onClick={() => setCount(count + 1)}>
          Increment
        </button>
      </div>
    </div>
  );
}

export default App;

Now you have three buttons: decrement, reset, and increment!

Add step size control

Let’s add another state variable to control the increment/decrement step:

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);

  return (
    <div style={{ 
      padding: '40px', 
      fontFamily: 'sans-serif',
      textAlign: 'center',
      maxWidth: '400px',
      margin: '0 auto'
    }}>
      <h1>Counter App</h1>
      
      <div style={{ 
        fontSize: '48px', 
        margin: '20px 0',
        color: count >= 0 ? 'green' : 'red'
      }}>
        {count}
      </div>

      <div style={{ marginBottom: '20px' }}>
        <label>
          Step size: 
          <input 
            type="number" 
            value={step} 
            onChange={(e) => setStep(Number(e.target.value))}
            style={{ marginLeft: '10px', padding: '5px', width: '60px' }}
          />
        </label>
      </div>

      <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
        <button onClick={() => setCount(count - step)}>
          -{step}
        </button>
        <button onClick={() => setCount(0)}>
          Reset
        </button>
        <button onClick={() => setCount(count + step)}>
          +{step}
        </button>
      </div>

      <p style={{ marginTop: '20px', color: '#666' }}>
        Total clicks: {Math.abs(count)}
      </p>
    </div>
  );
}

export default App;

Now you can control how much the counter increments or decrements!

Create reusable components

Split your app into smaller, reusable components. Create a new file src/Counter.jsx:

import { useState } from 'react';

function Counter({ initialValue = 0, label = "Counter" }) {
  const [count, setCount] = useState(initialValue);

  return (
    <div style={{ 
      padding: '20px',
      border: '2px solid #ddd',
      borderRadius: '8px',
      margin: '10px'
    }}>
      <h3>{label}</h3>
      <div style={{ fontSize: '32px', margin: '10px 0' }}>
        {count}
      </div>
      <div style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(initialValue)}>Reset</button>
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>
    </div>
  );
}

export default Counter;

Now update src/App.jsx to use multiple counters:

import Counter from './Counter';

function App() {
  return (
    <div style={{ 
      padding: '40px',
      fontFamily: 'sans-serif',
      textAlign: 'center'
    }}>
      <h1>Multiple Counters</h1>
      <div style={{ 
        display: 'flex', 
        flexWrap: 'wrap',
        justifyContent: 'center',
        gap: '20px'
      }}>
        <Counter label="Clicks" initialValue={0} />
        <Counter label="Score" initialValue={100} />
        <Counter label="Lives" initialValue={3} />
      </div>
    </div>
  );
}

export default App;

You now have three independent counters, each maintaining their own state!

Key React Concepts You’ve Learned

Components

Components are the building blocks of React applications. They’re JavaScript functions that return JSX:

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

Props

Props are how you pass data to components:

<Counter label="Score" initialValue={100} />

Inside the component, access props as function parameters:

function Counter({ label, initialValue }) {
  // Use label and initialValue
}

State with useState

The useState hook lets components remember values:

const [count, setCount] = useState(0);
// count: current value
// setCount: function to update it
// 0: initial value

Event Handling

React uses camelCase event names and passes functions as handlers:

<button onClick={() => setCount(count + 1)}>
  Increment
</button>

JSX Expressions

Embed JavaScript in JSX using curly braces:

<p>You clicked {count} times</p>
<div style={{ color: count > 10 ? 'red' : 'green' }}>
  {count}
</div>

Common Patterns

Conditional Rendering

Show different UI based on state:

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>
          Log In
        </button>
      )}
    </div>
  );
}

Lists and Keys

Render lists of items:

function TodoList() {
  const [todos, setTodos] = useState(['Learn React', 'Build an app']);

  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

Form Inputs

Handle form input with controlled components:

function SearchBox() {
  const [query, setQuery] = useState('');

  return (
    <input
      type="text"
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search..."
    />
  );
}

Using React Hooks from the Source

React provides many built-in hooks. Here are some of the most commonly used ones from the actual React source code:

import {
  useState,      // Manage component state
  useEffect,     // Perform side effects
  useContext,    // Access context values
  useReducer,    // Manage complex state logic
  useCallback,   // Memoize functions
  useMemo,       // Memoize computed values
  useRef,        // Access DOM elements or persist values
  useId          // Generate unique IDs
} from 'react';

Using useEffect for Side Effects

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    // Cleanup function
    return () => clearInterval(interval);
  }, []); // Empty array means run once on mount

  return <div>Seconds: {seconds}</div>;
}

Using useRef to Access DOM Elements

import { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputRef = useRef(null);

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={() => inputRef.current.focus()}>
        Focus the input
      </button>
    </>
  );
}

Next Steps

Congratulations! You’ve built your first React application and learned the fundamentals. Here’s what to explore next:

Learn Key Concepts

Dive deeper into components, props, state, and lifecycle

Explore Hooks

Master useState, useEffect, useContext, and more

API Reference

Explore the complete React API documentation

Tips for Success

Start small - Don’t try to learn everything at once. Master useState and basic components first, then gradually explore more advanced features.

Practice daily - Build small projects regularly. Even 30 minutes a day will help solidify your understanding.

Use React DevTools - Install the React Developer Tools browser extension to inspect your components and debug issues.

Read error messages - React provides helpful error messages. Read them carefully - they often tell you exactly what’s wrong.

Troubleshooting

Component not updating? - Make sure you’re using setState to update state, not modifying it directly. Infinite re-renders? - Check that you’re not calling state setters directly in the render body. Use event handlers or useEffect instead. Props not working? - Verify you’re passing and receiving props with the correct names. Remember that props are immutable. Hooks error? - Hooks must be called at the top level of your component, not inside loops, conditions, or nested functions.

Additional Resources

React Documentation - Official React documentation
React DevTools - Browser extension for debugging
Create React App - Official React starter toolkit
Vite - Fast build tool with excellent React support

Now you’re ready to build amazing React applications. Happy coding!

Getting Started

Core Concepts

Building UIs

Advanced Guides

Performance

Quickstart

React Quickstart

What You’ll Build

Quick Setup

Building Your First Component

Understanding the Code

State Declaration

JSX Syntax

Event Handling

Adding More Functionality

Key React Concepts You’ve Learned

Components

Props

State with useState

Event Handling

JSX Expressions

Common Patterns

Conditional Rendering

Lists and Keys

Form Inputs

Using React Hooks from the Source

Using useEffect for Side Effects

Using useRef to Access DOM Elements

Next Steps

Learn Key Concepts

Explore Hooks

API Reference

Tips for Success

Troubleshooting

Additional Resources

​React Quickstart

​What You’ll Build

​Quick Setup

​Building Your First Component

​Understanding the Code

​State Declaration

​JSX Syntax

​Event Handling

​Adding More Functionality

​Key React Concepts You’ve Learned

​Components

​Props

​State with useState

​Event Handling

​JSX Expressions

​Common Patterns

​Conditional Rendering

​Lists and Keys

​Form Inputs

​Using React Hooks from the Source

​Using useEffect for Side Effects

​Using useRef to Access DOM Elements

​Next Steps

Learn Key Concepts

Explore Hooks

API Reference

​Tips for Success

​Troubleshooting

​Additional Resources

React Quickstart

What You’ll Build

Quick Setup

Building Your First Component

Understanding the Code

State Declaration

JSX Syntax

Event Handling

Adding More Functionality

Key React Concepts You’ve Learned

Components

Props

State with useState

Event Handling

JSX Expressions

Common Patterns

Conditional Rendering

Lists and Keys

Form Inputs

Using React Hooks from the Source

Using useEffect for Side Effects

Using useRef to Access DOM Elements

Next Steps

Tips for Success

Troubleshooting

Additional Resources