React par la pratique – 2 : Votre premier composant React
Sommaire
- Introduction
- Préparer l’environnement de développement
- Votre premier composant React
- State et props
- Routage avec React Router 4
- Gérer les Layouts avec React Router 4
- Le Pattern Flux et son implémentation Redux
- Redux : Cas pratique
Introduction
Dans l’article précédent on a vu comment préparer notre environnement de développement pour pouvoir utiliser une version moderne de Javascript supportant la syntaxe React.
Tout est en place donc pour créer notre premier composant, sur ce on va créer un classique : le Hello World.
Avant de commencer
Je vous recommande de lire la documentation officielle de React afin de comprendre tout les concepts derrière les composants React, car je suppose qu’elle est très bien faite.
En effet dans cet article je vais aborder les aspects techniques et qui peuvent causer des problèmes quand on commence avec React.
Ressources à consulter:
Création d’un composant React
1 – Installer les dépendances
commencez donc par installer React avec la commande ci-dessous:
npm i --save react react-dom
Ceci va installer et ajouter au fichier package.json les deux dépendances suivantes :
* react: La librairie principale.
* react-dom: pour permettre à React de manipuler le DOM et ainsi d’être utilisé dans un navigateur.
2 – Création d’un composant simple
On va ensuite créer un simple composant qui affiche le message « Hello World »
Pour faire cela on a le choix entre deux déclarations possibles:
Option 1 : Composant React:
// file : src/App.jsx
import React from 'react';
export default class App extends React.Component {
render() {
return <div>Hello world</div>
}
}
Dans la première déclaration on a :
- un composant avec un état interne ( state )
- de la possibilité de contrôler tout se qui se passe durant son cycle de vie via les hooks ( componentDidMount, componentDidUpdate … )
Option 2 : Utiliser un « Pure function »:
export default function App() {
return <div>Hello world</div>
}
Cette déclaration quand à elle propose un composant très léger qui ne fait que l’affichage du message.
Jusque là on n’a fait que déclarer le composant, on va ensuite l’utiliser dans notre page, on dit alors qu’on monte dans notre page.
Finalement on modifie le point d’entrée de l’application pour utiliser ce composant.
// file : src/index.jsx
import React from 'react';
import { render } from 'react-dom';
import App from './App'
render( <App />, document.getElementById('react-app'))
ceci va monter le composant App dans l’élément HTML ayant l’ID ‘react-app‘.
Pour terminer voici donc le contenu du fichier **index.html ** contenant cet élément.
<!-- file : src/index.jsx -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemple React</title>
</head>
<body>
<div id="react-app"></div>
</body>
</html>
à noter que webpack se charge d’injecter le fichier javascript compilé dans la page HTML sous le nom de ** bundle.js**.
Code source
Le code source est disponible sur github au tag suivant step-1 pour pointer directement sur cette étape.
pour rappel, voici la commande pour choisir un tag avec git :
git checkout step-1
Suite
Dans le prochain chapitre on va aborder les concepts de State et props à travers la création d’un composant.
3 commentaires