Création d'une première application React simple

Dans cette section, nous allons vous guider à travers les étapes détaillées pour créer une application React simple à partir de zéro. Nous explorerons les bases de React, y compris l'affichage de texte, la création de composants et l'utilisation de Docker pour la conteneuriser.

Étapes pour créer une application React simple

Suivez les étapes ci-dessous pour créer votre première application React simple :

1. Prérequis

Assurez-vous d'avoir Node.js et npm (Node Package Manager) installés sur votre machine. Vous pouvez les télécharger et les installer à partir du site officiel de Node.js : https://nodejs.org (opens in a new tab).

Assurez-vous également d'avoir Docker installé sur votre machine. Vous pouvez trouver des instructions détaillées pour l'installation de Docker sur le site officiel de Docker : https://docs.docker.com/get-docker/ (opens in a new tab).

2. Initialisation du projet

Ouvrez une fenêtre de terminal et créez un nouveau répertoire pour votre projet. Accédez au répertoire nouvellement créé à l'aide de la commande cd.

Exécutez la commande suivante pour initialiser un nouveau projet React à l'aide de Create React App. Nous utiliserons également l'option --use-npm pour spécifier l'utilisation de npm comme gestionnaire de packages :

npx create-react-app my-react-app --use-npm

Cela va créer une nouvelle application React avec la structure de base dans un répertoire appelé my-react-app.

Accédez au répertoire du projet en utilisant la commande cd :

cd my-react-app

3. Structure du projet

À l'intérieur du répertoire du projet, vous trouverez une structure de fichiers et de dossiers préconfigurée par Create React App. Les fichiers importants incluent :

• src/App.js : Ce fichier contient le composant principal de l'application.
• src/index.js : Ce fichier est le point d'entrée de l'application où le rendu initial est effectué.
• public/index.html : Ce fichier est le modèle HTML de base pour l'application.

Vous pouvez explorer et modifier ces fichiers en fonction de vos besoins.

4. Modification du composant principal

Ouvrez le fichier src/App.js dans votre éditeur de code. Vous pouvez supprimer le contenu existant et le remplacer par le code suivant :

import React from 'react'
import AfficheNomPrenom from './AfficheNomPrenom'
 
function App() {
    return (
        <div>
            <h1>Ma première application React</h1>
            <AfficheNomPrenom nom='Doe' prenom='John' />
        </div>
    )
}
 
export default App

Dans cet exemple, nous avons utilisé le composant AfficheNomPrenom en lui passant les props nom et prenom. Ce composant affichera le nom et le prénom passés en tant que props.

5. Création du composant AfficheNomPrenom

Créez un nouveau fichier appelé AfficheNomPrenom.js dans le répertoire src. Ouvrez ce fichier et ajoutez le code suivant :

import React from 'react'
 
function AfficheNomPrenom(props) {
    return (
        <div>
            <p>Nom: {props.nom}</p>
            <p>Prénom: {props.prenom}</p>
        </div>
    )
}
 
export default AfficheNomPrenom

Ce composant fonctionnel AfficheNomPrenom accepte les props nom et prenom et les affiche dans les paragraphes correspondants.

Voici une alternative à la fonction AfficheNomPrenom en utilisant la déstructuration des props :

import React from 'react'
 
function AfficheNomPrenom({ nom, prenom }) {
    return (
        <div>
            <p>Nom: {nom}</p>
            <p>Prénom: {prenom}</p>
        </div>
    )
}
 
export default AfficheNomPrenom

Dans cette approche, nous utilisons des accolades pour déstructurer les props directement dans les paramètres de la fonction. Cela nous permet d'accéder directement aux valeurs nom et prenom sans avoir à utiliser props.nom et props.prenom à l'intérieur de la fonction. Cela rend le code plus concis et facilite la lecture et la compréhension du composant.

Vous pouvez utiliser cette approche lorsque vous avez un petit nombre de props à extraire et à utiliser dans votre composant. Cependant, si vous avez un grand nombre de props ou si vous souhaitez les utiliser dans plusieurs endroits du composant, il peut être préférable de les conserver dans l'objet props pour une meilleure lisibilité et maintenabilité du code.

6. Affichage de l'application

Pour afficher votre application React, retournez dans le terminal et exécutez la commande suivante :

npm start

Cela lancera le serveur de développement de React et ouvrira automatiquement votre navigateur par défaut pour afficher votre application à l'adresse http://localhost:3000.

Vous devriez maintenant voir le titre "Ma première application React" et les informations sur le nom et le prénom affichés dans votre navigateur.

7. Conteneurisation de l'application avec Docker

Pour conteneuriser votre application React à l'aide de Docker, vous pouvez créer un fichier Dockerfile à la racine du projet avec le contenu suivant :

# Utilisez une image de base Node.js
FROM node:18-alpine
 
# Définissez le répertoire de travail à l'intérieur du conteneur
WORKDIR /app
 
# Copiez les fichiers package.json et package-lock.json dans le répertoire de travail
COPY package*.json ./
 
# Installez les dépendances du projet
RUN npm install
 
# Copiez le reste des fichiers du projet dans le répertoire de travail
COPY . .
 
# Exposez le port 3000 pour accéder à
 
l'application dans le conteneur
EXPOSE 3000
 
# Commande de démarrage de l'application
CMD [ "npm", "start" ]

Ensuite, créez un fichier docker-compose.yml à la racine du projet avec le contenu suivant :

version: '3'
services:
    my-react-app:
        build:
            context: .
            dockerfile: Dockerfile
        ports:
            - 3000:3000

Maintenant, vous pouvez exécuter la commande suivante dans votre terminal pour démarrer votre application React dans un conteneur Docker :

docker-compose up

Cela va construire l'image Docker à partir du Dockerfile et lancer un conteneur avec votre application React. Vous pouvez accéder à l'application dans votre navigateur à l'adresse http://localhost:3000.

Conclusion

Félicitations ! Vous avez créé votre première application React simple à partir de zéro et l'avez conteneurisée avec Docker. Vous avez appris à afficher du texte, à créer et à utiliser des composants React, ainsi qu'à utiliser Docker pour encapsuler votre application dans un conteneur. Ces compétences vous serviront de base solide pour développer des applications React plus complexes et les déployer facilement à l'aide de Docker. Continuez à explorer et à approfondir vos connaissances pour devenir un expert en React.