Apprendre React JS

Apprendre React JS : Introduction et concepts

Temps de lecture: 5 minutes

Aujourd’hui, nous allons lancer le premier volet d’une nouvelle série de didacticiels, Dave and React . Le point positif, c’est qu’on va apprendre ensemble, vous et moi. Eh oui, y a pas longtemps que j’utilise ce framework, et j’ai encore beaucoup de choses à apprendre. Du coup, je partagerai chacune de mes expériences avec ce framework, avec vous #davidnation. Sans plus tarder, commençons.

Il était une fois React…

Qu’est ce que React?

React est une bibliothèque d’interface utilisateur développée par Facebook pour faciliter la création de composants d’interface interactifs, dynamiques et réutilisables. Il est utilisé parr Facebook en production et Instagram.com est entièrement écrit en React.

L’un de ses arguments de vente uniques est que non seulement il fonctionne du côté client, mais il peut également être rendu côté serveur, et ils peuvent travailler ensemble de manière interopérable.

Il utilise également un concept appelé DOM virtuel ce qui permet de manipuler le moins possible le DOM afin de maintenir vos composants à jour.

Comment fonctionne le DOM virtuel?

Imaginez que vous créez un clone de vous-mêmes, ce qui veut dire qu’il possédera les mêmes caractéristiques que vous. Il va aussi refléter votre état actuel. C’est exactement ce que fait React avec le DOM.

Pensez maintenant si vous avez pris ce clone et apporté quelques modifications. Ajout d’une moustache, de doux biceps et des yeux de David Beckam. Dans React, lorsque nous appliquons ces changements, deux choses se produisent. Premièrement, React exécute un algorithme de « diffing », qui identifie ce qui a changé. La deuxième étape est la réconciliation, dans laquelle il met à jour le DOM avec les résultats de diff.

La façon dont React fonctionne est la suivante: plutôt que de prendre la personne réelle et de la reconstruire à partir de zéro, React ne ferait que changer le visage et les bras. Cela signifie que si vous aviez du texte dans une entrée et qu’un rendu a eu lieu, tant que le nœud parent de l’entrée n’a pas été programmé pour la réconciliation, le texte resterait inchangé.

Parce que React utilise un faux DOM et non un vrai, cela ouvre également une nouvelle possibilité amusante. Nous pouvons envoyer ce faux DOM sur le serveur et boom, on obtient des rendus côté serveur.

Mise en route

Pour commencer à utiliser React, installez l’outil React CLI (Create React App) et exécutez la commande pour créer une nouvelle application:

Mise en page

Lors de la configuration de votre page, il faut inclure les fichiers react.jset react-dom.js, ainsi que le script de compilation Babel. Ensuite, écrivez votre composant dans un noeud de script avec type comme valeur suivante : text/babel

 

Dans React, les composants s’exécutent sur un élément. Dans cet exemple, nous pouvons utiliser le div myDivcomme conteneur parent.

Bien que ce soit la manière la plus simple de commencer, il est préférable d’utiliser Browserify ou Webpack (Create React App utilise Webpack) pour configurer vos composants dans des fichiers distincts.

Les bases

Les composants de base de React sont appelés composants. Écrivons en un:

 

Si vous n’en avez jamais vu un auparavant, vous vous demandez probablement ce qui se passe actuellement dans le tandem Javascript / HTML.

JSX

Ce tandem s’appelle JSX, et c’est une transformation en syntaxe XML de Javascript. Cela vous permet d’écrire des balises HTML dans votre Javascript.

Pour les balises HTML régulières, l’attribut  class est classNameet l’attribut forest htmlFordans JSX car ce sont des mots réservés en Javascript. Plus de différences peuvent être examinées ici .

Maintenant, si vous ne voulez pas utiliser JSX, voici à quoi ressemble la syntaxe sans cela:

Vous pouvez en savoir plus ici si vous souhaitez.

Dans notre premier extrait, avez-vous remarqué /** @jsx React.DOM */en haut de notre script? C’est important, cela indique à React que nous utilisons JSX et que ce balisage doit être transformé, vous devez donc l’inclure lorsque vous utilisez la syntaxe JSX.

Composants

Lorsque vous utilisez la méthode render ci-dessus, notre premier argument est le composant que nous voulons afficher, et le second est le nœud DOM sur lequel il doit être monté. Nous pouvons utiliser la méthode createClasspour créer des classes de composants personnalisées. Il prend un objet de spécifications comme argument. Ecrivons en un:

 

Après avoir créé une classe, nous pouvons la rendre à notre document comme suit:

 

Cool hein?

Props

Lorsque nous utilisons nos composants définis, nous pouvons ajouter des attributs appelés props. Ces attributs sont disponibles dans notre composant en tant que this.propset peuvent être utilisés dans notre méthode render pour afficher des données dynamiques:

 

Spécifications, cycle de vie et état

La méthode renderméthode est la seule spécification requise pour créer un composant, mais il existe plusieurs méthodes et spécifications de cycle de vie que nous pouvons utiliser et qui sont très utiles lorsque vous voulez que votre composant fasse quelque chose.

Méthodes de cycle de vie

Voici quelques méthodes de cycle de vie dans React, bon à connaitre:

  • componentWillMount – Invoqué une fois, à la fois sur le client et le serveur avant le rendu.
  • componentDidMount – Invoqué une seule fois, uniquement sur le client, après le rendu.
  • shouldComponentUpdate – La valeur de retour détermine si le composant doit être mis à jour.
  • componentWillUnmount – Invoqué avant le démontage du composant.

Spécifications

  • getInitialState – La valeur renvoyée est la valeur initiale pour l’état.
  • getDefaultProps – Définit les valeurs des accessoires de secours si les accessoires ne sont pas fournis.
  • mixins – Un tableau d’objets, utilisé pour étendre la fonctionnalité du composant actuel.

Il existe plusieurs autres méthodes et méthodes de cycle de vie que vous pouvez lire ici .

Etat

Chaque composant a un objet stateet un objet props.

L’état est défini à l’aide de la méthode setState. L’appel de setStatedéclenche des mises à jour de l’interface utilisateur et constitue le pain et le beurre de l’interactivité de React. Si nous voulons définir un état initial avant toute interaction, nous pouvons utiliser la méthode getInitialState. Ci-dessous, voyez comment nous pouvons définir l’état de notre composant:

 

Événements

React a également un système d’événements inter-navigateur intégré. Les événements sont joints en tant que propriétés de composants et peuvent déclencher des méthodes. Incrémentons notre compteur en utilisant les événements suivants:

 

Flux de données unidirectionnel

Dans React, les données d’application circulent de manière unidirectionnelle via les objets stateet props, contrairement à la liaison bidirectionnelle de bibliothèques comme Angular. Cela signifie que, dans un héritage multicomposant, un composant parent commun doit gérer l’état et le transmettre par la chaîne via des props.

Votre état doit être mis à jour à l’aide de la méthode setState pour vous assurer qu’une actualisation de l’interface utilisateur se produira, si nécessaire. Les valeurs résultantes doivent être transmises aux composants enfants à l’aide d’attributs accessibles depuis ces enfants via this.props.

Voir cet exemple qui montre ce concept dans la pratique:

 

Conclusion

Maintenant que nous avons passé en revue certaines bases de React, prenez le temps d’en savoir plus sur l’ API React et de lire la doc sur JSX .

A bientôt pour un autre épisode de Dave and React

Restez à l’écoute!

  • Merci d’avoir lu ! 🙂 Si vous avez aimé cet article,
  • Faites un coucou sur : Instagram | Facebook | Twitter |
  • Avez-vous besoin d’aide pour votre projet web ? Ecrivez moi à l’adresse suivante : david@oschool.ci
Deviens toi aussi développeur web !
I agree to have my personal information transfered to MailChimp ( more information )
Commences ta carrière de développeur web, GRATUITEMENT, ici et maintenant !
Je hais les sapms. Votre adresse email ne sera jamais vendu ou partagé avec un tiers

Also published on Medium.

Partages à tous tes amis !

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.