• 30 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 09/09/2020

Faites vos premiers pas avec les components React

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Vous venez de créer votre première application React Native, plus précisément une CRNA. C'est déjà pas mal. On a vu son architecture, son rendu, son rechargement, mais on ne sait toujours pas comment c'est développé. Le moment est venu de mettre les mains dans le code et de jouer avec les différents composants de React Native. Enfin ! :pirate:

Dans ce chapitre, on va découvrir une notion très importante du développement React, si ce n'est LA notion la plus importante : les components. Dans mes souvenirs, j'ai mis du temps à comprendre le fonctionnement des components et les avantages par rapport à d'autres concepts. Je vais essayer de répondre à toutes les questions que j'ai pu me poser et que vous vous poserez certainement, ce qui explique un peu la longueur du chapitre. Ne vous inquiétez pas si vous ne saisissez pas tout tout de suite, c'est en pratiquant qu'on apprend le plus. ;)

Les components

C'est quoi, concrètement, un component ?

Le component est LE concept clé de React. Facebook a créé son framework entièrement autour de ce concept, ce qui signifie que la notion de component s'applique aussi bien pour du React Native que du React JS (développement web).

Un component est un élément graphique affiché par l'interface utilisateur. Toutes les vues React sont composées entièrement de components.
Les éléments graphiques, vues, boutons, textes, images, listes, etc., sont des components. Si vous créez une vue Home avec une image et un texte, votre vue Home est un component et elle possède un component image et un component texte. 

Cette notion de component est très pratique. Elle permet de découper nos interfaces utilisateur en pièces indépendantes et réutilisables, et de penser à chaque pièce séparément (définition React).

Prenez pour exemple un bureau avec un ordinateur portable dessus.

Avec React, vous allez créer un component bureau qui contient un component ordinateur portable. Étant donné que les components sont des pièces indépendantes, vous pouvez très facilement réutiliser le component ordinateur portable dans un autre component, une table par exemple.

Sans le concept de component de React, l'ordinateur portable est lié au bureau, et on ne peut pas facilement le réutiliser sur une table. C'est bête quand même pour un ordinateur portable, non ? :lol:

Penchez-vous à nouveau sur le fichier App.js, le point d'entrée de notre application. Regardez la déclaration de la classe App :

export default class App extends React.Component

App correspond au point d'entrée de notre application et c'est lui-même un component. Je ne vous avais pas menti quand je vous disais que tout React est construit autour de ce concept. ;)

Toutefois, il ne faut pas tout mélanger lorsque l'on parle de component. Il en existe deux types.

Components React Native

Les components React Native, plus couramment appelés components, tout court, correspondent aux éléments graphiques simples que l'on retrouve sur les applications mobiles natives : Text, Button, Image, ScrollView, View, WebView, etc. Ces components existent déjà et sont mis à disposition par React Native. La liste est disponible sur la documentation des components React Native. Nous allons construire nos vues avec ces components.

Components customs

Vous pouvez créer vos propres components. On va en créer énormément dans ce cours.

Le mot custom est un peu inapproprié, je trouve. Il laisse à penser que l'on peut créer un nouveau type de component React Native. En réalité, pas du tout. Un component custom est un template regroupant plusieurs components React Native. Vous n'avez rien compris ? ^^ Je m'explique avec un exemple.

Imaginez que, dans notre application, nous ayons besoin d'afficher le profil de l'utilisateur à plusieurs endroits, quelque chose comme ceci :

Component Custom Profil
Component Custom Profil

Nous allons utiliser les components React Native pour construire cette vue. À l'écrit, on aurait cela :

Component React Native View
Component React Native Image
Component React Native Text

Comment allons-nous faire pour utiliser cette vue à plusieurs endroits dans notre application ? Copier-coller le code partout ?

Certainement pas. Nous allons créer un component custom avec cette vue, soit, toujours à l'écrit :

Component custom Profil
Component React Native View
Component React Native Image
Component React Native Text

On n'aura ainsi plus qu'à utiliser le component custom Profil à chaque fois qu'on en aura besoin.

Vous remarquez qu'un component custom n'est bien qu'un template regroupant des components React Native (ici, View, Image et Text).

Vous l'aurez compris, les components sont super importants. Toutes les applications React sont pensées autour. La finalité de ce concept est de découper votre application en parties réutilisables, à tel point que l'on abuse un peu de ce concept. :p On crée énormément de components customs, même s'ils n'ont pas vocation à être réutilisés. C'est souvent le cas lorsque l'on crée une nouvelle vue : on crée un component custom même si on sait que cette vue ne sera utilisée qu'une seule fois. En fait, créer des components customs est plus une convention de codage en React Native. Cela simplifie énormément les développements et la compréhension de votre code.

D'ailleurs, on va mettre cette convention en pratique tout de suite avec la création de la vue Recherche de notre projet MoviesAndMe.

Créez un component custom

Lorsque l'on crée des components custom en React Native, on a pour habitude de les placer dans un dossier Components de notre application et surtout de créer un fichier Javascript par component.

Je vous invite donc à créer un dossier Components à la racine de notre projet et à créer un fichier Search.js à l'intérieur de ce dossier.

Dans Search.js, on va créer un component custom Search qui va correspondre à notre vue Recherche.

Pour créer un component custom, on a besoin d'importer la librairie React. Rappelez-vous le React.Component de notre fichier App.js. On commence donc avec :

// Components/Search.js
import React from 'react'
class Search extends React.Component {
}

Vous l'avez compris, les components affichent des éléments graphiques à l'écran : des vues, des textes, des images, un profil, etc. En React, on dit qu'un component rend un élément graphique.

La classe React.Component implémente une méthode render. C'est cette méthode qui va définir ce que notre component va rendre à l'écran. Lorsque l'on crée un component custom, on doit obligatoirement réimplémenter cette méthode et retourner (return) les éléments graphiques, sans quoi notre component ne rendra rien et ne fonctionnera pas. 

Définissons ensemble cette méthode :

// Components/Search.js
import React from 'react'
class Search extends React.Component {
render() {
return (
// Ici on rend à l'écran les éléments graphiques de notre component custom Search
)
}
}

Maintenant que la structure de notre component custom est prête, nous allons définir les éléments qu'il renvoie.

Pour l'instant, je veux que notre component Search affiche une vue avec un champ de saisie de texte et un bouton. Nous allons identifier les components React Native correspondants. Un petit coup d’œil à la documentation des components React Native. On a 3 éléments qui correspondent à nos besoins :

  • View : pour notre vue.

  • TextInput : pour notre champ de saisie de texte.

  • Button : pour notre bouton.

Avant de pouvoir utiliser les components React Native, il faut les importer de la librairie du même nom :

// Components/Search.js
import React from 'react'
import { View, TextInput, Button } from 'react-native'

Fermons cette parenthèse sur les imports en Javascript et passons à la prochaine étape : la définition du rendu de notre component.

On a spécifié que notre vue Search devait être une  View  avec un  TextInput  et un  Button . Vous pouvez modifier le rendu de notre component : 

// Components/Search.js
import React from 'react'
import { View, TextInput, Button } from 'react-native'
class Search extends React.Component {
render() {
return (
<View>
<TextInput placeholder='Titre du film'/>
<Button title='Rechercher' onPress={() => {}}/>
</View>
)
}
}

Notre component est presque prêt ; il faut pouvoir l'utiliser dans notre application. En Javascript, je vous l'ai dit, on exporte nos éléments pour pouvoir les utiliser ailleurs. Rajoutez à la fin du fichier Search.js : 

export default Search

On exporte toujours par défaut les components, c'est une autre convention de codage. C'est assez justifié, puisque l'on crée un fichier par component et que l'on n'exporte que celui-ci.

Pour résumer, dites-vous : un component = un fichier = un export par défaut.

À présent, on importe notre component dans notre fichier App.js, le point d'entrée de notre application, et on l'affiche comme toute première vue de l'application.

// App.js
import React from 'react'
import Search from './Components/Search'
export default class App extends React.Component {
render() {
return (
<Search/>
)
}
}

Retournez côté application et admirez le rendu. :) Si vous ne voyez pas de changement ou un écran rouge avec une erreur qui ne disparaît pas, pensez à recharger votre application : secouez votre device puis Reload, R + R sur émulateur Android, et + R sur simulateur iOS.

Et où est le TextInput avec le placeholder 'Titre du film' ?

Cherchez bien. :lol: Il est tout en haut, sous la barre de statut de votre téléphone. Cela ne rend pas très bien, je vous l'accorde. On verra comment styliser nos vues dans le prochain chapitre afin que nos éléments soient bien visibles.

Rendu des components sur iOS et Android

Normalement, vous êtes en train de tester, soit sur iOS, soit sur Android, comme moi. Mais, de ce fait, vous et moi sommes en train de passer à côté d'une chose très importante. Je vous montre.

J'ai lancé mon application sur deux smartphones, un sur iOS (à gauche) et un sur Android (à droite), regardez ce que cela donne :

Un Bouton sur iOS (à gauche) et sur Android (à droite)
Un Bouton sur iOS (à gauche) et sur Android (à droite)

Vous voyez la différence entre le rendu du bouton sur iOS et sur Android ? 
Elle est là, la super fonctionnalité de React Native !  :soleil: Je vous en ai parlé dans la partie 1 de ce cours. React Native utilise les composants natifs pour rendre vos vues. À gauche, on affiche un bouton natif iOS :  UIButton  et à droite, un bouton natif Android :  android.widget.Button. C'est React Native qui va convertir notre component React Native en son équivalent natif.

Grâce à cette fonctionnalité, notre application ressemblera plus à une application mobile et sera plus performante.

Au fait, lorsque nous rendons notre component Search, nous écrivons :

<View>
<TextInput placeholder='Titre du film'/>
<Button title='Rechercher' onPress={() => {}}/>
</View>

 Vous pensez que c'est quel langage de programmation ? Du HTML ? Du XML ?

Ni l'un ni l'autre ! C'est du JSX. C'est un nom qui ne fait pas rire du tout, mais c'est extrêmement simple, vous allez voir.

JSX

JSX est une extension du langage Javascript créée par Facebook. Il facilite la création de components avec une syntaxe très simple inspirée du HTML et du XML. JSX convertit le rendu de nos components en éléments React (qui sont eux-mêmes convertis en éléments natifs).

Pour vous donner un exemple, dans notre application, lorsque l'on écrit en JSX :

<View>
<TextInput placeholder="Titre du film"/>
<Button title="Rechercher" onPress={() => {}}/>
</View>

JSX le convertit pour React en :

React.createElement(View, {},
React.createElement(TextInput, {placeholder: "Titre du film"}),
React.createElement(Button, {title: "Rechercher", onPress: () => {}})
)

C'est tout ce que fait JSX, ni plus ni moins !

En JSX, on peut ajouter des attributs (aussi appelés propriétés) à nos components, afin de les personnaliser un peu, de leur faire passer des informations. C'est ce que l'on a fait dans notre component custom Search :

<TextInput placeholder='Titre du film'/>
<Button title='Rechercher' onPress={() => {}}/>

Ici, on a défini la propriété  placeholder  du component React Native TextInput et les propriétés  title  et  onPress  du component React Native Button. Plutôt simple comme syntaxe, vous ne trouvez pas ? C'est exactement la même syntaxe que pour du HTML et du XML. Pour ceux qui connaissent, vous ne devriez pas être trop dépaysés. :)

On arrive à la fin de ce chapitre et, mine de rien, on vient d'aborder LE sujet essentiel de React Native, à savoir les components. Tout n'est peut-être pas parfaitement clair dans vos têtes. Pas d'inquiétudes, on va pratiquer de plus en plus dans les prochains chapitres et vous pourrez mieux vous rendre compte de leur fonctionnement.

Vous avez pu vous rendre compte de l'utilisation des composants natifs par React Native. Vous savez, notre bouton qui diffère entre iOS et Android ? Je ne vous avais pas menti. ;) Vous allez pouvoir vous focaliser sur vos vues sans vous soucier du rendu sur les deux plateformes. React Native s'occupe de tout !

Enfin, on en a parlé à l'instant, JSX permet d'ajouter des attributs à nos components et on ne l'a pas encore vu, mais l'un d'eux s'appelle style. On va se pencher exclusivement sur cet attribut dans le prochain chapitre et voir comment rendre nos vues plus... stylées. :)

Exemple de certificat de réussite
Exemple de certificat de réussite