Mise en place de l'environnement de développement

Pour débuter avec React, l'outil de référence reste create-react-app. Il permet d'initialiser un projet prêt à l'emploi sans configuration manuelle fastidieuse de Webpack ou Babel. #### Initialisation via npx

L'utilitaire npx permet d'exécuter des packages Node sans installation globale préalable. Voici comment générer un nouveau projet : ``` npx create-react-app mon-application-web cd mon-application-web npm start

#### Configuration avec TypeScript

L'utilisation de TypeScript apporte une couche de sécurité supplémentaire grâce au typage statique. Pour créer un projet typé dès le départ : ```
npx create-react-app app-typescript --template typescript

Le fichier central de cette configuration est le tsconfig.json. Ce fichier définit les règles de compilation. Voici quelques options clés : - target : Définit la version d'ECMAScript cible (souvent ES5 pour la compatibilité).

• jsx : Définit comment React traite les fichiers JSX (généralement react-jsx pour les versions récentes).
• strict : Active toutes les vérifications de type strictes pour garantir un code robuste.

Comprendre la philosophie React

React se distingue par plusieurs concepts architecturaux majeurs : 1. Flux de données unidirectionnel : Les données descendent des composants parents vers les enfants, facilitant le débogage. 2. DOM Virtuel : React conserve une copie légère du DOM en mémoire. Lors d'un changement, il compare cette copie avec le DOM réel et n'applique que les modifications nécessaires, optimisant ainsi les performances. 3. Composants : L'interface est découpée en blocs isolés et réutilisables. 4. Universalité : La logique apprise peut sa'ppliquer au Web, au mobile (React Native) ou même à la VR (React 360).

L'essentiel du JSX

Le JSX est une extension syntaxique du JavaScript qui ressemble au HTML. Bien que facultatif, il est largement adopté car il rend le code plus lisible. #### Syntaxe et Expressions

Le JSX permet d'injecter du code JavaScript directement dans les balises à l'aide d'accolades. ``` const utilisateur = 'Jean'; const element = Bienvenue, {utilisateur};

#### Rendu Conditionnel

Vous pouvez utiliser les opérateurs logiques ou ternaires pour afficher des éléments selon l'état de l'application : ```
const ZoneStatut = ({ estConnecte }) => {
  return (
    <div>
      {estConnecte ? <p>Session active</p> : <p>Veuillez vous connecter</p>}
    </div>
  );
};

Rendu de Listes

Pour afficher une liste d'éléments, on utilise généralement la méthode map(). Il est crucial de fournir une key unique pour chaque élément afin d'aider React à identifier les changements. ``` const produits = [ { id: 101, label: 'Clavier' }, { id: 102, label: 'Souris' } ];

const ListeProduits = () => (

Gestion du Style et CSS

React offre plusieurs approches pour styliser les composants. L'importation classique de fichiers CSS est la plus simple : ``` import './App.css';

const MonComposant = () => <div className="conteneur-principal">...;

Pour éviter les conflits de noms globaux, les **Modules CSS** sont recommandés. Ils transforment les noms de classes en identifiants uniques. ```
import classes from './Style.module.css';

const BlocMessage = () => <div className={classes.alerte}>Message important</div>;

State vs Props : Le coeur du composant

La distinction entre State et Props est fondamentale pour gérer les données. #### Les Props (Propriétés)

Les props sont les paramètres passés d'un parenet à son anfant. Elles sont immuables (en lecture seule pour l'enfant). ``` interface CarteProps { titre: string; }

const CarteInfo: React.FC<CarteProps> = ({ titre }) => { return {titre}; };

#### Le State (État)

Le state représente les données internes d'un composant qui peuvent évoluer dans le temps (ex: saisie utilisateur, résultat d'API). ```
import React, { useState } from 'react';

const Compteur = () => {
  const [valeur, setValeur] = useState(0);

  return (
    <button onClick={() => setValeur(valeur + 1)}>
      Total : {valeur}
    </button>
  );
};

Notez que la modification de l'état via setValeur déclenche automatiquement une nouvelle phase de rendu pour mettre à jour l'interface utilisateur.