Tutoriel sur la création d'une application web avec React.js

React.js est une bibliothèque de développement front-end populaire, utilisée pour créer des interfaces utilisateur interactives. Développée par Facebook, React.js est utilisée par de nombreuses grandes entreprises, dont Instagram, Airbnb et WhatsApp. Si vous souhaitez créer des applications web performantes, rapides et réactives , React.js pourrait être la solution idéale.

Pendahuluan

Avant de commencer, assurez-vous d'avoir installé Node.js et npm (Node Package Manager) sur votre ordinateur. Node.js et npm sont indispensables car ils fournissent l'environnement et les outils nécessaires au développement d'applications web avec React.js.

Étape 1 : Initialisation du projet React

Pour créer une nouvelle application React.js, nous pouvons utiliser Create React App, un outil de création d'applications qui minimise la configuration initiale. Exécutez la commande suivante dans votre terminal ou invite de commandes :

"`bash
npx créer-réagir-app mon-application
cd mon-application
npm début
“`

Cette commande créera un nouveau répertoire nommé `my-app`, téléchargera et installera toutes les dépendances nécessaires, puis démarrera le serveur de développement. Vous pouvez maintenant ouvrir un navigateur et accéder à `http://localhost:3000` pour visualiser l'application React.js par défaut.

Étape 2 : Structure des dossiers

Examinons la structure des dossiers créée par Create React App :

“`
mon application/
├── node_modules/
├── public/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
“`

– `node_modules/` : Contient toutes les dépendances de votre projet.
– `public/` : Contient les fichiers statiques, notamment `index.html` qui est le point d'entrée de l'application.
– `src/` : Répertoire où vous passerez le plus clair de votre temps. Contient les composants React, les fichiers CSS et autres ressources.

Étape 3 : Suppression des fichiers inutiles

Pour repartir de zéro, supprimons quelques fichiers inutiles. Supprimez `logo.svg` et `App.test.js` dans le dossier `src/`. Ensuite, ouvrez `App.css` et `index.css`, et supprimez tout le code CSS qu'ils contiennent afin de repartir d'une feuille de style vierge.

Étape 4 : Création de votre premier composant

React.js est un framework basé sur les composants. Les composants sont les éléments constitutifs de votre application web. Modifions `App.js` pour créer notre premier composant.

Ouvrez `src/App.js` et remplacez-le par le code suivant :

"`jsx
importer React depuis 'react' ;
importer './App.css';

fonction App() {
revenir (

);
}

exporter l'application par défaut ;
“`

Initialisez le code React dans `App.js` en utilisant JSX (JavaScript XML), ce qui permet d'écrire une syntaxe similaire à HTML au sein de JavaScript. Enregistrez vos modifications et visualisez le résultat dans votre navigateur.

Étape 5 : Ajout de nouveaux composants

Ajoutons maintenant de nouveaux composants. Créez un nouveau dossier nommé `components` dans le dossier `src`. Créez ensuite un nouveau fichier `HelloWorld.js` dans le dossier `components`.

"`jsx
importer React depuis 'react' ;

fonction HelloWorld() {
revenir (

);
}

export default HelloWorld;
“`

Ouvrez `App.js` et importez le composant `HelloWorld` que nous venons de créer :

"`jsx
importer React depuis 'react' ;
importer './App.css';
import HelloWorld from './components/HelloWorld';

fonction App() {
revenir (

);
}

exporter l'application par défaut ;
“`

Désormais, `App.js` affiche le composant `HelloWorld` sur la page principale.

Étape 6 : Ajout de la gestion d’état avec useState

React possède des hooks très puissants pour gérer l'état. Ajoutons un état à notre application. Par exemple, ajoutons un compteur qui s'incrémente à chaque clic sur un bouton.

Ouvrez `HelloWorld.js` et ajoutez l'état et le hook `useState` :

"`jsx
importer React, {useState} depuis 'react' ;

fonction HelloWorld() {
const [compte, setCount] = useState(0);

const incrementCount = () => {
setCount(compte + 1);
}

revenir (

);
}

export default HelloWorld;
“`

L'état `count` est initialisé avec la valeur 0, et à chaque clic sur le bouton, la fonction `incrementCount` incrémente cette valeur.

Étape 7 : Ajout du style

Pour ajouter du style, nous pouvons utiliser du CSS dans le fichier `App.css` ou une bibliothèque CSS-in-JS comme styled-components. Pour l'instant, restons-en au CSS standard.

Ouvrez `App.css` et ajoutez du style :

"`css
.App {
text-align: center;
}

.App-header {
couleur de fond : 282c34 ;
hauteur minimale : 100vh ;
affichage: flex;
flex-direction: colonne;
align-items : center ;
justifier-contenu : centrer ;
taille de police : calc(10px + 2vmin);
Couleur blanche;
}

bouton {
padding: 10px 20px;
margin-top: 20px;
font-size: 16px;
}
“`

Étape 8 : Ajout du routage avec React Router

Pour ajouter une navigation entre les différentes pages de notre application, nous pouvons utiliser React Router. Installez React Router en exécutant la commande suivante :

"`bash
npm installer réagir-routeur-dom
“`

Ensuite, créez deux nouveaux composants : `Home.js` et `About.js` dans le dossier `components`.

`Home.js` :
"`jsx
importer React depuis 'react' ;

fonction Accueil() {
revenir (

);
}

exportation par défaut Accueil;
“`

`About.js` :
"`jsx
importer React depuis 'react' ;

fonction À propos() {
revenir (

);
}

exportation par défaut À propos ;
“`

Ensuite, ouvrez `App.js` et configurez le routage :

"`jsx
importer React depuis 'react' ;
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
importer './App.css';
import HelloWorld from './components/HelloWorld';
importer Accueil depuis './components/Home';
importer À propos de depuis './components/About';

fonction App() {
revenir (

);
}

exporter l'application par défaut ;
“`

Nous avons ainsi ajouté une navigation de base entre les différentes pages de notre application.

Clôture

Voici un tutoriel de base pour créer une application web avec React.js. Nous avons abordé la configuration du projet, la création de composants, la gestion d'état, le style et le routage. React.js possède un écosystème riche, composé de nombreuses bibliothèques et outils permettant de développer des applications web plus complexes.

Bonne chance, et j'espère que ce tutoriel vous aidera à bien démarrer votre aventure avec React.js !