Créer et exécuter un projet React

Qu'est-ce que React ?

React est une bibliothèque JavaScript open-source pour la construction d'interfaces utilisateur, maintenue par Facebook. Elle se concentre sur la construction de la couche de vue et permet aux développeurs de créer efficacement des interfaces utilisateur complexes grâce à une approche par composants. Le concept central de React repose sur les composants et le flux de données unidirectionnel, ce qui rend le code plus compréhensible et maintenable.

Principales caractéristiques et avantages de React

Composants : Construction de l'interface utilisateur via des composants, rendant le code plus modulaire et réutilisable.
DOM virtuel : React utilise un DOM virtuel pour optimiser les performances, mettant à jour le DOM réel uniquement lorsque nécessaire.
Flux de données unidirectionnel : Les données circulent unidirectionnellement entre les composants, rendant la gestion de l'état de l'application plus claire et prévisible.
Communauté et écosystème puissants : React bénéficie d'une communauté énorme et d'un vaste support de bibliothèques tierces, facilitant le développement.

Utiliser React permet aux développeurs de construire plus efficacement des applications Web modernes et réactives.

Créer et exécuter un projet React avec ServBay

Dans cet article, nous allons utiliser l'environnement Node.js fourni par ServBay pour créer et exécuter un projet React. Nous utiliserons la fonctionnalité d'hébergement de ServBay pour configurer le serveur Web, et accéderons au projet via le proxy inverse et le service de fichiers statiques.

Créer un projet React

Initialisation du projet
Tout d'abord, assurez-vous d'avoir installé l'environnement Node.js fourni par ServBay. Ensuite, utilisez les commandes suivantes pour initialiser un nouveau projet React :
bash
```
cd /Applications/ServBay/www
npx create-react-app servbay-react-app
```
1
2
Installation des dépendances
Entrez dans le répertoire du projet et installez les dépendances :
bash
```
cd servbay-react-app
npm install
```
1
2

Modifier le contenu de sortie du projet React

Modifier le fichier src/App.js

Ouvrez le fichier src/App.js et modifiez le contenu pour afficher "Hello ServBay!" :

javascript

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello ServBay!</h1>
      </header>
    </div>
  );
}

export default App;

Passer en mode développement

Exécuter le serveur de développement
Démarrez le serveur de développement en spécifiant le port (par exemple : 8585) :
bash
```
npm start -- --port 8585
```
1
Cela démarrera un serveur de développement local et ouvrira le port 8585.
Configurer le proxy inverse de ServBay Host
Utilisez la fonctionnalité d'hébergement de ServBay pour accéder au serveur de développement via un proxy inverse. Dans les paramètres d'hébergement de ServBay, ajoutez un nouveau proxy inverse :
- Nom : Mon premier site de développement React
- Domaine : servbay-react-test.dev
- Type d'hôte : Proxy inverse
- IP : 127.0.0.1
- Port : 8585
Pour des étapes de configuration détaillées, consultez ajout d'un site de développement Node.js.
Accéder au mode développement
Ouvrez votre navigateur et accédez à https://servbay-react-test.dev pour voir le projet en temps réel. Grâce à ServBay, qui prend en charge les domaines personnalisés et les certificats SSL gratuits, vous bénéficierez d'une sécurité accrue.

Construire la version de production

Construire la version de production
Une fois le développement terminé, utilisez la commande suivante pour construire la version de production :
bash
```
npm run build
```
1
Après la construction, les fichiers statiques générés se trouveront dans le répertoire build.
Configurer le service de fichiers statiques
Utilisez la fonctionnalité d'hébergement de ServBay pour accéder à la version de production via le service de fichiers statiques. Dans les paramètres d'hébergement de ServBay, ajoutez un nouveau site statique :
- Nom : Mon premier site de production React
- Domaine : servbay-react-test.prod
- Type d'hôte : Statique
- Répertoire racine du site : /Applications/ServBay/www/servbay-react-app/build
Accéder au mode production
Ouvrez votre navigateur et accédez à https://servbay-react-test.prod pour voir la version de production construite. Grâce au domaine personnalisé et au certificat SSL gratuit de ServBay, votre site bénéficiera d'une sécurité et d'une crédibilité accrues.

En suivant ces étapes, vous avez créé et exécuté avec succès un projet React, en utilisant les fonctionnalités fournies par ServBay pour gérer et accéder à votre projet.