Configuration initiale de React

Pour créer une application React, utilisez l'outil officiel Create React App. Exécutez les commandes suivantes dans votre terminal :

npm install -g create-react-app
create-react-app mon-projet
cd mon-projet
npm run start

Premier composant React

Voici un exemple de base pour afficher un message dans le DOM :

import ReactDOM from 'react-dom';
const element = <h1>Bonjour, React !</h1>;
ReactDOM.render(element, document.getElementById('racine'));

Utilistaion de JSX

JSX permet d'écrire du balisage dans du JavaScript. Voici un exemple avec une fonction :

function obtenirNomComplet(utilisateur) {
  return utilisateur.prenom + ' ' + utilisateur.nom;
}

const personne = {
  prenom: 'Jean',
  nom: 'Dupont'
};

const jsxElement = (
  <h2>
    Bienvenue, {obtenirNomComplet(personne)} !
  </h2>
);

ReactDOM.render(jsxElement, document.getElementById('racine'));

Liaison du contexte 'this'

Pour maintenir le contexte dans les gestionnaires d'événements, utilisez la méthode bind :

<input 
  onChange={this.gererChangement.bind(this)}
  valeur={this.state.valeurEntree} />

Itération sur les listes

Parcourez un tableau pour générer des éléments de liste :

<ul>
  {this.state.elements.map((item, index) => {
    return <li key={index}>{item}</li>;
  })}
</ul>

Commentaires dans JSX

Les commentaires s'écrivent ainsi dans le code JSX :

{/* Ceci est un commentaire multi-lignes */}
{
  // Ceci est un commentaire sur une seule ligne
}

Atributs HTML spécifiques

Utilisez className au lieu de class, et htmlFor au lieu de for en JSX.

Injection de HTML brut

Pour interpréter des chaînes HTML, utilisez dangerouslySetInnerHTML avec précaution :

<div dangerouslySetInnerHTML={{ __html: contenu }} />

Références aux éléments DOM

Accédez aux éléments DOM via des références :

<div ref={`groupeListe${index}`} />
const element = this.refs[`groupeListe${index}`];

Passage de données entre composants

Les composants parents passent des données aux enfants via les props, et les enfants communiquent via des fonctions :

<ElementTache
  contenu={item}
  position={index}
  supprimer={this.gererSuppression.bind(this)}
  key={index} />

<li onClick={this.clicElement.bind(this)}>{this.props.contenu}</li>
clicElement() {
  this.props.supprimer(this.props.position);
}

Mise à jour de l'état avec setState

Il existe deux méthodes pour mettre à jour l'état. La première utilise un objet :

this.setState({
  valeurEntree: e.target.value
});

La seconde méthode utilise une fonction pour un traitement asynchrone :

this.setState(etatPrecedent => ({
  liste: [...etatPrecedent.liste, etatPrecedent.valeurEntree],
  valeurEntree: ''
}));

Pour une mise à jour synchrone, encapsulez setState dans une promesse :

new Promise(resoudre => {
  this.setState({ hauteurListe }, resoudre);
});

Outils de développement

Installez l'extension React Developer Tools pour faciliter le débogage dans votre navigateur.

Validation des props avec PropTypes

Définissez les types et valeurs par défaut pour les props :

import PropTypes from 'prop-types';
ElementTache.propTypes = {
  contenu: PropTypes.string,
  position: PropTypes.number.isRequired,
  supprimer: PropTypes.func
};
ElementTache.defaultProps = {
  messageTest: 'Bonjour le monde'
};

Relation entre état, props et rendu

Chaque changement dans l'état ou les props déclenche un nouveau rendu du composant. Le rendu des composants enfants est aussi appelé lors du rendu du parent.

Le DOM virtuel

React utilise une représentation JavaScript du DOM appelée DOM virtuel. Lors d'un changement d'état, une nouvelle structure virtuelle est comparée à l'ancienne pour ne mettre à jour que les différences. Cela améliore les performances et permet une portabilité multi-plateforme comme avec React Native.

L'algorithme de diff

L'algorithme de diff optimise les comapraisons en regroupant les mises à jour et en comparant les nœuds couche par couche avec une complexité temporelle de O(n). L'utilisation de clés uniques aide à préserver l'identité des éléments lors des itérations.

Cycle de vie des composants

Les méthodes du cycle de vie sont appelées automatiquement à différentes phases :

• Montage : componentWillMount, render, componentDidMount (une seule fois).
• Mise à jour : changements d'état ou de props via shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate.
• Démontage : componentWillUnmount.

Utilisez shouldComponentUpdate pour optimiser les performances et componentDidMount pour les requêtes asynchrones.

Animatiosn avec React

Implémentez des animations en utilisant les transitions CSS, les animations CSS, ou des bibliothèques comme react-transition-group avec des composants tels que CSSTransition.