React Tutoriel => Commencer avec React

Remarques

React est une bibliothèque JavaScript déclarative basée sur des composants, utilisée pour créer des interfaces utilisateur.

Pour atteindre les fonctionnalités du framework MVC dans React, les développeurs l’utilisent en conjonction avec une saveur Flux de votre choix, par exemple Redux .

Versions

Version	Date de sortie
0.3.0	2013-05-29
0.4.0	2013-07-17
0.5.0	2013-10-16
0.8.0	2013-12-19
0.9.0	2014-02-20
0.10.0	2014-03-21
0.11.0	2014-07-17
0.12.0	2014-10-28
0.13.0	2015-03-10
0,14,0	2015-10-07
15.0.0	2016-04-07
15.1.0	2016-05-20
15.2.0	2016-07-01
15.2.1	2016-07-08
15.3.0	2016-07-29
15.3.1	2016-08-19
15.3.2	2016-09-19
15.4.0	2016-11-16
15.4.1	2016-11-23
15.4.2	2017-01-06
15.5.0	2017-04-07
15.6.0	2017-06-13

Installation ou configuration

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

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, accédez à la page d'installation de la documentation officielle de React.

React prend également en charge la syntaxe JSX . JSX est une extension créée par Facebook qui ajoute une syntaxe XML à JavaScript. Pour utiliser JSX, vous devez inclure la bibliothèque Babel et changer <script type="text/javascript"> en <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 en utilisant npm en procédant comme suit:

npm install --save react react-dom

Pour utiliser React dans votre projet JavaScript, vous pouvez effectuer les opérations suivantes:

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

Installation via fil

Facebook a publié son propre gestionnaire de paquets 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 comme si vous aviez installé React via npm.

Composant Hello World

Un composant React peut être défini comme une classe ES6 qui étend la classe React.Component base. Sous sa forme minimale, un composant doit définir une méthode de render spécifiant le rendu du composant dans le DOM. La méthode de render renvoie les noeuds 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 pouvant être appelée par le composant après que certains événements se soient produits - par exemple, un bouton peut recevoir une fonction pour sa propriété onClick et l'appeler chaque fois que l'utilisateur clique dessus. 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 rendre une chaîne arbitraire transmise au name prop par son parent. Notez qu'un composant ne peut pas modifier les accessoires 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 haut, en utilisant ReactDOM.render et en lui fournissant à la fois le composant et le noeud DOM que vous souhaitez rendre:

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 des props . Permet d'aller plus loin et d'introduire l' state .

Pour des raisons de démonstration, créons notre application Hello World, affichez uniquement 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 son état parent comme prop.

Codepen Lien vers l'exemple.

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 rendre 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 de la syntaxe XML à JavaScript), ce qui permet d'écrire

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

comme équivalent (et plus facile à lire pour une personne familiarisée avec HTML)

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

Le code contenant JSX doit être placé dans une <script type="text/babel"> . Tout ce qui se trouve dans cette balise sera transformé en Javascript en utilisant la bibliothèque Babel (qui doit être ajoutée aux 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>

Qu'est-ce que ReactJS?

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

ReactJS utilise un mécanisme virtuel basé sur DOM pour remplir des données (vues) dans HTML DOM. Le DOM virtuel fonctionne rapidement grâce au fait qu'il ne modifie que les é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 élément 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 son é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 à l'aide de 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.

React " réagit " pour indiquer rapidement et automatiquement les modifications apportées à vos composants afin de les réinstaller 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 l'essentiel du traitement dans le DOM virtuel plutôt que directement dans le DOM du navigateur, React peut agir rapidement et n'ajouter, mettre à jour et supprimer que les composants modifiés depuis le dernier cycle de rendu.

Bonjour tout le monde avec des fonctions sans état

Les composants sans état obtiennent leur philosophie de la programmation fonctionnelle. Ce qui implique que: Une fonction renvoie tout le temps exactement la même chose à ce qui lui est donné.

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 retournera toujours les mêmes valeurs données a et b. Cependant, la fonction statefulSum ne renverra pas les mêmes valeurs, même sans paramètres. Ce type de comportement est également appelé effet secondaire . Depuis, le composant affecte quelque chose au-delà.

Ainsi, il est conseillé d'utiliser plus souvent des composants sans état, car ils sont sans effet secondaire et créent toujours le même comportement. C'est ce que vous voulez être dans vos applications parce que l'état fluctuant est le pire des scénarios pour un programme maintenable.

Le type de composant de réaction le plus fondamental est celui sans état. Les composants réactifs qui sont des fonctions pures de leurs accessoires et ne nécessitent aucune gestion d'état interne peuvent être écrits en tant que fonctions JavaScript simples. Ceux-ci sont considérés comme des Stateless Functional Components car ils ne sont fonction que des props , sans aucun state à suivre.

Voici un exemple simple pour illustrer le concept d'un Stateless Functional Component :

// 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 rend un élément h1 contenant le name prop. 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 dispose de davantage d'espace pour les optimisations. L'implémentation est propre, mais jusqu'à présent, aucune optimisation de ce type n'a été implémentée .

Créer une application Réagir

create-react-app est un générateur de réactions créé par Facebook. Il fournit un environnement de développement configuré pour une facilité d'utilisation avec une configuration minimale, notamment:

Transpilation ES6 et JSX
Serveur de développement avec rechargement de module à chaud
Linting code
Préfixe CSS
Créer un script avec JS, CSS et regroupement d'images, et des sourcemaps
Cadre de test Jest

Installation

Tout d'abord, installez create-react-app globalement avec le gestionnaire de packages (npm).

npm install -g create-react-app

Ensuite, lancez le générateur dans le répertoire choisi.

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 d'éjection peut être utilisée.

npm run eject

Cela permet de modifier tous les fichiers de configuration. NB c'est un processus irréversible.

Des alternatives

Les modèles de remplacement React incluent:

Construire React App

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

npm run build

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

Composants et accessoires

Comme React ne concerne que le point de 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. "Props" sont simplement les attributs utilisés sur un nœud JSX (par exemple, <SomeComponent someProp="some prop's value" /> ), et sont la principale manière 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 de React comme des fonctions simples: ils prennent en compte les «accessoires» et produisent une sortie sous forme de balisage. Beaucoup de composants simples vont 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 des composants en tant que fonctions, plutôt que des "classes". Il existe trois manières 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>
        );
    }
});

Classes ES2015

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

Ces composants sont utilisés 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 eux. Donc, si votre composant doit avoir un état, optez pour des composants basés sur des classes. Reportez-vous à la section Création de composants pour plus d'informations.

En guise de dernière remarque, les accessoires de réaction sont immuables une fois qu'ils ont été passés, ce qui signifie qu'ils ne peuvent pas être modifiés à partir d'un composant. Si le parent d'un composant modifie la valeur d'un accessoire, React gère le remplacement des anciens accessoires par le nouveau, le composant se répète en utilisant les nouvelles valeurs.

Reportez-vous à la section Réaction et réutilisation des composants pour des plongées plus approfondies dans la relation entre les accessoires et les composants.

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

React Tutoriel
Commencer avec React

Recherche…