Fondamentaux React Partie 1

Présentation

 Aujourd'hui nous allons plonger dans la premiere partie sur les fondamentaux de React :

• Les composants : Création, utilisation, et organisation des composants React.
• Gestion de l'état : Utilisation du state pour rendre les composants dynamiques et réactifs.

Les composants :

Les applications React sont construites à partir de composants. On peut les définir comme des éléments de l'interface utilisateur ayant leur propre apparence et logique. L'avantage ici réside dans la possibilité d'utiliser, de gérer et de modifier chaque composant individuellement. Ces composants peuvent être basés soit sur des fonctions, soit sur des classes.

Fonction composants

 La facon la plus simple de créer un composant c'est de le mettre dans une fonction :

    function Welcome(){

        return <h1>Bonjour</h1>

    }

 Ce code crée un composant fonctionnel "Welcome" qui retourne un titre affichant "Bonjour". Ce composant peut ensuite être utilisé dans d'autres composants ou dans l'arborescence de rendu de  l'application React.

Composants à base de classes

On peut aussi creer des composants a partir de classe :

import React, { Component } from 'react';

class Welcome extends Component {

  render() {

    return <h1>Bonjour</h1>;

  }

}

export default Welcome;

La méthode render() est une méthode obligatoire pour les composants de classe en React. Elle retourne ce que le composant doit rendre à l'écran. Dans cet exemple, la méthode render() retourne un élément React, en l'occurrence un titre contenant le texte "Bonjour". La ligne export default Welcome signifie qu'il peut être importé et utilisé dans d'autres parties de l'application.

Propriétés (Props)

Les props sont utilisées pour transmettre des arguments aux composants et les configurer. Elles suivent le principe fondamental de React, qui est la hiérarchisation des données : il s'agit d'un flux de données unidirectionnel.

Voici un exemple :

function Welcome(props) {

  return <h1>Bonjour, {props.name}</h1>;

}

ce composant "Welcome" affiche un titre contenant le texte "Bonjour," suivi du contenu de la propriété "name" qui est passée en tant que props. Par exemple, si on utilise ce composant ainsi <Welcome name="Othmane" />, il affichera "Bonjour, Othmane". c'est ce qu'on appelle le rendu d'un composant !

Remarque :

1. Les props sont en lecture seulement (readonly).
2. React est plutôt flexible mais applique une règle stricte : Tout composant React doit agir comme une fonction pure vis-à-vis de ses props.
3. Une fonction pure est une fonction qui ne tente pas de modifier son entrée et qui retourne toujours le même résultat pour la même entrée.

État local

L'état local est ce qui permet aux composants de modifier leur rendu en réponse aux actions de l'utilisateur, aux réponses du réseau ou à d'autres événements similaires, le tout sans violer le principe de React mentionné ci-dessus.

Voici un exemple complet avec un composants à base de classes :

class Clock extends React.Component {

  constructor(props) {

    super(props);

    this.state = {date: new Date()};

  }

  render() {

    return (

      <div>

        <h1>Bonjour, monde !</h1>

        <h2>Il est {this.state.date.toLocaleTimeString()}.</h2>

      </div>

    );

  }

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Clock />);

Le but du composant Clock est d'afficher l'heure actuelle en temps réel. Le constructeur de la classe permet d'initialiser l'état local avec la propriété "date", qui représente la date actuelle.

Les condition de l'état local :

• Ne jamais modifier l'état directement : Comme vu dans l'exemple précédent, le seul endroit où l'on utilise this.state est dans le constructeur. À la place, on utilise setState().
• Les mises à jour de l'état peuvent être asynchrones : Pour garantir la performance, React peut regrouper plusieurs appels à setState() en une seule mise à jour. Cependant, comme this.props et this.state peuvent être mis à jour de façon asynchrone, il est recommandé dans la documentation officielle de React d'utiliser la seconde forme de setState() qui accepte une fonction à la place d'un objet.

Voici un exemple avec une fonction fléchée:

this.setState(function(state, props) {

return {

counter: state.counter + props.increment

};

});

Dans cette fonction, le nouveau compteur est calculé en ajoutant la valeur de l'incrément des props à la valeur actuelle du compteur de l'état, puis il est retourné comme nouvel état.

• Les mises à jour de l’état sont fusionnées : Après l'invocation de setState(), React fusionne les objets qu'on fournit avec l'état actuel, ce qui permet de mettre à jour séparément des variables de l'état. Cependant, la fusion n'est pas profonde, donc certaines parties peuvent être entièrement remplacées.

React native

React Native et React JS partagent des fondamentaux similaires. Cependant, en ce qui concerne les composants, il est important de noter qu'il existe deux types de composants distincts en React Native :

Les composants natives

Il s'agit des éléments graphiques que l'on trouve dans une application React Native, tels que les boutons, les textes, les vues, etc.

Les composants personnalisés

Ici, on fait référence aux composants de base de React qui constituent l'interface utilisateur (voir la partie sur les composants).

En général, les composants natifs sont utilisés dans React Native pour distinguer une application Android d'une application iOS. Lorsqu'un développeur utilise un composant tel que Button dans une application React Native, il est interprété différemment selon la plateforme cible : en android.widget.Button sur Android et en UIButton sur iOS. Cela représente l'avantage ultime de React Native, qui consiste à créer des applications multiplateformes.

Conclusion

La compréhension des fondamentaux est le seul chemin vers la maîtrise de React. Cette semaine, nous avons pu explorer quelques notions importantes, et la semaine prochaine, nous découvrirons la deuxième partie de cet article sur :

• Gestion des événements : Utilisation des événements pour interagir avec les composants.
• Comprendre le cycle de vie des composants : Les différentes phases du cycle de vie d'un composant et leur utilisation.

Références

Composants et props. React. https://fr.legacy.reactjs.org/docs/components-and-props.html (consulté le 16 février 2024)

État et cycle de vie. React. https://fr.legacy.reactjs.org/docs/state-and-lifecycle.html (consulté le 17 février 2024)

Alphorm. (24 avril,2020).  Composants et props sous React - Vidéo Tuto  [Vidéo]. YouTube. https://www.youtube.com/watch?v=jfKNyRrLJI4 (consulté le 16 février 2024)

Comprendre la différence entre composants fonctionnels et composants de classe dans React. Twilio. https://www.twilio.com/fr-fr/blog/react-composants-fonctionnels-classe (consulté le 18 février 2024)

AURÉLIEN ANTONIO ET ALEXIA TOULMET. Réutilisez vos composants avec les props. OpenClassrooms. https://openclassrooms.com/fr/courses/7008001-debutez-avec-react/7135822-reutilisez-vos-composants-avec-les-props (consulté le 18 février 2024)

ZARROUK ANIS, (2022, 6 janvier).Les composants en React Native. Medium. https://azzarroukanis.medium.com/les-composants-en-react-native-c633817d70f3 (consulté le 18 février 2024)

Core Components and APIs. React Native. (8 décembre, 2023). https://reactnative.dev/docs/components-and-apis (consulté le 18 février 2024)