React

Générer un projet en React

Il y a plusieurs Générateur d’applications React qui permettent de générer la structure de base recommandée en JavaScript ou TypeScript.

Voici comment générer l’application :

1. Situez vous dans le dossier où vous désirez créer l’application (le dossier de l’application sera automatiquement créé à la prochaine étape)
2. Exécutez la commande de création d’application :
   
   console

   npm create vite@latest my_app
   

3. Suivez les instructions et choisir React et TypeScript
4. Une fois l’application générée, déplacez-vous dans le dossier créé :
   
   console

   cd my_app
   

5. Exécutez l’application en utilisant les commandes suivantes :
   
   console

   npm install
   npm run dev
   

Si vous avez des erreurs de modules dépréciés, vous pouvez les corriger en suivant les instructions de la section Module déprécié.

Page par défaut d'une application Vite en React

Manuel

Documentation officielle Vite

React Developer Tools

React Developer Tools est un plugiciel dans Chrome pour aider au débogage de vos applications React.

Pour l'installer : React Developer Tools pour Chrome

React Development Tools s'installe dans les outils de développement de Chrome

Programmer React avec des fonctions

Utiliser des fonctions au lieu des classes en React est la manière officielle de programmer dans cet environnement.

personnage.component.tsx

import './personnage.styles.css';

const Personnage = () => {
  const nomDuPersonnage = 'Fluffy McChat';
  const photoDuPersonnage = 'https://placekitten.com/300/300';
  const adresseDuPersonnage = '123 Ave Des Félins';

  return (
    <div className="container">
      <div className="photo">
        <img src={photoDuPersonnage} />
      </div>
      <div className="info">
        <p>{nomDuPersonnage}</p>
        <p className="address">{adresseDuPersonnage}</p>
      </div>
    </div>
  );
};

export default Personnage;

app.tsx

import { useState } from 'react';
import Personnage from './components/personnage.component';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  return <Personnage />;
}

export default App;

Affichage du projet personnage - base

CodeSandbox

Démo - Personnage - Base

Manuel

Learn React

Passage de paramètres avec les props

1. Définir la liste des paramètres dans une interface
2. L’ajouter comme props à la fonction de la composante
3. Utiliser les paramètres lors de l’instanciation de la composante

personnage.component.tsx

import './personnage.styles.css';

interface IPersonnageProps {
  nom: string;
  photo: string;
  adresse: string;
}

const Personnage = (props: IPersonnageProps) => {
  return (
    <div className="container">
      <div className="photo">
        <img src={props.photo} />
      </div>
      <div className="info">
        <p>{props.nom}</p>
        <p className="address">{props.adresse}</p>
      </div>
    </div>
  );
};

export default Personnage;

app.tsx

import Personnage from './components/personnage.component';
import './App.css';

function App() {
  const nomDuPersonnage = 'Fluffy McChat';
  const photoDuPersonnage = 'https://placekitten.com/300/300';
  const adresseDuPersonnage = '123 Ave Des Félins';

  return (
    <>
      <Personnage
        nom={nomDuPersonnage}
        photo={photoDuPersonnage}
        adresse={adresseDuPersonnage}
      />
      <Personnage
        nom="Charmin Ledoux"
        photo="https://placekitten.com/300/300"
        adresse="444 de le Bête"
      />
    </>
  );
}

export default App;

Affichage du projet personnage - base avec props

CodeSandbox

Démo - Personnage - Props

Manuel

Props

Les hooks - useState

• Conserve l’état d’une variable
• Réagit lorsque la valeur change

app.tsx

import Personnage from './components/personnage.component';
import { useState } from 'react';
import './App.css';

function App() {
  const [nom, setNom] = useState('');

  const nomDuPersonnage = 'Fluffy McChat';
  const photoDuPersonnage = 'https://placekitten.com/300/300';
  const adresseDuPersonnage = '123 Ave Des Félins';

  return (
    <>
      <input value={nom} onChange={(e) => setNom(e.target.value)} />
      <Personnage
        nom={nomDuPersonnage}
        photo={photoDuPersonnage}
        adresse={adresseDuPersonnage}
      />
      <Personnage
        nom={nom}
        photo="https://placekitten.com/300/300"
        adresse="444 de le Bête"
      />
    </>
  );
}

export default App;

Affichage du projet personnage - base avec useState

CodeSandbox

Démo - Personnage - useState

Manuel

useState

Hooks : useEffect

Faire des traitements de données seulement lors d’événements précis, comme le premier render ou lors de changement d’une autre variable.

app.tsx

import Personnage from './components/personnage.component';
import { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [nom, setNom] = useState('');
  const [longueurNom, setLongueurNom] = useState(0);

  useEffect(() => {
    setLongueurNom(nom.length);
  }, [nom]);

  const nomDuPersonnage = 'Fluffy McChat';
  const photoDuPersonnage = 'https://placekitten.com/300/300';
  const adresseDuPersonnage = '123 Ave Des Félins';

  return (
    <>
      <input value={nom} onChange={(e) => setNom(e.target.value)} />
      <span>Le nom a {longueurNom} caractères</span>
      <Personnage
        nom={nomDuPersonnage}
        photo={photoDuPersonnage}
        adresse={adresseDuPersonnage}
      />
      <Personnage
        nom={nom}
        photo="https://placekitten.com/300/300"
        adresse="444 de le Bête"
      />
    </>
  );
}

export default App;

Affichage du projet personnage - base avec useEffect

CodeSandbox

Démo - Personnage - useEffect

Manuel

useEffect