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

1. 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 :

   cd /Applications/ServBay/www
   npx create-react-app servbay-react-app

2. Installation des dépendances

   Entrez dans le répertoire du projet et installez les dépendances :

   cd servbay-react-app
   npm install

Modifier le contenu de sortie du projet React

1. Modifier le fichier src/App.js

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

   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

1. Exécuter le serveur de développement

   Démarrez le serveur de développement en spécifiant le port (par exemple : 8585) :

   npm start -- --port 8585

   Cela démarrera un serveur de développement local et ouvrira le port 8585.

2. 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.

3. 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

1. Construire la version de production

   Une fois le développement terminé, utilisez la commande suivante pour construire la version de production :

   npm run build

   Après la construction, les fichiers statiques générés se trouveront dans le répertoire build.

2. 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

3. 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.