Apprendre ReactJS de la base à la maîtrise.

Hassane Moustapha

·

Follow

4 min read

·

Jul 12, 2017

--

1

Share

Episode 1

J’ai découvert ReactJS janvier 2014 mais je le regardais de loin sans jamais lui donner une chance de faire la concurrence avec mon framework préféré EmberJS. Je voyais ReactJS comme une nouvelle tentative pour ramener des idées déjà présentées par KnockOut, BatmanJS et d’autres librairies JS. Je me trompais. ReactJS est totalement différent.

ReactJS est une View Library, rien de plus, mais largement suffisant pour la création d’une application WEB complexe et complète. Et c’est ce que nous allons “prouver” pendant cette série d’articles ( et screencasts sur YouTube).

React se définit comme une librairie plutôt qu’un Framework, si l’on transposait cela au MVC react serait le V de la vue. React a été conçu pour répondre aux problématiques de performances affichées par AngularJS, Ember, Backbone… Pour arriver à concevoir un outil digne de ce nom, les développeurs de Facebook sont partis de constats simples :

• Le DOM est rapide mais les interactions avec celui-ci sont lentes
• Il est difficile de prévoir dans quel état sera le DOM à un instant T

Pour répondre à ces problématiques, ReactJS implémente un DOM Virtuel, il effectue les opérations sur ce DOM virtuel puis compare celui-ci au vrai DOM pour voir quelles parties de l’application doivent être modifiées. Le concept fondamental de React est sa logique centrée sur les composants WEB. L’ensemble et l’imbrication de ces composants va former le DOM au rendu de l’application.

Euuuh … c’est quoi DOM ?

Le Modèle Objet de Document (DOM) est une interface de programmation d’application (API) pour des documents HTML valides et XML bien-formés. Il définit la structure logique d’un document (au sens large tu terme!) et la manière d’y accéder et de le manipuler. Avec le DOM, les programmeurs peuvent construire des documents, naviguer dans leur structure ainsi qu’ajouter, modifier ou effacer des éléments et leur contenu. Tout ce qui se trouve dans un document HTML, ou XML, peut être touché, modifié effacé ou ajouté en utilisant le Modèle Objet de Document, à quelques exceptions près…

On trouve quoi dans un composant WEB ?

Dans encore beaucoup de sites WEB actuels on préconise l’organisation et la séparation du code par technologie. On se retrouve ainsi avec un dossier pour le HTML, un pour le CSS, un pour le JS… React dans son approche centrée “Composants” suggère de rassembler le HTML, le JS et le CSS au sein du composant pour obtenir un composant exportable dont le comportement et le style ne seront pas altérés dans un autre projet.

export default MonComposant extends React.Component { 
  render(){ 
    return(
      <div> <p>J’ai beaucoup d’inspiration</p> </div>
    ); 
  } 
}

Je peux utiliser mon premier composant dans un second et imbriquer à l’infini les composants pour recréer la structure de l’arbre DOM.

export default MonSecondComposant extends React.Component { 
  render(){ 
    return( 
      <div>
        <h2>Mon composant 2</h2> 
        <MonComposant /> 
      </div> 
    ); 
  } 
}

Le code ci-dessus affichera donc :

Mon composant 2 
J’ai beaucoup d’inspiration

Utiliser un Composant React dans un autre Composant est aussi simple que ça.

En plus d’être simple et efficace quand il s’agit de traiter le DOM, React est aussi disponible et utilisable en dehors d’un navigateur WEB.

Du Javascript côté serveur

Une fois la problématique de performance réglée, il reste encore celle du SEO, pour cela React use encore une fois de son virtual DOM. Ce virtual DOM confère à React la possibilité de s’exécuter à la fois côté client et côté serveur. Si React peut s’exécuter côté serveur, alors les moteurs de recherche peuvent indexer le contenu et optimiser ainsi le référencement. Face à tant de prouesses technologiques, on se demande quelles surprises nous réserve encore cette librairie…

React au-delà du WEB

Les composants React sont facilement exportables d’un projet à un autre Facebook a poussé son concept jusqu’aux frontières du développement mobile pour donner naissance à React-native.

React, la seule solution du marché ?

Face au phénomène qu’est React, les concurrents n’ont pas tardé à se pencher sur le sujet du développement centré “Composants” pour proposer des technologies concurrentes. Parmi les plus notables, on peut citer :

• VueJS : Très similaire à React, cette librairie bénéficie aujourd’hui d’une bonne communauté et a su s’inspirer de React et proposant une interface de programmation légèrement différente. VueJS se présente comme une librairie ayant une courbe d’apprentissage rapide.
• AngularJS2 : La seconde mouture du renommé Angular affiche une incompatibilité totale avec son grand frère pour faire place aux composants. Plus un Framework qu’une librairie Angular arrive avec son flot de fonctionnalités. Il préconise notamment l’utilisation de Typescript pour le développement
• Elm : Elm est le moins connu mais est prometteur, c’est un langage de programmation fonctionnelle implémentant un virtual DOM et préconisant aussi l’utilisation de composants. Il est “transpilable” en Javascript et peut ainsi s’intégrer dans une autre application JavaScript

Au final, React est une librairie qui a fait ses preuves, à l’origine de nombreuses autres libraires JS reprenant les concepts des composants WEB avec un virtual DOM, en plus d’être ingénieuses ces solutions font parti d’une immense communauté.

Dans nos prochains articles, nous apprendrons à développer des composants ReactJS, à les combiner pour réaliser des applications complexes et évolutives tout en ayant une architecture propre et simple.

Liens utiles :

Chaîne YouTube : https://goo.gl/kvDkQ1

Lien du Repo sur Github: https://github.com/hkairi/apprendre-react-js