Formation essentielle Day React

Points forts du concept :

1. ReactDOM.render()
2. React.createElement()
3. Accessoires dans React
4. Accès aux listes dans React
6. Déstructuration dans React

1. ReactDOM.render()

Dans React, la fonction ReactDOM.render() est utilisée pour restituer un élément React (ou un composant) dans le DOM. Cette fonction prend deux arguments : l'élément React à restituer et l'élément DOM où vous souhaitez le restituer.

par exemple) Dans cet exemple, ReactDOM.render() affiche un simple "Bonjour, React !" message dans un élément DOM avec l'ID root. Il s'agit de la structure de base que vous verrez dans la plupart des applications React pour monter l'application sur le DOM.

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, React!</h1>;

ReactDOM.render(element, document.getElementById('root'));

2. React.createElement()

La fonction React.createElement() est une autre façon de créer des éléments React. Bien que JSX (comme dans l'exemple ci-dessus) soit le moyen le plus courant de créer des éléments, il est important de comprendre React.createElement() car c'est le mécanisme sous-jacent derrière JSX.

e.g.) Dans cet exemple, React.createElement() crée un élément h1 avec le contenu "Bonjour, React !". Le premier argument est le type d'élément (dans ce cas, h1), le deuxième argument est les accessoires (ici, null car nous n'avons pas d'accessoires), et le troisième argument est les enfants, qui sont les contenu de l'élément.

import React from 'react';
import ReactDOM from 'react-dom';

const element = React.createElement('h1', null, 'Hello, React!');

ReactDOM.render(element, document.getElementById('root'));

3. Accessoires dans React

Les accessoires (abréviation de « propriétés ») sont la façon dont les données sont transmises d'un composant à un autre dans React. Ils sont en lecture seule et vous aident à personnaliser vos composants en transmettant différentes valeurs.

par exemple) Dans cet exemple, le composant Greeting reçoit un accessoire name et l'utilise pour afficher un message personnalisé. Les accessoires sont un concept clé dans React, permettant aux composants d'être dynamiques et réutilisables.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));

4. Accéder aux listes dans React

Lors du rendu des listes dans React, vous mappez généralement sur un tableau et renvoyez un élément pour chaque élément de la liste. Il est important d'inclure un accessoire clé pour aider React à mettre à jour et à gérer efficacement la liste.

par exemple) Dans cet exemple, ItemList prend un tableau de éléments comme accessoire, et pour chaque élément du tableau, il crée un li élément avec une clé unique.

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' },
];

ReactDOM.render(<ItemList items={items} />, document.getElementById('root'));

5.

est un composant wrapper que vous pouvez utiliser en mode développement pour vous aider à identifier les problèmes potentiels dans votre application React. Il ne rend aucune interface utilisateur visible, mais il active des vérifications et des avertissements supplémentaires.

par exemple) Lorsque vous encapsulez votre application (ou une partie de celle-ci) dans , React effectuera quelques vérifications pour garantir que votre code suit les meilleures pratiques, vous aidant ainsi à détecter les problèmes dès le début. le processus de développement.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

6. Déstructuration dans React

La déstructuration est une fonctionnalité JavaScript qui vous permet de décompresser les valeurs de tableaux ou les propriétés d'objets en variables distinctes. Dans React, il est couramment utilisé dans les composants fonctionnels pour extraire les accessoires plus proprement.

par exemple) Dans cet exemple, au lieu d'accéder à props.name, nous utilisons la déstructuration pour extraire le nom directement de l'objet props, rendant le code plus propre et plus facile à lire.

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

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));

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!