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 :

Situez vous dans le dossier où vous désirez créer l’application (le dossier de l’application sera automatiquement créé à la prochaine étape)
Exécutez la commande de création d’application :
console
```
npm create vite@latest
```

Entrez le nom de votre projet :

console

> npx
> "create-vite"
│
◆  Project name:
│  votre-nom-de-projet

Choisir React :

console

◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ● React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
└

Choisir Typescript :

console

◆  Select a variant:
│  ● TypeScript
│  ○ TypeScript + React Compiler
│  ○ TypeScript + SWC
│  ○ JavaScript
│  ○ JavaScript + React Compiler
│  ○ JavaScript + SWC
│  ○ React Router v7 ↗
│  ○ TanStack Router ↗
│  ○ RedwoodSDK ↗
│  ○ RSC ↗
└

Choisir No :

console

◆  Use rolldown-vite (Experimental)?:
│  ○ Yes
│  ● No
└

Choisir Yes :

console

◆  Install with npm and start now?
│  ● Yes / ○ No
└

react-vite — 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-dev-tools — 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.tsx

import './Personnage.css';

const Personnage = () => {
  const nomDuPersonnage = 'Fluffy McChat';
  const photoDuPersonnage = 'https://placecats.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="addresse">{adresseDuPersonnage}</p>
      </div>
    </div>
  );
};

export default Personnage;

Personnage.css

.container {
  max-width: 600px;
  width: 400px;
  margin: 0 auto;
  background-color: #fff;
  color: #000;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.photo {
  text-align: center;
  margin-bottom: 20px;
}

.photo img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.info {
  margin-bottom: 20px;
}

.address {
  font-style: italic;
}

app.tsx

import './App.css';
import Personnage from '../Personnage';

function App() {
  return (
    <>
      <Personnage />
    </>
  );
}

export default App;

react-personnage-base — Affichage du projet personnage - base

Manuel

Learn React

Passage de paramètres avec les props¶

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

Personnage.tsx

import "./Personnage.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="addresse">{props.adresse}</p>
      </div>
    </div>
  );
};

export default Personnage;

app.tsx

import "./App.css";
import Personnage from "../Personnage";

function App() {
  const personnage = {
    nom: "Fluffy McChat",
    photo: "https://placecats.com/300/300",
    adresse: "123 Ave Des Félins",
  };

  const nomDuPersonnage = "Fanta le Chat";
  const photoDuPersonnage = "https://placecats.com/300/300";
  const adresseDuPersonnage = "12123 Ave Des Félins";

  return (
    <>
      <Personnage {...personnage} key={1} />
      <Personnage
        nom={nomDuPersonnage}
        photo={photoDuPersonnage}
        adresse={adresseDuPersonnage}
        key={2}
      />
    </>
  );
}

export default App;

Manuel

Props