Hello World, votre première app en React

Hello les codeurs, Aujourd’hui, nous allons construire ensemble votre première app en React.js, sous la forme d’un “Hello, World!” très simple. Bon, j’imagine que si vous êtes là, c’est que vous savez déjà ce qu’est React. Cependant, pour ceux qui auraient besoin d’un rappel, React.js est une librairie Javascript créée par Facebook. Cette librairie, ou “framework”, permet de créer des interfaces utilisateur réactives (React-ives, vous saisissez?) qui pourront être modifiées et manipulées très facilement. Pour notre projet nous utiliserons JSFiddle, la plateforme de coding en ligne et plus précisément notre boilerplate React (voir le tutoriel Configurer votre projet React sur JSFiddle).
Tout est prêt? Allez commençons!

Création du contenu

Notre but dans ce tutoriel est tout simplement d’afficher la chaine de caractères “Hello, World!” en utilisant React. Pour commencer, nous créons une constante “texte” dans laquelle nous allons stocker notre chaine de caractères.

const texte = 'Hello, World!'

N.B.: L’invocation “const” est une feature du Javascript ES6. Pour mieux comprendre comment l’utiliser je vous invite à lire mon article Top 5 des features Javascript ES6.
La prochaine étape est d’afficher notre texte avec React. Pour ce faire, nous utilisons la librairie ReactDOM, qui est une librairie fille de React, et qui permet tout simplement d’afficher le contenu sur votre page.
Nous appelons la méthode “render” de ReactDOM en lui passant deux éléments, en arguments:

1. le contenu à afficher
2. une référence vers le container où l’on veut que notre contenu soit injecté

Référence vers le container

Nous venons de créer notre contenu – à savoir, la chaine de caractères “Hello, World!”. Il est maintenant temps de créer la référence vers le container où notre contenu sera injecté. Si vous regardez dans l’onglet HTML de notre projet JSFiddle, vous pouvez voir qu’il existe déjà une balise <div> ayant comme id “app”.

Nous allons stocker une référence vers cette balise <div> pour la passer à la méthode “render” de la librairie ReactDOM. À la suite du code écrit précédemment, nous ajoutons:

// Nous stockons une référence vers le <div> avec l'id app
// pour le passer par la suite à la méthode render() de ReactDOM

const divApp = document.getElementById('app')

Affichage du contenu avec ReactDOM.render

Nous pouvons alors passer nos deux arguments à la méthode ReactDOM.render().

ReactDOM.render(texte, divApp)

Et voilà! Il n’y a plus qu’à cliquer sur le bouton “Run” en haut à gauche du site JSFiddle. Et tadaa! Notre chaine de caractères est affichée dans l’onglet de résultat:

Ajoutons un peu de CSS pour rendre notre démo plus sympathique:

#app {
  width: 100%;
  font-size: 26pt;
  font-family: Helvetica Neu, sans-serif;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
    background: linear-gradient(to right, #00A896 0%, #1F3254 100%);
    -webkit-text-fill-color: white;
}

Ce qui nous donne ce résultat, après avoir cliqué sur le bouton “Run” à nouveau:

Plutôt pas mal! N’hésitez pas à jouer avec le code que nous avons obtenu ensemble. Modifiez le texte ou le CSS, expérimentez le plus possible.

Petit exo

Essayez de changer le contenu passé à la méthode “render”. Essayez avec un bloc de code HTML, par exemple un <div>, ou une liste <ul> avec deux trois enfants <li>. Quel est le résultat?

À la prochaine!

Merci d’avoir lu ce tutoriel! J’espère qu’il vous aura donné envie de continuer à apprendre React, pas à pas, avec react-facile.fr. Vous pouvez retrouver l’ensemble des tutoriels ici. À bientôt! Benjamin