Chaque concept React expliqué en minutes

React est une bibliothèque JavaScript qui vous permet de développer du code front-end en quelques minutes. Il dispose de méthodes et de fonctions prédéfinies pour effectuer certaines tâches. React as a library comprend des termes complexes tels que réconciliation, état, accessoires, etc. Que signifient-ils réellement ?

Dans cet article, vous découvrirez plus simplement ce concept exagéré.

1. Composants

Les composants sont des petits morceaux de code réutilisables qui renvoient un élément React à restituer sur une page Web. Il s'agit d'un groupe de code qui constitue une seule partie de la page Web, comme des boutons, une barre de navigation, des cartes, etc. C'est comme une fonction JavaScript mais renvoie un élément rendu. Il accepte des paramètres appelés "Props". Les composants sont nommés en majuscules.

Exemple de composant fonctionnel

function Heading(props) {
  return <h1>Join us, {props.name}!</h1>;
}

Remarque :

• Les composants fonctionnels sont recommandés au lieu des composants basés sur les classes.
• Les composants fonctionnels sont souvent appelés composants sans état.

2. JSX

JSX est du JavaScript XML, qui nous permet d'écrire du HTML dans React. Il introduit des balises et des attributs de type XML pour créer des éléments React. Il facilite la création de composants React en vous permettant d'écrire du code de type HTML dans des fichiers .jsx. Au lieu d'utiliser du JavaScript compliqué, JSX rend le code lisible et propre. React DOM utilise camelCase pour nommer les attributs tels que htmlFor, onClick.

Exemple de JSX

<h1 className="head">This is H1!</h1>

3. Fragments

Fragments dans React vous permet de renvoyer plusieurs éléments d'un composant. Il regroupe la liste des éléments sans créer de nœuds DOM supplémentaires. Il nettoie tous les divs supplémentaires du DOM. Cela restitue rapidement l'interface utilisateur.

Exemple de fragments

const App = () => {
  return  (
    <>
      <h1>Eat</h1>
      <button>Learn more</button>
      <p>Code is Fun</p>
      <button>Repeat</button>
    </>
  );
}

Remarque :

• Les fragments rendent le code plus propre et lisible.
• Ils sont efficaces en mémoire.
• Il ne peut pas avoir de styles ni de clés CSS.

4. Accessoires

"Props" est un mot-clé spécial dans React qui signifie propriétés. Il est utilisé pour transférer des données entre les composants. Le suivi du transfert de données est unidirectionnel, c'est-à-dire du composant parent au composant enfant.

Exemple d'accessoires

function Head(props) {
  return <p>{props.children}</p>;
}

Remarque : Props est en lecture seule, ce qui garantit que les composants enfants ne manipulent pas la valeur provenant du composant parent.

5. État

Les composants doivent garder une trace de certaines valeurs lorsque l'utilisateur interagit. Disons que le bouton bascule du thème du mode clair/sombre change sa valeur (de clair à foncé et vice versa) lorsqu'un utilisateur clique sur le bouton. Les composants doivent mémoriser la valeur actuelle du thème. Dans React, ce type de mémoire spécifique aux composants est appelé état.

L'état est défini à l'aide d'un hook useState() ; nous en reparlerons plus tard.

Exemple de définition d'état

const [index, setIndex] = useState(0)

Remarque : C'est toujours une bonne pratique de définir l'état dans un composant de niveau supérieur pour le partager facilement avec d'autres composants enfants et garantir une source unique de vérité.

6. Méthodes de cycle de vie

Les méthodes de cycle de vie sont des fonctions spéciales que vous pouvez utiliser dans les classes React pour effectuer des actions à différentes étapes de l'existence d'un composant. Ces étapes sont :

• Montage : lorsqu'un composant est créé et inséré pour la première fois dans le DOM.
• Mise à jour : lorsque les accessoires ou l'état d'un composant changent, ce qui entraîne un nouveau rendu du composant.
• Démontage : Lorsqu'un composant est supprimé du DOM.

7. Pureté

La pureté dans la programmation fonctionnelle, c'est lorsqu'une même entrée donnée renvoie la même sortie. Les entrées sont le seul facteur qui détermine la sortie, alors la fonction est dite pure.

Dans React, un composant est dit pur lorsqu'il renvoie la même sortie pour la même entrée (à savoir les accessoires)

8. Mode strict

Le mode strict est une fonctionnalité de développement de React qui permet des fonctionnalités de sécurité supplémentaires pour améliorer la qualité du code. Il affiche des avertissements concernant les erreurs potentielles et les bogues dans le code. Il enregistre l'avertissement dans la console du navigateur.

Exemple de mode strict

import { StrictMode } from 'react';

function App() {
  return (
    <>
     <StrictMode>
        <Header />
        <Sidebar />
        <Content />
        <Footer />
     </StrictMode>
    </>
  )
}

Mode strict dans React affichant la console du navigateur

9. Crochets

Hooks dans React permet d'utiliser l'état et d'autres fonctionnalités de React sans écrire de composants de classe. Les hooks sont des fonctions qui donnent accès à la gestion de l'état, aux effets secondaires et à d'autres fonctionnalités de React.

Quelques hooks couramment utilisés : useState, useMemo, useRef, etc.

Exemple de crochets

import React, { useState } from "react"; // Importing useState hook;

function FavoriteColor() {
  const [color, setColor] = useState("red"); // Initializing the state and setter function;

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")} // Updating the state;
        >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")} // Updating the state;
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("yellow")} // Updating the state;
      >Yellow</button>
      </>
  );
}

Remarque :

• Hooks can only be called inside React function components.
• Hooks can only be called at the top level of a component.
• Hooks cannot be conditional.

10. Context API

The Context API is used to share data like state, functions across the component tree without passing props down manually at every level. It avoids prop drilling by simplifying state management and sharing data across the component. With Context API the data is shared directly with the child component who will consume it.

The useContext() method is used to create a context. This function returns a context object with two components – a Provider and a Consumer.

The Provider is used to wrap the part of your component tree where you want the context to be available. It accepts a compulsory value prop that holds the data you want to share across other components.

The useContext hook is used to access the data.

Example of Context API

Create a context using createContext() method. Wrap child components in the Context Provider and supply the state value.

import { useState, createContext} from "react";

const UserContext = createContext();

function ParentCounter() {
  const [count, setCount] = useState(10);

  return (
    <UserContext.Provider value={count}>
      <h1>{`Current Count: ${count}!`}</h1>
      <Button />
    </UserContext.Provider>
  );
}

Use useContext hook to access the value of age.

import { useContext } from "react";

function GrandChildConsumer() {
  const age = useContext(UserContext);

  return (
    <>
      <h1>This is GrandChildConsumer</h1>
      <h2>{`Current Count: ${count}`}</h2>
    </>
  );
}

Note: The `useContext` hook is often used instead of Consumer for better readability and simplicity.

11. Lists and Keys

A Key is a special kind of attribute for list items in React. It acts as a unique identifier for each items when it is updated, deleted, or added.

Assigning index of the item as the Key is discouraged because if the items are rearranged it will affect the expected behavior.

Imagine in shopping cart you have 10 items added and each item have a unique index as a Key. Now, you decide to remove the first and fifth item from the cart. When the items are removed the indexing will change; the second item will become first and sixth item will become fifth item.

Example of Lists and Keys

const fruits = ["apple", "banana", "orange"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}> {fruit} </li>
      ))}
    </ul>
  );
}

Note:

• It is recommended to use string as a `Key` that uniquely identifies the item in the list.
• Third-party libraries like UUID offer the functionality to create unique keys.

12. Form: Controlled & Uncontrolled Components

React forms allows to collect and manage user input better than traditional HTML form. These forms are built using components and store the user inputs into state. There are two types of components:

Controlled Components

In Controlled components, the form's state is managed by the component himself. This is the recommended approach for managing form data in React. When the user interacts with the form (e.g., typing in an input field), the component's state is updated to reflect the changes.

Example of Controlled Component

function ControlledInput() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" value={name} onChange={handleChange} />
      <p>Your name is: {name}</p>
    </div>
  );
}

Uncontrolled Components

Uncontrolled components rely on the DOM to manage the form data. The component doesn't directly control the form's state, but it can access the values using DOM methods like ref.

Example of Uncontrolled Component

function UncontrolledInput() {
  const nameRef = useRef(null);

  const handleClick = () => {
    console.log(nameRef.current.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" ref={nameRef} />
      <button onClick={handleClick}>Get Name</button>
    </div>
  );
}

Note:

• Controlled components provides form validation because the user's input is instantly reflected due to use of state.
• Form validation is not possible in uncontrolled components because the user's input can only be accessed after the form is submitted.

13. React Router

• Introduction to React Router for navigation
• Basic setup and usage
• Example: Creating routes and navigating between pages

React Router is a standard library for routing in React. It enables navigation among various components in the React app. It allows changing the browser URL and syncing the UI with the URL. React Router is important for creating single-page applications (SPA) with navigation features.

First, you need to install React Router from your terminal.

Installing React Router

# If you are using npm
npm install react-router-dom

# If you are using yarn
yarn add react-router-dom

Example of React Router

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
      </Routes>
    </BrowserRouter>
  );
}

First wrap your content into the . Then we define and inside that introduces the for navigation. has path which specifies URL of the page and element attribute which specifies the component that needs to be rendered on the defined path.

Note:

• Une application peut avoir plusieurs < Itinéraires >.
• < Itinéraire > peut être imbriqué.
• `react-router-dom` a également < Lien > et &Lt ; Sortie > Composant pour la navigation.

Conclusion

La meilleure façon d'apprendre n'importe quel langage de programmation est de pratiquer davantage de projets. Construisez de petits projets et expérimentez les concepts.

Si vous trouvez cet article utile, n'oubliez pas de continuer à me montrer de l'amour. Jusqu'à la prochaine fois, aimez, partagez et apprenez.

Vous pouvez également rester connecté avec moi en me suivant ici et sur X, GitHub et LinkedIn.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!