Créer un premier programme avec React est une excellente introduction au développement d’applications front-end modernes. Suivons les étapes pour mettre en place une application React de base.

Prérequis

Avant de commencer, assurez-vous d’avoir installé Node.js et npm (Node Package Manager) sur votre machine. Vous pouvez télécharger et installer Node.js depuis nodejs.org.

Assurez-vous aussi d’avoir un environnement de développement comme Vscode par exemple. Il y’en a plein d’autre comme IntelliJ IDEA, Eclipse, Apache NetBeans, Atom, Sublimetexte, etc….

Étape 1 : Installer Create React App

Create React App est un outil de configuration initiale qui permet de créer une application React avec un environnement de développement préconfiguré.

1. Ouvrez votre terminal.
2. Exécutez la commande suivante pour installer create-react-app globalement sur votre machine si ce n’est pas déjà fait :

npm install -g create-react-app

Étape 2 : Créer une nouvelle application React

Utilisez create-react-app pour générer les fichiers de votre application.

1. Dans votre terminal, exécutez la commande suivante pour créer une nouvelle application React nommée my-first-react-app (vous pouvez choisir un autre nom si vous le souhaitez) :

npx create-react-app my-first-react-app

2. Accédez au dossier de votre nouvelle application :

cd my-first-react-app

Étape 3 : Démarrer le serveur de développement

Pour voir votre application en action, démarrez le serveur de développement.

1. Dans le terminal, exécutez :

npm start

Cela devrait ouvrir votre navigateur par défaut et afficher votre nouvelle application React. Par défaut, cela fonctionne sur http://localhost:3000.

Étape 4 : Comprendre la structure des fichiers

Votre application React générée par create-react-app contient plusieurs fichiers et dossiers. Voici les plus importants :

• public/ : Contient les fichiers publics, notamment index.html.
• src/ : Contient les fichiers source de votre application.
  • index.js : Point d’entrée de votre application.
  • App.js : Composant principal de votre application.

Étape 5 : Modifier le composant App.js

Ouvrons src/App.js et modifions-le pour afficher un simple message de bienvenue.

1. Ouvrez src/App.js dans votre éditeur de code préféré.
2. Remplacez le contenu par le code suivant :

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Bienvenue dans mon premier programme React !</h1>
        <p>
          C'est une application React de base.
        </p>
      </header>
    </div>
  );
}

export default App;

3. Enregistrez le fichier.

Étape 6 : Voir les modifications

Si le serveur de développement est toujours en cours d’exécution, votre navigateur se mettra à jour automatiquement pour afficher les modifications. Vous devriez voir un message disant « Bienvenue dans mon premier programme React ! » et une petite description.

Étape 7 : Ajouter du style (optionnel)

Vous pouvez ajouter du style à votre application en modifiant le fichier src/App.css.

1. Ouvrez src/App.css.
2. Ajoutez ou modifiez des styles, par exemple :

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

Enregistrez le fichier et observez les changements de style dans votre application.

Conclusion

Vous avez maintenant un programme React de base en place. Ce tutoriel vous a guidé à travers l’installation de create-react-app, la création d’une nouvelle application, la modification de composants, et l’ajout de styles. Vous pouvez maintenant explorer davantage React en ajoutant de nouveaux composants, en utilisant des états et des props, et en intégrant des API. Bonne programmation avec React !