Partielo | Créer mon premier composant

Définition

Render

Les composants React implémentent une méthode render () qui prend des données en entrée et retourne ce qui doit être affiché. Cet exemple utilise une syntaxe qui ressemble à du XML et qu’on appelle JSX. Les données passées au composant sont accessibles dans render () via this.props. The ReactDOM.render () function takes two arguments, HTML code and an HTML element. The purpose of the function is to display the specified HTML code inside the specified HTML element.

Écrivons maintenant notre premier composant.

Ici, je vais utiliser des composants qu’on appelle functional components (composants fonction), c’est-à-dire une fonction qui retourne un élément React. Nous rentrerons un peu plus dans le détail des composants au chapitre suivant.

Commençons avec cette première fonction, MyComponent :

function MyComponent() {
    return (<div>Hello OpenClassrooms ????</div>)
}

En copiant ce code dans la partie JS, rien ne se passe. Pas de panique ! C'est normal : il vous reste encore à attacher votre composant React à votre HTML.

Ici, nous avons déclaré un composant avec une fonction classique. Mais notez que vous pouvez aussi bien utiliser des fonctions fléchées qui s’écriraient const MyComponent = () => div /> .

Attachez React à votre HTML

On va dès maintenant utiliser ReactDOM pour s'attacher à notre HTML.

Dans le snippet ci-dessous, l’id react-goes-here permet de préciser où notre app React va vivre dans notre HTML. Ensuite, on va ordonner à ReactDOM de générer (render) notre composant React qui s’appelle MyComponent.

ReactDOM.render(<MyComponent />, document.getElementById("react-goes-here"))

Et tadaaa ????

Notre composant s'affiche !