ReactJS

Logo

ReactJS, le framework Javascript de création de composants visuels de Facebook, est souvent présenté comme rapide, mais moins complet que d'autres frameworks existants. Il ne serait que le V du pattern Model-Vue-Contrôleur. Cette présentation ne permet toutefois pas de rendre compte de l'intérêt grandissant (?) pour ce framework.

Il serait plus exact de dire que, même si la performance est au rendez-vous, le grand avantage de ReactJS est d’offrir un cadre pour créer des composants simplement et en composer d'autres à l'aide de sous-composants, et ce, sans détériorer les performances ni la lisibilité du code. Et puisqu'une application complète peut être vue comme un composant lui-même fait de plus petits composants, ReactJS est également un vrai cadre applicatif.

Comment ReactJS fait-il, en interne, pour faciliter le développement de composants ?

ReactJS utilise plusieurs techniques dont la principale est le « Virtual DOM ». Le principe est de reconstruire le DOM HTML en mémoire, puis de le comparer au DOM Virtuel précédent et de ne modifier que ce qui est strictement nécessaire dans le DOM réel. Dit comme cela, on ne voit pas le grand intérêt de la manœuvre (mise à part l'amélioration des performances car la mise à jour du DOM réel est réputée lente). Pourtant, la construction complète du DOM virtuel est très intéressante, car elle permet de passer d'une gestion d'un DOM HTML avec état (« statefull ») à une gestion sans état (« stateless). Ce glissement est le plus important ici car une des  difficultés pour le développeur est de coder, tester et surtout maintenir un code avec état. Si on modifie un nœud ou un attribut d'un nœud du DOM à un instant T et que cette modification dépend de l'état de pleins d'autres choses (y compris et surtout son état précédent), le code va devenir de plus en plus complexe et illisible avec des « if/else » imbriqués un peu partout. Au contraire, s’il n'y avait à gérer que l'état du DOM à l'instant T, sans s'occuper de l'état précédent, i.e. et si on pouvait reconstruire complètement le composant et ses sous-composants à chaque modification (qui pourrait avoir des effets sur le DOM), alors le rendu de chaque composant serait grandement simplifié. C'est en tous cas le pari que fait ReactJS.

Un exemple ?

Voici deux exemples simplifiés de composants : le premier composant « ListResult.jsx » afficherait une hypothétique liste de résultats en utilisant le second composant « ListResultItem.jsx » pour afficher chaque item de résultat :

 

Composant ListResult.jsx

var React = require('react'),

          ListResultItem = require('./ListResultItem.jsx');

/**

 * Exemple simplifié de composant.

 */

var ListResult = React.createClass({

    propTypes: {

        //----------------------------------

        // une propriete passée en parametre

   // au composant lors du rendu

        //----------------------------------

        results: React.PropTypes.array,

        //----------------------------------

        // une propriete passée en parametre

   // au composant lors du rendu

        //----------------------------------

        onClickHandler: React.PropTypes.func

    },

 //----------------------------------------------------------------

   // Sous-méthode chargée du rendu des composants enfants.

 // Chaque composant enfant est un composant ListResultItem.

 // ListResultItem reçoit les paramètres id, title et onClickHandler

 //----------------------------------------------------------------   

 _renderChildren() {

        return this.props.results.map(result => {

            return (

                <ListResultItem id={result.id}

                                title={result.longTitle}

                                onClickHandler={this.props.onClickHandler}/>

            );

        });

    },

   //----------------------------------------------------------------

   // La méthode render présente dans tous les composants ReactJs

 // Elle est appelée par ReactJs lors de la création du Virtual DOM

 // Ici, la méthode utilise la sous-méthode "_renderChildren()"

 // pour le rendu des composants enfants

 //----------------------------------------------------------------

    render() {

        return (

            <div className="search__list-result">

                {this._renderChildren()}

            </div>

        );

    }

});

 

module.exports = ListResult;

 

Composant ListResultItem.jsx

var React = require('react');

/**

 *

 * Sous-composant du composant ListResult

 *

 */

var ListResultItem = React.createClass({

    propTypes: {

        //------------------------

        // Propriété passée en paramètre

   // par le composant parent

       //------------------------

        id: React.PropTypes.number,

        //------------------------

        // Propriété passée en paramètre

   // par le composant parent

       //------------------------

     title: React.PropTypes.number,

        //------------------------

        // Propriété passée en paramètre

   // par le composant parent

       //------------------------

     onClickHandler: React.propTypes.func

    },

   //----------------------------------------------------------------

   // Notons que le code de la méthode render ci-dessous ressemble à

 // du HTML, mais c'est seulement du "sucre syntaxique" car ce code

 // est converti en instructions javascript. Ainsi, on utilise

 // l'attribut "className" et non pas "class" car depuis ES5,

 // "class" est un mot reservé.

 //----------------------------------------------------------------

    render() {

        return (

            <div className="media search__list-result-item"

          onClick={this.props.onClickHandler}

                        data-result-id={this.props.id}>

                <div className="media-body">

                    <h5 className="media-heading">{this.props.title}</h5>

                </div>

            </div>

        );

    }

});

module.exports = ListResultItem;

ReactJs dans la pratique, cela donne quoi ?

Pour la simplicité de création de composants, c'est pari gagné !

 

En savoir plus :

Le site officiel de ReactJS : http://facebook.github.io/react/

Pourquoi HipChat a été fait en ReactJS : https://developer.atlassian.com/blog/2015/02/rebuilding-hipchat-with-react/

Un site très pédagogique pour comprendre et commencer à coder en ReactJS : http://blog.risingstack.com/the-react-way-getting-started-tutorial/

Une page pour se rappeler toutes les méthodes d'un composant ReactJS : https://facebook.github.io/react/docs/component-specs.html

Un Starter kit pour commencer son projet : https://github.com/kriasoft/react-starter-kit

La librairie Jest pour les Tests unitaires : https://facebook.github.io/jest/

Plein de composants/pages en ReactJS : http://react.rocks/

Plein d'autres ressources sur ReactJS : https://react.zeef.com/nick.raienko

Un lien très peu connu pour trouver d'autres ressources sur ReactJS :-) : https://www.google.fr/#q=ReactJs

 

Emmanuel F

Commentaires

manu
Voici un lien qui montre l'avantage de passer de jquery à reactjs : http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/

Ajouter un commentaire