React est une bibliothèque JavaScript populaire pour construire des interfaces utilisateur, développée et maintenue par Facebook. Elle vous permet de créer des composants d’interface utilisateur réutilisables et de gérer l’état de votre application de manière plus efficace et organisée par rapport aux techniques de développement web traditionnelles.
Dans ce guide, nous parcourrons le processus d’installation de React sur un système Linux, en particulier Ubuntu 20.04/22.04 ou CentOS/RHEL 7. Nous couvrirons les étapes suivantes :
- Installer Node.js et npm
- Créer une nouvelle application React
- Exécuter le serveur de développement
- Construire l’application pour la production
- Servir l’application avec un serveur web
Avant de commencer, il est important de noter que React n’est qu’une bibliothèque pour construire des interfaces utilisateur, et elle est souvent utilisée conjointement avec d’autres outils et bibliothèques pour créer une application web complète. Par exemple, vous pourriez utiliser React avec un framework backend comme Express.js ou une bibliothèque de gestion d’état comme Redux.
Cependant, dans le cadre de ce guide, nous nous concentrerons sur les bases de la mise en place de React sur votre système Linux.
Prérequis
Avant de commencer, vous devrez avoir les éléments suivants installés sur votre système :
- Un émulateur de terminal (tel que Gnome Terminal ou Konsole)
- Un éditeur de texte (tel que Sublime Text, Atom ou Visual Studio Code)
- Git (facultatif, mais recommandé pour gérer le code de votre application)
Vous devriez également avoir une compréhension de base de la ligne de commande Linux et être à l’aise avec les commandes telles que cd, ls et mkdir.
Installer Node.js et npm
Node.js est un environnement d’exécution JavaScript qui vous permet d’exécuter du code JavaScript en dehors d’un navigateur web. Il est requis pour exécuter des applications React, ainsi que de nombreux autres outils de développement web modernes.
npm (Node Package Manager) est un gestionnaire de paquets pour Node.js qui vous permet d’installer et de gérer facilement des bibliothèques et dépendances tierces.
Pour installer Node.js et npm sur Ubuntu, exécutez les commandes suivantes :
$ sudo apt update
$ sudo apt install nodejs npmSur CentOS 7, vous pouvez installer Node.js et npm à l’aide des commandes suivantes :
$ sudo yum update
$ sudo yum install nodejs npmUne fois l’installation terminée, vous pouvez vérifier que Node.js et npm sont installés en vérifiant leurs versions :
$ node --version
v18.19.0
$ npm --version
10.2.3Notez que les versions exactes peuvent varier selon le moment où vous lisez ce guide.
Créer une nouvelle application React
Maintenant que nous avons installé Node.js et npm, nous pouvons créer une nouvelle application React en utilisant l’outil create-react-app. Il s’agit d’un utilitaire en ligne de commande qui configure un nouveau projet React avec un pipeline de construction préconfigurée et un serveur de développement.
Pour créer une nouvelle application React, ouvrez votre terminal et naviguez vers le répertoire dans lequel vous souhaitez créer votre projet. Ensuite, exécutez la commande suivante :
$ npx create-react-app my-appRemplacez my-app par le nom de votre projet.
Cette commande créera un nouveau répertoire appelé my-app et mettra en place une application React de base à l’intérieur. L’application est préconfigurée avec un serveur de développement, un script de construction et une structure de fichiers de base.
Une fois la commande terminée, vous pouvez naviguer dans le répertoire de votre nouveau projet :
$ cd my-appExécuter le serveur de développement
Maintenant que votre application React a été créée, vous pouvez démarrer le serveur de développement pour voir votre application en action.
Pour démarrer le serveur de développement, exécutez la commande suivante :
$ npm startCette commande compilera votre application et démarrera un serveur de développement local sur http://localhost:3000. Elle ouvrira également automatiquement votre navigateur web par défaut à cette adresse.
Vous devriez maintenant voir une page React par défaut avec le texte “Edit src/App.js and save to reload.” C’est l’application React par défaut qui est créée par create-react-app.
Lorsque vous apporterez des modifications aux fichiers source de votre application, le serveur de développement détectera automatiquement les changements et rechargera votre application dans le navigateur. Cela facilite grandement l’itération sur la conception et la fonctionnalité de votre application pendant le développement.
Construire l’application pour la production
Lorsque vous êtes prêt à déployer votre application React, vous devrez construire une version prête pour la production de votre application.
Pour construire votre application pour la production, exécutez la commande suivante :
$ npm run buildCette commande compilera votre application et produira une version statique de votre application dans le répertoire build de votre projet.
Le répertoire build contient tous les fichiers nécessaires pour servir votre application sur un serveur web, notamment :
index.html: Le fichier HTML principal qui charge votre applicationstatic/: Un répertoire contenant les ressources statiques de votre application (telles que les fichiers CSS et JavaScript)
Servir l’application avec un serveur web
Maintenant que vous avez une version prête pour la production de votre application, vous pouvez la servir à l’aide d’un serveur web.
Il existe de nombreux serveurs web différents que vous pouvez utiliser pour servir votre application React, mais dans le cadre de ce guide, nous utiliserons le package serve de npm.
Pour installer le package serve, exécutez la commande suivante dans votre terminal :
$ npm install -g serveLe drapeau -g installe le package globalement, ce qui vous permet d’utiliser la commande serve depuis n’importe où sur votre système.
Une fois le package installé, vous pouvez démarrer le serveur web en exécutant la commande suivante dans le répertoire racine de votre projet :
$ serve -s buildLe drapeau -s spécifie le répertoire à servir, qui dans ce cas est le répertoire build.
Cette commande démarrera un serveur web sur http://localhost:5000 par défaut. Vous pouvez accéder à votre application en naviguant vers cette adresse dans votre navigateur web.
Si vous souhaitez servir votre application sur un port différent, vous pouvez spécifier le numéro de port en utilisant le drapeau -l :
$ serve -s build -l 8080Cette commande démarrera le serveur web sur http://localhost:8080.
Notez qu’il ne s’agit que d’un serveur web de base pour servir des fichiers statiques, et il peut ne pas convenir pour un environnement de production. Pour une solution plus robuste, vous voudrez peut-être envisager d’utiliser un serveur web dédié tel qu’Apache ou Nginx.
Conclusion
Dans ce guide, nous avons couvert les bases de l’installation de React sur un système Linux à l’aide d’Ubuntu/Debian ou de CentOS/RHEL 7. Nous avons parcouru le processus d’installation de Node.js et npm, la création d’une nouvelle application React, l’exécution du serveur de développement, la construction de l’application pour la production et le service de l’application avec un serveur web.
Il existe de nombreux autres sujets avancés que vous pouvez explorer à mesure que vous continuez à travailler avec React, tels que la gestion d’état, le routage et les tests. Cependant, ce guide devrait vous fournir une base solide pour commencer le développement React sur votre système Linux.
Français
English
العربية
Webhi.Technology
@WebHiTechnology