Formation ReactJS pour les nuls - Créez votre première application

Je vous propose une petite formation étape par étape pour créer votre première application en ReactJS, sur le thème du ski. Les explications ci-dessous s'adresse à tous même si vous êtes un débutant.

 

Étape 1 : Installer Node.js et NPM

La première étape pour créer une application React est d'installer Node.js et NPM (Node Package Manager) sur votre ordinateur. Node.js est un environnement d'exécution JavaScript qui permet d'exécuter des applications JavaScript côté serveur. NPM est un gestionnaire de paquets qui permet d'installer et de gérer les dépendances de votre application.

Vous pouvez télécharger et installer Node.js depuis le site officiel : https://nodejs.org/en/download/

 

Étape 2 : Créer un nouveau projet React

Une fois que Node.js et NPM sont installés, vous pouvez créer un nouveau projet React en utilisant la commande suivante dans votre terminal :

npx create-react-app skiland

Cette commande va créer un nouveau projet React appelé « skiland » dans un dossier du même nom. Elle va également installer toutes les dépendances nécessaires pour créer une application React.

 

Étape 3 : Lancer l'application

Une fois que le projet est créé, vous pouvez vous déplacer dans le dossier de l'application en utilisant la commande suivante :

cd skiland

Ensuite, vous pouvez lancer l'application en utilisant la commande suivante :

npm start

Cette commande va lancer l'application sur un serveur local et ouvrir votre navigateur par défaut pour afficher l'application. Si tout fonctionne correctement, vous devriez voir une page par défaut de React.

 

Étape 4 : Modifier l'application

Maintenant que l'application est lancée, vous pouvez la modifier pour qu'elle corresponde à vos besoins. Les fichiers de l'application se trouvent dans le dossier « src ». Le fichier « index.js » est le point d'entrée de l'application. Vous pouvez modifier ce fichier pour ajouter du contenu à l'application.

Par exemple, vous pouvez modifier le fichier « App.js » pour ajouter un composant de texte simple :

 
import React from 'react';

function App() {
  return (
    <div>
      <h1>Skiland : la liste des stations de ski en France</h1>
      <p>Découvrez toutes les stations de ski françaises par région.</p>
    </div>
  );
}

export default App;

Ensuite, vous pouvez enregistrer le fichier et l'application sera automatiquement mise à jour pour afficher votre nouveau contenu.

 

Étape 5 : Utiliser des composants React supplémentaires

React est livré avec de nombreux composants pré-construits qui peuvent être utilisés pour construire des applications plus complexes. Vous pouvez installer des composants supplémentaires à l'aide de NPM.

Par exemple, vous pouvez installer le composant Material UI en utilisant la commande suivante :

npm install @material-ui/core

Ensuite, vous pouvez utiliser le composant dans votre application en important la bibliothèque et en ajoutant le composant dans votre code.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
    },
  },
}));

function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Button variant="contained" color="primary">
        Voir toutes les stations de ski
      </Button>
    </div>
  );
}

export default App;

Cette application utilise le composant Button de Material UI pour afficher un bouton qui permettra de voir toutes les stations de ski.

 

Étape 6 : Utiliser une API pour afficher des données

Pour afficher une liste de stations de ski en France, nous avons besoin d'utiliser une API. Une API est une interface qui permet à votre application d'interagir avec des services externes. Dans notre cas, nous allons utiliser l'API publique « skiinfo.fr » qui fournit une liste de stations de ski en France.

Pour utiliser l'API, nous allons installer le package « axios » qui permet de faire des requêtes HTTP depuis notre application React.

npm install axios

Ensuite, nous pouvons faire une requête GET pour récupérer les données de l'API. Nous allons stocker ces données dans le state de notre composant pour pouvoir les afficher.

import React, { useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import axios from 'axios';

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
    },
  },
}));

function App() {
  const classes = useStyles();
  const [stations, setStations] = useState([]);

  useEffect(() => {
    axios
      .get('https://www.skiinfo.fr/api/snowReport?country=fr&language=fr')
      .then((response) => {
        setStations(response.data.results);
      });
  }, []);

  return (
    <div className={classes.root}>
      <Button variant="contained" color="primary">
        Voir toutes les stations de ski
      </Button>
      {stations.map((station) => (
        <div key={station.id}>
          <h2>{station.name}</h2>
          <p>{station.region}</p>
          <p>{station.state}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

Cette application utilise la méthode useEffect de React pour faire une requête GET à l'API skiinfo.fr au moment du rendu initial du composant. Les données sont stockées dans le state de notre composant à l'aide de la méthode useState de React. Ensuite, nous utilisons la méthode map de JavaScript pour afficher chaque station de ski dans un div distinct.

 

Étape 7 : Mettre en production

Maintenant que l'application est terminée, nous pouvons la déployer sur un serveur pour qu'elle soit accessible au public. Il existe de nombreuses options pour mettre en production une application React, mais l'option la plus simple est d'utiliser l'hébergement gratuit fourni par Netlify.

Netlify est un service qui permet de déployer des applications statiques (telles que des applications React) en quelques minutes. Voici les étapes à suivre pour déployer votre application React sur Netlify :

  1. Créez un compte gratuit sur Netlify en vous rendant sur leur site web.

  2. Connectez votre compte GitHub à Netlify en autorisant l'accès à vos dépôts.

  3. Créez un nouveau site web en cliquant sur le bouton "New site from Git" sur le tableau de bord de Netlify.

  4. Sélectionnez votre dépôt GitHub et choisissez la branche sur laquelle vous avez développé votre application.

  5. Configurez les options de construction pour votre application. Dans notre cas, nous n'avons besoin d'aucune configuration supplémentaire car notre application est déjà construite.

  6. Cliquez sur "Deploy site" pour déployer votre application.

Netlify vous fournira un lien pour accéder à votre application en ligne. Vous pouvez également configurer un nom de domaine personnalisé si vous le souhaitez.

Voilà, votre application est maintenant en production et accessible au public !

 

Conclusion

Félicitations, vous avez créé votre première application React ! Dans cette formation, vous avez appris les bases de React et comment créer une application simple qui utilise une API publique pour afficher des données.

Il est important de noter que ce guide n'est qu'une introduction à React et qu'il existe de nombreuses autres fonctionnalités et concepts à apprendre. Cependant, ce guide devrait vous donner une base solide pour commencer à explorer React plus en profondeur.

N'oubliez pas de pratiquer régulièrement et de continuer à apprendre en lisant la documentation de React et en travaillant sur des projets plus avancés. Bonne chance !

Me contacter

fr.thomas.rossier@gmail.com