Aller au contenu principal

Découvrir React

Notions théoriques​

Qu'est-ce que React ?​

React est une bibliothèque JavaScript créée par Meta (Facebook) pour construire des interfaces Web interactives. C'est l'une des bibliothèques UI les plus utilisées dans le monde professionnel.

Contrairement à Svelte (un compilateur), React est une bibliothèque exécutée dans le navigateur : elle utilise un Virtual DOM pour calculer efficacement les mises à jour de l'interface.

CaractéristiqueReactSvelte
ApprocheBibliothèque runtimeCompilateur
Virtual DOMOuiNon
Syntaxe des templatesJSX (JS + HTML)HTML avec {}
Taille du bundlePlus importanteTrès petite
ÉcosystèmeTrès largePlus récent

JSX : JavaScript + HTML​

React utilise JSX (JavaScript XML), une syntaxe qui permet d'écrire du HTML directement dans du JavaScript :

function Bonjour() {
  const prenom = 'Alice'

  return (
    <div>
      <h1>Bonjour, {prenom} !</h1>
      <p>Bienvenue dans React.</p>
    </div>
  )
}
JSX ≠ HTML

JSX ressemble à du HTML, mais avec quelques différences :

  • class devient className (<div className="carte">)
  • Les attributs s'écrivent en camelCase : onclick → onClick, onchange → onChange
  • Chaque composant doit retourner un seul élément racine (ou un Fragment <>...</>)

Les composants fonctionnels​

En React, un composant est une fonction JavaScript qui retourne du JSX. Par convention, son nom commence par une majuscule :

function Carte({ titre, description }) {
  return (
    <div className="carte">
      <h2>{titre}</h2>
      <p>{description}</p>
    </div>
  )
}

Créer un projet React avec Vite​

npm create vite@latest mon-projet --template react
cd mon-projet
npm install
npm run dev

Structure d'un projet React+Vite​

mon-projet/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.jsx       ← Monte le composant racine dans le DOM
    ├── App.jsx        ← Composant racine de l'application
    └── App.css        ← Styles du composant App

src/main.jsx — point d'entrée :

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Passer des données : les props​

Les props (propriétés) fonctionnent comme en Svelte : le parent passe des données à l'enfant via des attributs.

// Composant enfant
function Salutation({ prenom, age }) {
  return <p>Bonjour {prenom}, vous avez {age} ans.</p>
}

// Composant parent
function App() {
  return (
    <div>
      <Salutation prenom="Alice" age={25} />
      <Salutation prenom="Bob" age={30} />
    </div>
  )
}

Exemple pratique​

Voici src/App.jsx modifié pour afficher deux composants Carte :

function Carte({ titre, couleur }) {
  return (
    <div style={{ border: `2px solid ${couleur}`, padding: '1rem', borderRadius: '8px', marginBottom: '1rem' }}>
      <h2>{titre}</h2>
    </div>
  )
}

function App() {
  return (
    <div style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
      <h1>Mon application React</h1>
      <Carte titre="Svelte" couleur="#ff3e00" />
      <Carte titre="React" couleur="#61dafb" />
    </div>
  )
}

export default App
Style inline en React

En React, le style inline s'écrit avec un objet JavaScript : style={{ color: 'red' }} (double accolades). La première paire est la syntaxe JSX pour une expression JS, la seconde est l'objet de styles. Les propriétés CSS s'écrivent en camelCase : background-color → backgroundColor.

Test de mémorisation/compréhension​


Qu'est-ce que JSX ?


Comment s'écrit l'attribut `class` en JSX ?


Quelle commande crée un projet React avec Vite ?


Qu'est-ce qu'un composant React ?


Comment s'appelle la convention pour les noms de composants React ?


Comment passe-t-on une valeur numérique comme prop en JSX ?


TP pour réfléchir et résoudre des problèmes​

Dans ce TP, vous allez créer votre premier projet React avec Vite et créer un composant de carte réutilisable.

Étape 1 — Créer le projet React+Vite​

npm create vite@latest tp-react --template react
cd tp-react
npm install
npm run dev

Bonne pratique - Les fichiers .jsx pour React

Avec Vite+React, les fichiers de composants portent l'extension .jsx (ou .tsx pour TypeScript). L'extension .jsx indique que le fichier contient du JSX — cela permet à Vite de le traiter correctement.

Étape 2 — Créer le composant CarteLanguage​

Créez src/CarteLanguage.jsx :


Bonne pratique - Export default pour le composant principal

Chaque fichier de composant React exporte son composant avec export default. C'est la convention qui permet d'importer le composant sans accolades : import CarteLanguage from './CarteLanguage.jsx'.

Étape 3 — Utiliser le composant dans App.jsx​

Remplacez le contenu de src/App.jsx :


Bonne pratique - Props sur plusieurs lignes

Quand un composant reçoit plusieurs props, écrivez chaque prop sur sa propre ligne. Cela améliore la lisibilité et facilite la modification ou la revue du code.

📌 Une solution