Skip to content
Learni
View all tutorials
Développement Frontend

How to Build a React Application in 2026

18 minBEGINNER
ReactDébutantFrontend
Lire en français

Introduction

React remains in 2026 the most popular frontend framework for building reactive user interfaces. This tutorial teaches you how to create a complete application from day one. You will install a project, create reusable components, manage local state, and respond to user interactions. Each step comes with ready-to-copy code. At the end, you will have a small interactive counter application that will serve as the base for all your future React projects.

Prerequisites

  • Node.js 20 or higher installed
  • Basic knowledge of JavaScript and HTML
  • A code editor (VS Code recommended)

Initialize the Project with Vite

terminal
npm create vite@latest mon-app-react -- --template react-ts
cd mon-app-react
npm install
npm run dev

Vite offers ultra-fast startup and minimal configuration. The react-ts template already includes TypeScript, which is recommended in 2026 for a better development experience.

Project Structure

After installation, explore the src folder. The main file is src/main.tsx which mounts the React application in the DOM. The root component is located in src/App.tsx.

Create the Main Component

src/App.tsx
import { useState } from 'react';

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

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Mon Premier Compteur React</h1>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>
        Incrémenter
      </button>
      <button onClick={() => setCount(0)} style={{ marginLeft: '10px' }}>
        Réinitialiser
      </button>
    </div>
  );
}

export default App;

This component uses the useState hook to manage a counter. Each click automatically updates the interface thanks to React's reactivity system.

Extract a Reusable Component

src/components/Counter.tsx
import React from 'react';

interface CounterProps {
  count: number;
  onIncrement: () => void;
  onReset: () => void;
}

function Counter({ count, onIncrement, onReset }: CounterProps) {
  return (
    <div>
      <p>Valeur actuelle : {count}</p>
      <button onClick={onIncrement}>+1</button>
      <button onClick={onReset} style={{ marginLeft: '8px' }}>Reset</button>
    </div>
  );
}

export default Counter;

Creating small and focused components improves readability. Props are typed with a TypeScript interface to avoid errors.

Use the Counter Component

src/App.tsx
import { useState } from 'react';
import Counter from './components/Counter';

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

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Application React 2026</h1>
      <Counter 
        count={count} 
        onIncrement={() => setCount(count + 1)} 
        onReset={() => setCount(0)} 
      />
    </div>
  );
}

export default App;

The parent component manages the state and passes it via props. This unidirectional architecture is a fundamental principle of React.

Add a Side Effect

src/App.tsx
import { useState, useEffect } from 'react';
import Counter from './components/Counter';

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

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

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Application React 2026</h1>
      <Counter 
        count={count} 
        onIncrement={() => setCount(count + 1)} 
        onReset={() => setCount(0)} 
      />
    </div>
  );
}

export default App;

useEffect allows you to run code after rendering. Here, we update the page title every time the counter changes.

Add Modern Styling

src/index.css
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #f8fafc;
}

button {
  padding: 12px 24px;
  font-size: 16px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  background: #2563eb;
}

Simple and consistent styling makes the application look professional. Global styles are automatically applied via the import in main.tsx.

Best Practices

  • Always type props with TypeScript
  • Extract logic into custom hooks when it repeats
  • Keep components small and focused on a single responsibility
  • Use explicit variable names
  • Test components with React Testing Library

Common Mistakes to Avoid

  • Directly modifying state instead of using the setter
  • Forgetting to declare dependencies in useEffect
  • Creating overly large components
  • Not using unique keys in lists

Going Further

Deepen your knowledge with our complete courses on React, TypeScript and modern architectures. Discover our courses