[MON] Débutez avec React

Présentation du deuxième MON de mon temps 2 : une introduction au développement FrontEnd avec React basée sur une formation proposée par Openclassrooms.

<-- Retour

Introduction

En parcourant les offres de stage proposées dans le domaine du développement, je me suis rapidement rendu compte de la demande des employeurs vis à vis des frameworks de développement (React, Vue, Angular...). Ayant déjà abordé React en cours très rapidement, j'ai décidé de suivre une formation proposée par Openclassrooms afin de solidifier mes bases sur le sujet.

Le lien de la formation est disponible : Débutez avec React (Openclassrooms)

Cette formation est composée de 4 parties qui mettent en place un projet concret de développement d'une interface FrontEnd. Chacune de ces parties est composé de plusieurs leçons et d'un quiz. Dans ces leçons, vous retrouverez du cours écrit, les lignes de code qui permettent de créer l'interface web ainsi que des vidéos qui expliquent pas à pas comment y arriver.

Table des matières

Vous trouverez ci-dessous la table des matières de la formation :

Bonne formation !

Pour commencer

Si vous ne souhaitez pas suivre la formation, voici quelques pistes pour vous aider à commencer à développer en React.

Créer un projet React avec Create React App

Pour créer un projet React, vous pouvez utiliser Create React App. C'est un outil qui permet de créer un projet React en quelques secondes. Pour l'utiliser, vous devez installer Node.js et npm, puis lancer la commande suivante :

npx create-react-app nom-du-projet

Lancer un projet React

Pour lancer un projet React, vous devez vous rendre dans le dossier du projet et lancer la commande suivante :

yarn start

Créer un composant React

Un composant React est un élément de l'interface qui peut être réutilisé. On peut par exemple créer un composant Header qui contient le titre et le logo de notre site, et l'utiliser sur toutes les pages de notre site.

Pour créer un composant React, vous devez créer un fichier .js ou .jsx dans le dossier src/components et y écrire le code suivant :

import React from 'react';

const NomDuComposant = () => {
  return (
    <div>
      <h1>Titre</h1>
      <p>Paragraphe</p>
    </div>
  );
};

export default NomDuComposant;

Utiliser un composant React

Pour utiliser un composant React, vous devez l'importer dans le fichier où vous souhaitez l'utiliser et l'insérer dans le code JSX du fichier. Par exemple, si vous souhaitez utiliser le composant NomDuComposant dans le fichier App.js, vous devez écrire le code suivant:

import React from 'react';

import NomDuComposant from './NomDuComposant';

const App = () => {
  return (
    <div>
      <h1>Titre</h1>
      <p>Paragraphe</p>
      <NomDuComposant />
    </div>
  );
};

export default App;

Vous pourrez ensuite lancer l'application avec la commande yarn start et voir le composant s'afficher.

Utiliser le state

Le state est un objet qui contient des données. Il est utilisé pour stocker des données et les mettre à jour. Le state est préférable à la variable car il permet de mettre à jour le composant à chaque fois que le state est modifié.

Pour utiliser le state, vous devez importer useState depuis la bibliothèque react et utiliser la fonction useState dans votre composant :

import React, { useState } from 'react';

const App = () => {
  const [state, setState] = useState('valeur initiale');

  return (
    <div>
      <h1>Titre</h1>
      <p>Paragraphe</p>
      <p>{state}</p>
    </div>
  );
};

export default App;

Utiliser les effets

Les effets sont des fonctions qui sont exécutées à chaque fois que le composant est mis à jour. Elles sont utiles pour récupérer des données, mettre à jour le DOM, etc.

Pour utiliser les effets, vous devez importer useEffect depuis la bibliothèque react et utiliser la fonction useEffect dans votre composant :

import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    console.log('Ceci est un effet');
  }, []);

  return (
    <div>
      <h1>Titre</h1>
      <p>Paragraphe</p>
    </div>
  );
};

export default App;

Utiliser les props

Les props sont des données que vous pouvez passer à un composant React. Elles sont utiles pour réutiliser un composant avec des données différentes.

Pour utiliser les props, vous devez passer des données à votre composant :

import React from 'react';

import NomDuComposant from './NomDuComposant';

const App = () => {
  return (
    <div>
      <h1>Titre</h1>
      <p>Paragraphe</p>
      <NomDuComposant nom="John Doe" />
    </div>
  );
};

export default App;

Et vous devez récupérer ces données dans votre composant :

import React from 'react';

const NomDuComposant = (props) => {
  return (
    <div>
      <h1>Titre</h1>
      <p>Paragraphe</p>
      <p>{props.nom}</p>
    </div>
  );
};

export default NomDuComposant;

Compiler un projet React

Afin de pouvoir déployer votre projet React, vous devez le compiler.

Pour compiler un projet React, vous devez vous rendre dans le dossier du projet et lancer la commande suivante :

yarn build

Vous pouvez ensuite déployer le dossier build sur votre serveur.

<-- Retour