Chapitre 1 : Introduction à React et JSX

Qu’est-ce que React ?

React est une bibliothèque JavaScript open-source développée par Facebook. Elle est utilisée pour construire des interfaces utilisateur (UI) interactives et réutilisables pour les applications web.

• Basée sur les composants : React permet de diviser l'interface en petits morceaux de code indépendants appelés "composants".
• Déclarative : Vous décrivez à quoi votre interface doit ressembler, et React se charge de la mettre à jour efficacement lorsque les données changent.
• Performante : React utilise un "DOM virtuel" pour optimiser les mises à jour de l'affichage, ce qui rend les applications rapides et fluides.

Qu’est-ce que le JSX ?

JSX (JavaScript XML) est une extension de la syntaxe de JavaScript qui permet d'écrire du code ressemblant à du HTML directement dans vos fichiers JavaScript. Ce n'est ni du HTML, ni une chaîne de caractères.

Le JSX facilite grandement la création et la visualisation des composants React.

Exemple sans JSX :

// C’est plus verbeux et moins lisible
React.createElement('h1', {className: 'greeting'}, 'Bonjour, monde !');
  

Exemple avec JSX :

// C’est plus simple et ressemble au HTML que vous connaissez
const element = <h1 className="greeting">Bonjour, monde !</h1>;
  

Note : Le code JSX doit être "compilé" en JavaScript standard par un outil comme Babel pour que les navigateurs puissent le comprendre.

Configurer un projet React

La manière la plus simple de démarrer un nouveau projet React est d'utiliser l'outil Create React App (ou des alternatives plus modernes comme Vite).

Pour utiliser Vite (recommandé) :

# Installez Node.js sur votre machine
# Puis ouvrez un terminal et exécutez la commande suivante :
npm create vite@latest mon-app-react -- --template react

# Ensuite, naviguez dans le dossier et installez les dépendances
cd mon-app-react
npm install

# Lancez le serveur de développement
npm run dev
  

Votre application React est maintenant accessible sur http://localhost:5173 (ou un port similaire).

Conclusion

React et JSX forment la base du développement web moderne. Dans le prochain chapitre, nous approfondirons la notion de Composants.