Composants React

Une brève introduction aux composants React

Un composant est un élément d'interface isolé. Par exemple, dans une page d'accueil de blog classique, vous pouvez trouver le composant Sidebar et le composant Blog Posts List. Ils sont à leur tour composés de composants eux-mêmes, vous pouvez donc avoir une liste de composants d'articles de blog, chacun pour chaque article de blog, et chacun avec ses propres propriétés particulières.

A react component

React le rend très simple: tout est un composant.

Même les balises HTML simples sont des composants à part entière, et elles sont ajoutées par défaut.

Les 2 lignes suivantes sont équivalentes, elles font la même chose. Un avecJSX, un sans, en injectant<h1>Hello World!</h1>dans un élément avec idapp.

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1>Hello World!</h1>, document.getElementById(‘app’))
ReactDOM.render(
React.createElement(‘h1’, null, ‘Hello World!’),
document.getElementById(‘app’)
)

Voir,React.createElementnous a exposé une API pour créer leh1composant. La modification du premier paramètre de cette méthode vous permet de créer différentes balises. Le deuxième paramètre est un objet d'accessoires, dans ce cas nous n'en avons pas besoin, donc nous passonsnull.

C'est ainsi que nous pouvons utiliser React pour travailler avec les composants HTML intégrés, mais vous les dépasserez rapidement. Ce dans quoi React excelle, c'est de nous permettre de composer une interface utilisateur en composant des composants personnalisés.

Composants personnalisés

Il existe 2 façons de définir un composant dans React.

Un composant de fonction:

const BlogPostExcerpt = () => {
  return (
    <div>
      <h1>Title</h1>
      <p>Description</p>
    </div>
  )
}

Un composant de classe:

import React, { Component } from 'react'
class BlogPostExcerpt extends Component {
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
}

Jusqu'à récemment, les composants de classe étaient le seul moyen de définir un composant qui avait son propre état et pouvait accéder aux méthodes du cycle de vie afin que vous puissiez faire des choses lorsque le composant a été rendu, mis à jour ou supprimé pour la première fois.

React Hooks a changé cela, donc nos composants de fonction sont maintenant beaucoup plus puissants que jamais et je pense que nous verrons de moins en moins de composants de classe à l'avenir, même si ce sera toujours un moyen parfaitement valable de créer des composants.

Il existe également une troisième syntaxe qui utilise leES5syntaxe, sans les classes:

import React from 'react'
React.createClass({
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
})

Vous verrez rarement cela dans le moderne,> ES6bases de code.

Téléchargez mon gratuitManuel React

Composants React

Une brève introduction aux composants React

Composants personnalisés

Plus de tutoriels de réaction: