Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

1. Les types de composants React

Lorsque nous avons ajouté notre premier composant à notre application, il y a une chose dont je ne vous ai pas parlé mais qui a son importance. En fait, il existe deux types de composants dans React :

  • Les composants déclarés avec une fonction, comme nous l’avons fait.
  • Les composants déclarés avec des classes.

Je vous propose de jeter un coup d’oeil à deux exemples de code, ce sera plus concret. D’abord, notre composant précédent, écrit avec une fonction :

import React, { FunctionComponent } from 'react';

const App: FunctionComponent = () => {
  const name: string = "React";

  return (
    <h1>Hello, {name} !</h1>
  );
}

export default App;

Rien de nouveau de ce côté. Maintenant, regarder le composant suivant, déclaré en utilisant une classe :

import React from 'react';

export default class App extends React.Component {
  const name: string = "React";
  
  render() {
    return <h1>Hello, {name}</h1>;
  }
}

Dans ces deux composants, on remarque qu’ils sont légèrement différents au niveau de la syntaxe, bien qu’ils s’occupent exactement de la même chose.

Dans ce cas, pourquoi est-ce que React propose deux syntaxes différentes, à part pour nous embêter ? 🤔

Et bien, même si apparemment ces deux composants sont quasiment identiques, utiliser l’un ou l’autre implique beaucoup de différences pour la suite. En fait, c’est même un choix d’architecture complètement différent pour votre application. Je vous propose tout de suite de voir quel type de composants nous allons choisir.