Guide d'introduction à React : Construire votre première interface utilisateur de zéro

React est une bibliothèque JavaScript pour construire des interfaces utilisateur. Développée et maintenue par Facebook, elle est devenue l'un des outils les plus populaires du développement front-end. Ce guide vous guidera pas à pas, de zéro, à travers les concepts fondamentaux de React et vous permettra de construire une interface utilisateur simple.

Pourquoi choisir React ?

React présente les avantages suivants :

• Composants : React décompose l'interface utilisateur en composants indépendants et réutilisables. Cela rend le code plus facile à maintenir et à comprendre.
• Déclaratif : React utilise un style de programmation déclaratif, ce qui signifie que vous n'avez qu'à décrire ce que vous voulez afficher, et React gère automatiquement les mises à jour et le rendu.
• Efficace : React utilise un DOM virtuel et un algorithme de diff intelligent, ce qui lui permet de mettre à jour efficacement l'interface utilisateur et de réduire les rendus inutiles.
• Support communautaire important : React dispose d'une vaste communauté et d'un riche écosystème, vous pouvez trouver de nombreux tutoriels, bibliothèques et outils pour vous aider à développer.
• Capacités multiplateformes : React Native vous permet d'utiliser React pour développer des applications mobiles natives (iOS et Android).

Préparation

Avant de commencer, vous devez vous assurer que les outils suivants sont installés sur votre ordinateur :

• Node.js : Node.js est un environnement d'exécution JavaScript utilisé pour exécuter les outils de développement React. Vous pouvez le télécharger et l'installer à partir de https://nodejs.org/.
• npm ou yarn : npm (Node Package Manager) et yarn sont des gestionnaires de paquets JavaScript utilisés pour installer et gérer les dépendances de React. npm est généralement installé avec Node.js. yarn peut être installé à partir de https://yarnpkg.com/.

Créer votre première application React

Nous allons utiliser create-react-app pour créer rapidement un projet React.

1. Créer avec npm :

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Créer avec yarn :

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Après avoir exécuté les commandes ci-dessus, create-react-app créera automatiquement un répertoire nommé my-first-react-app et initialisera un projet React dans ce répertoire. La commande npm start ou yarn start démarrera le serveur de développement, et vous pourrez accéder à votre application React dans votre navigateur en visitant http://localhost:3000.

Structure du répertoire

La structure du répertoire du projet créé par create-react-app est la suivante :

my-first-react-app/
├── node_modules/         # Bibliothèques dont le projet dépend
├── public/               # Ressources statiques (par exemple, fichiers HTML)
│   ├── index.html        # Fichier HTML d'entrée de l'application
│   └── ...
├── src/                  # Code source React
│   ├── App.css           # Style CSS du composant App
│   ├── App.js            # Composant App
│   ├── App.test.js       # Fichier de test du composant App
│   ├── index.css         # Style CSS global
│   ├── index.js          # Fichier JavaScript d'entrée de l'application
│   ├── logo.svg          # Logo React
│   └── ...
├── .gitignore            # Fichier d'ignorance Git
├── package.json          # Métadonnées et dépendances du projet
├── README.md             # Documentation du projet
└── yarn.lock             # Fichier de verrouillage de version des dépendances (si yarn est utilisé)

Comprendre les composants React

Une application React est constituée de composants. Les composants sont des blocs de code indépendants et réutilisables, utilisés pour rendre une partie spécifique de l'interface utilisateur.

Dans le fichier src/App.js, vous pouvez voir un composant App par défaut :

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Explication du code :

• import React from 'react'; importe la bibliothèque React.
• function App() { ... } définit un composant fonctionnel nommé App.
• return ( ... ) renvoie une expression JSX qui décrit ce que le composant doit rendre.
• export default App; exporte le composant App pour qu'il puisse être utilisé dans d'autres fichiers.

JSX (JavaScript XML)

JSX est une extension de syntaxe JavaScript qui vous permet d'écrire du code de type HTML dans votre code JavaScript. Dans l'exemple ci-dessus, ... est une expression JSX. Le code JSX est transformé en code JavaScript standard par Babel, afin que le navigateur puisse le comprendre.

Modifier le composant App

Modifions le composant App pour créer un simple compteur.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Compteur

      Compte actuel: {count}

      +
      -
    
  );
}

export default App;

Instructions de modification :

• import React, { useState } from 'react'; Importe le Hook useState. useState est un Hook React utilisé pour ajouter un état dans les composants fonctionnels.
• const [count, setCount] = useState(0); Utilise le Hook useState pour créer une variable d'état nommée count et l'initialise à 0. setCount est une fonction utilisée pour mettre à jour l'état count.
• const increment = () => { setCount(count + 1); }; Définit une fonction nommée increment qui incrémente l'état count de 1.
• const decrement = () => { setCount(count - 1); }; Définit une fonction nommée decrement qui décrémente l'état count de 1.
• Compte actuel: {count} Affiche la valeur de l'état count dans la page. {count} est une expression JSX utilisée pour insérer une variable JavaScript dans le code JSX.
• + et - Crée deux boutons, chacun lié aux fonctions increment et decrement. onClick est un gestionnaire d'événements utilisé pour exécuter la fonction spécifiée lorsque le bouton est cliqué.

Après avoir enregistré le fichier src/App.js, le navigateur se rafraîchira automatiquement et vous verrez un simple compteur. Cliquer sur le bouton "+" augmentera le compte, cliquer sur le bouton "-" diminuera le compte.

Utilisation de styles CSS

Vous pouvez utiliser CSS pour embellir votre application React. create-react-app prend en charge les CSS Modules et les fichiers CSS ordinaires.

Utilisation de CSS Modules :

CSS Modules vous permet de créer des styles CSS indépendants pour chaque composant, évitant ainsi les conflits de styles. Pour utiliser CSS Modules dans un composant, vous devez créer un fichier se terminant par .module.css.

Par exemple, créez un fichier nommé App.module.css et ajoutez-y les styles CSS suivants :

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Puis, importez CSS Modules dans le fichier src/App.js :

import React, { useState } from 'react';
import styles from './App.module.css'; // Importe CSS Modules

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Utiliser l'objet styles pour référencer les classes CSS */}
      

# Compteur

      Compte actuel : {count}

      +
      -
    
  );
}

export default App;

Utilisation d'un fichier CSS normal :

Vous pouvez également utiliser un fichier CSS normal pour définir des styles globaux. Dans le fichier src/index.css, vous pouvez définir des styles globaux.

Par exemple, ajoutez le style CSS suivant :

body {
  font-family: sans-serif;
}

Ce style sera appliqué à l'élément body de toute l'application.

Étape suivante

Félicitations, vous avez terminé votre première application React ! Ensuite, vous pouvez en apprendre davantage sur React, par exemple :

• Communication entre composants : Apprenez à faire communiquer différents composants entre eux.
• Gestion des formulaires : Apprenez à créer et à gérer des formulaires.
• Routage : Apprenez à utiliser React Router pour créer une application multi-pages.
• Redux ou Context API : Apprenez à gérer l'état de l'application.
• Hooks : Approfondissez votre connaissance des React Hooks, tels que useEffect, useContext, etc.

N'oubliez pas que React est une technologie qui nécessite une pratique et un apprentissage constants. Bonne étude !