React.js est une bibliothèque JavaScript open-source développée par Facebook pour la création d’interfaces utilisateur interactives et dynamiques. Il est principalement utilisé pour le développement d’applications web monopages (Single Page Applications – SPA) et repose sur un modèle de programmation composantielle, ce qui facilite la réutilisation du code et améliore la maintenabilité des applications.
Principales caractéristiques de React.js
Composants réutilisables : Le code est organisé en composants modulaires.
Virtual DOM : Optimise le rendu en mettant à jour uniquement les éléments modifiés.
JSX (JavaScript XML) : Syntaxe qui facilite l’écriture du code en combinant HTML et JavaScript.
Unidirectional Data Flow : Assure un flux de données prévisible et performant.
Installation de React.js
Avant d’installer React, assurez-vous d’avoir les prérequis suivants installés sur votre machine :
Node.js (version 14 ou supérieure) : Pour exécuter le serveur de développement et gérer les dépendances via npm ou yarn.
npm (Node Package Manager) ou yarn : Pour installer les bibliothèques nécessaires.
Installation avec Create React App
La manière la plus simple d’installer React.js est d’utiliser Create React App, un outil officiel permettant de configurer rapidement un projet React avec une structure standard.
1. Installation de Create React App
Ouvrez un terminal et exécutez la commande suivante :
npx create-react-app mon-projet
Si npx n’est pas disponible, installez-le avec :
npm install -g npx
2. Accéder au projet et lancer le serveur
cd mon-projet
npm start
Cette commande lance le serveur de développement et ouvre automatiquement l’application dans le navigateur à l’adresse http://localhost:3000/.
Installation manuelle de React
Si vous souhaitez configurer un projet React sans utiliser Create React App, vous pouvez installer les dépendances manuellement :
1. Initialiser un projet Node.js
mkdir mon-projet
cd mon-projet
npm init -y
2. Installer React et ReactDOM
npm install react react-dom
3. Installer Webpack et Babel pour la compilation
npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin -D
4. Configurer les fichiers Webpack et Babel
Créez un fichier webpack.config.js et configurez-le pour la compilation de votre projet.
Une fois la configuration terminée, vous pouvez exécuter votre projet avec :
npm start
Conclusion
React.js est une bibliothèque puissante et flexible qui permet de créer des interfaces utilisateur modernes et interactives. Son installation est simple grâce à Create React App, mais il est aussi possible de l’installer manuellement pour une configuration plus personnalisée.
En suivant ces étapes, vous avez maintenant un environnement prêt pour développer votre première application React !