Premiers pas avec React

Qu’est-ce que ReactJS ?

ReactJS est une bibliothèque frontale open-source basée sur des composants, responsable uniquement de la couche de vue de l’application. Il est maintenu par Facebook.

ReactJS utilise un mécanisme basé sur le DOM virtuel pour remplir les données (vues) dans le DOM HTML. Le DOM virtuel fonctionne rapidement du fait qu’il ne modifie que des éléments DOM individuels au lieu de recharger le DOM complet à chaque fois

Une application React est composée de plusieurs composants, chacun responsable de la sortie d’un petit morceau de HTML réutilisable. Les composants peuvent être imbriqués dans d’autres composants pour permettre la création d’applications complexes à partir de blocs de construction simples. Un composant peut également conserver un état interne - par exemple, un composant TabList peut stocker une variable correspondant à l’onglet actuellement ouvert.

React nous permet d’écrire des composants en utilisant un langage spécifique au domaine appelé JSX. JSX nous permet d’écrire nos composants en utilisant HTML, tout en mélangeant des événements JavaScript. React le convertira en interne en un DOM virtuel et produira finalement notre code HTML pour nous.

Réagissez “reacts” pour indiquer rapidement et automatiquement les modifications de vos composants afin de restituer les composants dans le DOM HTML en utilisant le DOM virtuel. Le DOM virtuel est une représentation en mémoire d’un DOM réel. En effectuant la majeure partie du traitement à l’intérieur du DOM virtuel plutôt que directement dans le DOM du navigateur, React peut agir rapidement et uniquement ajouter, mettre à jour et supprimer les composants qui ont changé depuis le dernier cycle de rendu.

Installation ou configuration

ReactJS est une bibliothèque JavaScript contenue dans un seul fichier react-<version>.js qui peut être inclus dans n’importe quelle page HTML. Les gens installent également couramment la bibliothèque React DOM react-dom-<version>.js avec le fichier React principal :

Inclusion de base

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script type="text/javascript">
        // Use react JavaScript code here or in a separate file
    </script>
    </body>
</html>

Pour obtenir les fichiers JavaScript, rendez-vous sur la page d’installation de la documentation officielle de React.

React prend également en charge la [syntaxe JSX][1]. JSX est une extension créée par Facebook qui ajoute la syntaxe XML à JavaScript. Pour utiliser JSX, vous devez inclure la bibliothèque Babel et remplacer <script type="text/javascript"> par <script type="text/babel"> afin de traduire JSX en code Javascript.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
    <script type="text/babel">
        // Use react JSX code here or in a separate file
    </script>
    </body>
</html>

Installation via npm

Vous pouvez également installer React à l’aide de npm en procédant comme suit :

npm installer --save réagir réagir-dom

Pour utiliser React dans votre projet JavaScript, vous pouvez procéder comme suit :

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);

Installation via Yarn

Facebook a publié son propre gestionnaire de packages nommé Yarn, qui peut également être utilisé pour installer React. Après avoir installé Yarn, il vous suffit d’exécuter cette commande :

yarn add react react-dom

Vous pouvez ensuite utiliser React dans votre projet exactement de la même manière que si vous aviez installé React via npm.

[1] : https://facebook.github.io/react/docs/jsx-in-depth.html

Hello World avec des fonctions sans état

Les composants sans état tirent leur philosophie de la programmation fonctionnelle. Ce qui implique que : Une fonction renvoie toujours exactement la même chose sur ce qu’on lui donne.

Par exemple:

const statelessSum = (a, b) => a + b;

let a = 0;
const statefulSum = () => a++;

Comme vous pouvez le voir dans l’exemple ci-dessus, statelessSum renverra toujours les mêmes valeurs étant donné a et b. Cependant, la fonction statefulSum ne renverra pas les mêmes valeurs même sans paramètres. Ce type de comportement de fonction est également appelé effet secondaire. Depuis, le composant affecte quelque chose au-delà.

Il est donc conseillé d’utiliser plus souvent des composants sans état, car ils sont sans effets secondaires et créeront toujours le même comportement. C’est ce que vous voulez rechercher dans vos applications, car l’état fluctuant est le pire scénario pour un programme maintenable.

Le type le plus basique de composant de réaction est celui sans état. Les composants React qui sont de pures fonctions de leurs accessoires et ne nécessitent aucune gestion d’état interne peuvent être écrits comme de simples fonctions JavaScript. Ceux-ci sont dits Stateless Functional Components car ils ne sont qu’une fonction de props, sans avoir aucun state à suivre.

Voici un exemple simple pour illustrer le concept de “composant fonctionnel sans état”:

// In HTML
<div id="element"></div>

// In React
const MyComponent = props => {
    return <h1>Hello, {props.name}!</h1>;
};

ReactDOM.render(<MyComponent name="Arun" />, element);
// Will render <h1>Hello, Arun!</h1>

Notez que tout ce que fait ce composant est de rendre un élément h1 contenant le prop name. Ce composant ne suit aucun état. Voici également un exemple ES6 :

import React from 'react'

const HelloWorld = props => (
    <h1>Hello, {props.name}!</h1>
)

HelloWorld.propTypes = {
    name: React.PropTypes.string.isRequired
}

export default HelloWorld

Étant donné que ces composants ne nécessitent pas d’instance de sauvegarde pour gérer l’état, React a plus de place pour les optimisations. L’implémentation est propre, mais pour l’instant [aucune optimisation de ce type pour les composants sans état n’a été implémentée] [1].

[1] : https://github.com/facebook/react/issues/5677#issuecomment-165125151

Bases absolues de la création de composants réutilisables

Composants et accessoires

Comme React ne se préoccupe que de la vue d’une application, l’essentiel du développement dans React sera la création de composants. Un composant représente une partie de la vue de votre application. Les “props” sont simplement les attributs utilisés sur un nœud JSX (par exemple <SomeComponent someProp="some prop's value" />), et sont la principale façon dont notre application interagit avec nos composants. Dans l’extrait ci-dessus, à l’intérieur de SomeComponent, nous aurions accès à this.props, dont la valeur serait l’objet {someProp: "some prop's value"}.

Il peut être utile de considérer les composants React comme de simples fonctions - ils prennent une entrée sous la forme d’“accessoires” et produisent une sortie sous forme de balisage. De nombreux composants simples vont encore plus loin en se faisant des “fonctions pures”, ce qui signifie qu’ils ne génèrent pas d’effets secondaires et sont idempotents (étant donné un ensemble d’entrées, le composant produira toujours la même sortie). Cet objectif peut être formellement appliqué en créant réellement des composants en tant que fonctions, plutôt que des “classes”. Il existe trois façons de créer un composant React :

Composants fonctionnels (“sans état”)

const FirstComponent = props => (
    <div>{props.content}</div>
);

React.createClass()

const SecondComponent = React.createClass({
    render: function () {
        return (
            <div>{this.props.content}</div>
        );
    }
});

Cours ES2015

class ThirdComponent extends React.Component {
    render() {
        return (
            <div>{this.props.content}</div>
        );
    }
}

Ces composants sont utilisés exactement de la même manière :

const ParentComponent = function (props) {
    const someText = "FooBar";
    return (
        <FirstComponent content={someText} />
        <SecondComponent content={someText} />
        <ThirdComponent content={someText} />
    );
}

Les exemples ci-dessus produiront tous un balisage identique.

Les composants fonctionnels ne peuvent pas avoir d’“état” en leur sein. Donc, si votre composant doit avoir un état, optez pour des composants basés sur des classes. Reportez-vous à [Création de composants][1] pour plus d’informations.

Enfin, les accessoires de réaction sont immuables une fois qu’ils ont été transmis, ce qui signifie qu’ils ne peuvent pas être modifiés depuis un composant. Si le parent d’un composant change la valeur d’un accessoire, React gère le remplacement des anciens accessoires par le nouveau, le composant se restituera en utilisant les nouvelles valeurs.

Voir [Thinking In React][2] et [Composants réutilisables][3] pour des plongées plus approfondies dans la relation entre les accessoires et les composants.

[1] : https://www.wikiod.com/fr/reactjs/composants#Création de composants [2] : https://facebook.github.io/react/docs/thinking-in-react.html “Penser en réagissant” [3] : https://facebook.github.io/react/docs/reusable-components.html “Composants réutilisables”

Créer une application React

create-react-app est un générateur passe-partout d’application React créé par Facebook. Il fournit un environnement de développement configuré pour une utilisation facile avec une configuration minimale, notamment :

Transpilation ES6 et JSX
Serveur de développement avec rechargement de module à chaud
Code pelucheux
Préfixe automatique CSS
Créer un script avec JS, CSS et regroupement d’images, et des cartes source
Cadre de test Jest

Installation

Tout d’abord, installez create-react-app globalement avec le gestionnaire de packages de nœuds (npm).

npm install -g create-react-app

Lancez ensuite le générateur dans le répertoire de votre choix.

create-react-app my-app

Accédez au répertoire nouvellement créé et exécutez le script de démarrage.

cd my-app/
npm start

Configuration

create-react-app est intentionnellement non configurable par défaut. Si une utilisation autre que celle par défaut est requise, par exemple pour utiliser un langage CSS compilé tel que Sass, la commande eject peut être utilisée.

npm run eject

Cela permet de modifier tous les fichiers de configuration. N.B. c’est un processus irréversible.

Alternatives

Les passe-partout alternatifs de React incluent :

enclave
[nwb] (https://github.com/insin/nwb)
[mouvement] (https://github.com/motion/motion)
rackt-cli
budō
rwb
quik
sagui
roc

Construire l’application React

Pour créer votre application pour la production, exécutez la commande suivante

npm run build

Bonjour le monde

Sans JSX

Voici un exemple de base qui utilise l’API principale de React pour créer un élément React et l’API React DOM pour restituer l’élément React dans le navigateur.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>

  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript">

      // create a React element rElement
      var rElement = React.createElement('h1', null, 'Hello, world!');

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

Avec JSX

Au lieu de créer un élément React à partir de chaînes, on peut utiliser JSX (une extension Javascript créée par Facebook pour ajouter la syntaxe XML à JavaScript), qui permet d’écrire

var rElement = React.createElement('h1', null, 'Hello, world!');

comme équivalent (et plus facile à lire pour quelqu’un qui connaît le HTML)

var rElement = <h1>Hello, world!</h1>;

Le code contenant JSX doit être inclus dans une balise <script type="text/babel">. Tout ce qui se trouve dans cette balise sera transformé en Javascript simple à l’aide de la bibliothèque Babel (qui doit être incluse en plus des bibliothèques React).

Donc finalement l’exemple ci-dessus devient :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>
    <!-- Include the Babel library -->
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

  </head>
  <body>
   <div id="example"></div>

    <script type="text/babel">

      // create a React element rElement using JSX
      var rElement = <h1>Hello, world!</h1>;

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

Composant Hello World

Un composant React peut être défini comme une classe ES6 qui étend la classe de base React.Component. Dans sa forme minimale, un composant doit définir une méthode render qui spécifie comment le composant s’affiche dans le DOM. La méthode render renvoie les nœuds React, qui peuvent être définis à l’aide de la syntaxe JSX en tant que balises de type HTML. L’exemple suivant montre comment définir un composant minimal :

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld

Un composant peut également recevoir des props. Ce sont des propriétés passées par son parent afin de spécifier certaines valeurs que le composant ne peut pas connaître par lui-même ; une propriété peut également contenir une fonction qui peut être appelée par le composant après que certains événements se produisent - par exemple, un bouton peut recevoir une fonction pour sa propriété onClick et l’appeler chaque fois qu’il est cliqué. Lors de l’écriture d’un composant, ses “props” sont accessibles via l’objet “props” sur le composant lui-même :

import React from 'react'

class Hello extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>
    }
}

export default Hello

L’exemple ci-dessus montre comment le composant peut restituer une chaîne arbitraire transmise à la prop name par son parent. Notez qu’un composant ne peut pas modifier les props qu’il reçoit.

Un composant peut être rendu dans n’importe quel autre composant, ou directement dans le DOM s’il s’agit du composant le plus élevé, en utilisant ReactDOM.render et en lui fournissant à la fois le composant et le nœud DOM où vous souhaitez que l’arborescence React soit rendue :

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

ReactDOM.render(<Hello name="Billy James" />, document.getElementById('main'))

Vous savez maintenant comment créer un composant de base et accepter les “accessoires”. Allons un peu plus loin et introduisons state.

Par souci de démonstration, faisons en sorte que notre application Hello World n’affiche que le prénom si un nom complet est donné.

import React from 'react'

class Hello extends React.Component {

    constructor(props){

        //Since we are extending the default constructor,
        //handle default activities first.
        super(props);

        //Extract the first-name from the prop
        let firstName = this.props.name.split(" ")[0];
        
        //In the constructor, feel free to modify the
        //state property on the current context.
        this.state = {
            name: firstName
        }

    } //Look maa, no comma required in JSX based class defs!

    render() {
        return <h1>Hello, {this.state.name}!</h1>
    }
}

export default Hello

Remarque : Chaque composant peut avoir son propre état ou accepter l’état de son parent comme accessoire.

[Lien Codepen vers l’exemple.][1]

[1] : https://codepen.io/sunnykgupta/pen/mRPxdo?editors=1010

Premiers pas avec React

Qu’est-ce que ReactJS ? #

Installation ou configuration #

Hello World avec des fonctions sans état #

Par exemple: #

Bases absolues de la création de composants réutilisables #

Composants et accessoires #

Créer une application React #

Installation #

Configuration #

Alternatives #

Bonjour le monde #

Composant Hello World #