Initialisation React

1. Qu’est-ce que React ?

React est une bibliothèque JavaScript développée par Meta (Facebook). Elle permet de créer des interfaces utilisateur dynamiques basées sur des composants.

React est principalement utilisé pour créer des applications web monopage (SPA) : la page ne se recharge pas entièrement, seule l’interface change.

Pourquoi utiliser React ?

• Interfaces rapides et fluides

• Basé sur des composants réutilisables

• Très grande communauté

• Écosystème riche

• Utilisé par de grandes entreprises (Meta, Netflix, Airbnb…)

⚠️ React n’est pas un framework complet, mais une librairie UI.

---

2. Frameworks et outils autour de React

React est presque toujours utilisé avec un outil de build ou un framework.

---

Vite (recommandé)

Description Vite est un outil moderne et rapide pour créer des projets React.

Avantages

• Démarrage instantané

• Build très rapide

• Configuration simple

• Léger

Inconvénients

• Pas de SSR natif

• Moins complet que Next.js

👉 Idéal pour apprendre et pour les projets front-end classiques.

---

Create React App (CRA)

Description Ancien outil officiel de React.

Avantages

• Très simple à utiliser

• Configuration cachée

Inconvénients

• Lent

• Peu maintenu

• Peu flexible

👉 Aujourd’hui déconseillé.

---

Next.js

Description Framework React complet orienté production.

Avantages

• Server Side Rendering (SSR)

• SEO optimisé

• Routing intégré

• API backend intégrée

Inconvénients

• Plus complexe

• Overkill pour petits projets

---

Remix

Description Framework React moderne axé performances.

Avantages

• Très performant

• Bonne gestion des formulaires

• Approche serveur-first

Inconvénients

• Moins populaire

• Communauté plus petite

---

3. Initialiser un projet React

Prérequis

• Node.js (version LTS)

• Un terminal

• Un éditeur de code (VS Code)

---

Initialisation avec Vite

Dans le terminal :

npm create vite@latest my-app
cd my-app
npm install
npm run dev

L’application est accessible sur :

http://localhost:5173

---

4. Structure d’un projet React (Vite)

Arborescence du projet

• my-app/

  • node_modules/

  • public/

  • src/

    • assets/

    • App.jsx

    • main.jsx

    • index.css

  • index.html

  • package.json

  • vite.config.js

---

Rôle des fichiers

• src/

  • Contient tout le code React

• App.jsx

  • Composant principal

• main.jsx

  • Point d’entrée React

• index.css

  • Styles globaux

• index.html

  • Page HTML unique

• package.json

  • Dépendances et scripts

• vite.config.js

  • Configuration de Vite

---

5. HTML en React (JSX)

React utilise le JSX, une syntaxe proche du HTML.

Exemple de composant simple

function Hello() {
  return <h1>Hello React</h1>
}

export default Hello

---

Différences HTML / JSX

• class → className

• for → htmlFor

• JavaScript entre { }

• Un seul élément parent retourné

Exemple :

function Form() {
  return (
    <label htmlFor="email" className="label">
      Email
      <input id="email" type="email" />
    </label>
  )
}

---

HTML dynamique

function Status() {
  const isOnline = true

  return (
    <p>{isOnline ? "En ligne" : "Hors ligne"}</p>
  )
}

---

6. CSS en React

CSS global

Fichier index.css :

body {
  margin: 0;
  font-family: sans-serif;
}

---

CSS par composant

Structure recommandée :

• components/

  • Button/

    • Button.jsx

    • Button.css

Button.jsx

import "./Button.css"

function Button() {
  return <button className="btn">Clique moi</button>
}

export default Button

Button.css

.btn {
  background: black;
  color: white;
  padding: 10px;
}

---

CSS Modules

Button.module.css

.btn {
  background: blue;
  color: white;
}

Button.jsx

import styles from "./Button.module.css"

function Button() {
  return <button className={styles.btn}>Clique</button>
}

---

Styles inline (cas spécifiques)

function Alert() {
  return (
    <div style={{ color: "red", fontWeight: "bold" }}>
      Erreur
    </div>
  )
}

---

7. Les composants React

Un composant est une fonction JavaScript qui décrit une partie de l’interface.

• Réutilisable

• Isolé

• Responsable d’une seule chose

---

8. Props

Les props permettent de passer des données à un composant.

function Welcome({ name }) {
  return <h1>Bienvenue {name}</h1>
}

export default Welcome

Utilisation :

<Welcome name="Loan" />

---

9. State (useState)

Le state permet de gérer des données dynamiques.

import { useState } from "react"

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

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

---

10. useEffect

import { useEffect } from "react"

function Example() {
  useEffect(() => {
    console.log("Composant monté")
  }, [])

  return <p>Check la console</p>
}

---

11. main.jsx

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import "./index.css"

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

---

12. App.jsx

function App() {
  return (
    <div>
      <h1>Mon application React</h1>
    </div>
  )
}

export default App

---

13. Bonnes pratiques

• 1 composant = 1 fichier

• Noms clairs

• Composants courts

• Séparer logique et UI

• Structurer le projet dès le début

---

14. Conclusion

React repose sur :

• Les composants

• Le JSX

• Le state

• La réutilisabilité

Avec Vite, React est rapide à mettre en place et idéal pour apprendre et développer des applications modernes.