Installation de React.js

Dans cette section, nous allons explorer différentes méthodes pour installer React.js sur votre machine. Nous aborderons les méthodes suivantes :

Sommaire

1. Installation locale avec Node.js

Pour installer React.js localement, vous aurez besoin de Node.js et npm (Node Package Manager) installés sur votre machine. Suivez les étapes ci-dessous pour effectuer l'installation :

Étapes d'installation

Téléchargez et installez Node.js en suivant les instructions spécifiques à votre système d'exploitation. Vous pouvez trouver l'installateur correspondant à votre système d'exploitation sur le site officiel de Node.js : https://nodejs.org (opens in a new tab).
Ouvrez une fenêtre de terminal et vérifiez que Node.js et npm sont installés en exécutant les commandes suivantes :
```
node --version
npm --version
```
Assurez-vous que les versions affichées correspondent à celles de la dernière version de Node.js.
Une fois Node.js et npm installés, vous pouvez créer un nouveau projet React en utilisant la commande npx create-react-app dans votre terminal. Par exemple, pour créer un projet appelé "my-react-app", exécutez la commande suivante :
```
npx create-react-app my-react-app
```
Cela va créer un nouveau répertoire "my-react-app" contenant la structure de base d'une application React.
Accédez au répertoire du projet en utilisant la commande cd :
```
cd my-react-app
```
Enfin, démarrez votre application React en exécutant la commande :
```
npm start
```
Cela lancera le serveur de développement et ouvrira automatiquement votre navigateur par défaut pour afficher votre application React.

2. Installation avec NVM (Node Version Manager)

NVM (Node Version Manager) est un outil pratique qui vous permet de gérer plusieurs versions de Node.js sur votre machine. Il est utile lorsque vous avez besoin de travailler sur différents projets nécessitant des versions spécifiques de Node.js.

Installation avec NVM (Windows)

Pour installer Node.js avec NVM sur Windows, suivez les étapes suivantes :

Installation avec NVM (Windows)

Téléchargez l'installateur de NVM pour Windows à partir du dépôt GitHub officiel : https://github.com/coreybutler/nvm-windows (opens in a new tab).
Exécutez l'installateur téléchargé et suivez les instructions pour terminer l'installation de NVM.
Ouvrez une nouvelle fenêtre de terminal et vérifiez que NVM est correctement installé en exécutant la commande suivante :
```
nvm --version
```
Maintenant, vous pouvez installer une version spécifique de Node.js en utilisant NVM. Par exemple, pour installer la dernière version LTS (Long Term Support) de Node.js, exécutez la commande suivante :
```
nvm install --lts
```
Pour vérifier que Node.js est installé, exécutez la commande suivante :
```
node --version
```
Vous pouvez également vérifier la version de npm en exécutant la commande suivante :
```
npm --version
```

Installation avec NVM (Mac)

Pour installer Node.js avec NVM sur Mac, suivez les étapes suivantes :

Ouvrez un terminal et installez NVM en utilisant Homebrew avec la commande suivante :
```
brew install nvm
```

Ajoutez la configuration NVM à votre fichier de profil en exécutant les commandes suivantes :

echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.bash_profile
echo '[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"' >> ~/.bash_profile

Fermez le terminal et ouvrez une nouvelle fenêtre de terminal.
Vérifiez que NVM est correctement installé en exécutant la commande suivante :
```
nvm --version
```
Maintenant, vous pouvez installer une version spécifique de Node.js en utilisant NVM. Par exemple, pour installer la dernière version LTS (Long Term Support) de Node.js, exécutez la commande suivante :
```
nvm install --lts
```
Pour vérifier que Node.js est installé, exéc

3. Installation avec Docker

Docker est une plateforme open-source qui permet de créer, déployer et exécuter des applications dans des conteneurs. L'utilisation de Docker facilite la mise en place d'un environnement de développement reproductible et portable.

Installation de Docker

Avant d'installer React.js avec Docker, vous devez installer Docker sur votre machine. Les étapes d'installation varient en fonction du système d'exploitation

que vous utilisez. 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).

Une fois Docker installé, vous pouvez procéder à l'installation de React.js à l'aide d'un Dockerfile.

Étapes d'installation

Créez un fichier appelé Dockerfile dans le répertoire de votre projet.
Ouvrez le fichier Dockerfile dans un éditeur de texte et ajoutez le contenu suivant :

# Utilisez une image de base Node.js
FROM node:18-apline

# 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 React
EXPOSE 3000

# Commande de démarrage pour lancer l'application React
CMD ["npm", "start"]

Ce Dockerfile utilise une image de base Node.js, copie les fichiers du projet dans le conteneur, installe les dépendances à l'aide de npm, expose le port 3000 et définit la commande de démarrage pour lancer l'application React.

Enregistrez le fichier Dockerfile.
Ouvrez une fenêtre de terminal et placez-vous dans le répertoire du projet contenant le fichier Dockerfile.
Exécutez la commande suivante pour construire l'image Docker :

docker build -t my-react-app .

Cela construira une image Docker appelée my-react-app en utilisant le fichier Dockerfile dans le répertoire actuel (.).

Une fois la construction de l'image terminée, vous pouvez exécuter un conteneur à partir de l'image en utilisant la commande suivante :

docker run -p 3000:3000 my-react-app

Cela lancera un conteneur à partir de l'image my-react-app et le liera au port 3000 de votre machine hôte. Vous pourrez ainsi accéder à votre application React à l'adresse http://localhost:3000 dans votre navigateur.

4. Installation avec Docker Compose (utilisant un Dockerfile)

Docker Compose est un outil qui permet de définir et de gérer des applications multi-conteneurs. Il permet de spécifier les dépendances et les configurations des conteneurs dans un fichier YAML.

Étapes d'installation

Créez un fichier appelé docker-compose.yml dans le répertoire de votre projet.
Ouvrez le fichier docker-compose.yml dans un éditeur de texte et ajoutez le contenu suivant :

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

Ce fichier de composition spécifie un service appelé my-react-app qui est construit à partir du fichier Dockerfile dans le répertoire actuel. Il lie le port 3000 du conteneur au port 3000 de la machine hôte et monte le répertoire du projet dans le répertoire /app du conteneur.

Enregistrez le fichier docker-compose.yml.
Ouvrez une fenêtre de terminal et placez-vous dans le répertoire du projet contenant le fichier docker-compose.yml.
Exécutez la commande suivante pour démarrer les conteneurs :

docker-compose up

Cela construira l'image Docker à partir du fichier Dockerfile et démarrera le conteneur à l'aide de Docker Compose.

Vous pourrez accéder à votre application React à l'adresse http://localhost:3000 dans votre navigateur.

Ces différentes méthodes d'installation vous permettent de mettre en place un environnement de développement pour React.js, que ce soit en installant localement avec Node.js, en utilisant NVM pour gérer les versions de Node.js, ou en utilisant Docker et Docker Compose pour créer des conteneurs isolés. Choisissez la méthode qui correspond le mieux à vos besoins et à votre

environnement de développement.

0.4 Les avantages et inconvénients de React.js 2.1 Syntaxe de templating en React (JSX)