Introduction

Dans ce tutoriel, nous allons installer Reactet  effectuerons une configuration basique des outils React sur notre ordinateur local, et nous créerons une application pour démarrer simplement, en apprenant au passage les bases du fonctionnement de React.

Objectifs:

• Créer un projet React
• Installer React
• Installer React Router
• Créer des composants

Prérequis:

• Être familiarisé avec les langages HTML, CSS, et JavaScript et avoir des connaissances sur  la  ligne de commande/du terminal.
• Node.js et npm (Node Package Manager) doivent être installés sur votre système. Vous pouvez les télécharger et les installer à partir du site officiel de Node.js : https://nodejs.org.

Créez un nouveau projet React en utilisant la commande suivante dans votre terminal :
(Assurez-vous d’être dans le bon dossier où vous souhaitez créer votre projet.)

-> Remplacez  ‘mon-projet-react‘ par le nom de votre projet

Accédez au répertoire de votre projet :

Une fois le projet créé, exécutez la commande suivante sur le terminal pour démarrer le serveur de développement :

Cela lancera l’application React, dans votre navigateur par défaut à l’adresse: http://localhost:3000/.

-> Exploration du projet

Ouvrez le dossier de votre projet sur un éditeur de texte comme Studio Visual Code, vous y trouverez à l’intérieur :
– Le fichier src/App.js qui contient le composant principal de l’application.
– Le dossier public/ qui contient le fichier HTML principal et les ressources statiques.
– Le dossier src/ qui contient le code source de votre application React.

Lors de la création d’un nouveau projet react, il est important d’installer une dépendance pour le routage dans React.

Cela permet de gérer facilement la navigation entre les différentes pages de votre application web en associant des URL à des composants spécifiques, facilitant ainsi la création d’une expérience utilisateur fluide et intuitive.

Installez React Router en utilisant la commande suivante dans votre terminal :

Dans le fichier index.js du dossier “src”, remplacez le code actuel avec le code suivant :

Dans les fichiers où vous souhaitez utiliser React Router, n’oubliez pas d’ajoutez cette ligne de code, tout au début du fichier avec les ‘imports’ :

Un composant dans React est une partie réutilisable de l’interface utilisateur qui peut être composée de code JavaScript et JSX pour décrire la structure et le comportement d’une partie spécifique de votre application.

Créer un fichier ‘Description.jsx’ dans le dossier “src” et copier ensuite le code ci-dessous pour créer un composant, ici nommée “Description” :

Ce composant peut maintenant être utilisé dans d’autres parties de votre application en important et en insérant simplement la balise ‘description’ dans votre code JSX.

Dans app.js, après les imports,  ajouter cette ligne de code pour importer le composant :

Ensuite nous appelons le composant ‘description’ dans la fonction App , copier le code ci-dessous :

Vous pouvez maintenant commencer à personnaliser votre application React en modifiant les fichiers dans le dossier src/.

N’hésitez pas à installer des bibliothèques avec la commande suivante :

Voici un exemple de projet simple, qui démontre l’utilisation des routes ainsi que des composants :

Vous retrouverez ci-dessous tout les fichiers nécessaire à la création de ce projet :

App.js :

Index.css :

Apropos.jsx :

Apropos.css :

Contact.jsx :

Contact.css :

Description.jsx :

Description.css :

Merci d’avoir suivi ce tutoriel ! Si vous avez envie d’en savoir plus sur le développement d’applications web, sur le dev/ops ou la conception d’applications,inscrivez-vous à notre formation Développeur web et web mobile ou Concepteur Développeur d’Application (CDA) afin de viser l’excellence, acquérir un savoir-faire concret dans le développement web et d’obtenir un diplôme national RNCP reconnus par l’État.