---
title: Développer une application React
tags: frontend, support, angular
robots: noindex, nofollow
author: Julien Noyer
---

# Développer une application React

*Une bibliothèque JavaScript pour créer des interfaces utilisateurs*


*© [Julien Noyer](https://www.linkedin.com/in/julien-n-21219b28/) - All rights reserved for educational purposes only*

---

<br>

## Présentation de React.js

[React.js](https://fr.reactjs.org) (aussi appelé React ou ReactJS) est une bibliothèque JavaScript libre développée par Facebook depuis 2013. Le but principal de cette bibliothèque est de faciliter la création d'application web SinglePage, via la création de composants dépendant d'un état et générant une page (ou portion) HTML à chaque changement d'état.

> Source [Wikipedia.org](https://fr.wikipedia.org/wiki/React)

<br><br>

## Environement de travail

La méthode la plus communément utilisée pour développer des applications avec [React.js](https://fr.reactjs.org) est celle qui consiste à utiliser une suite de [CLI](https://fr.wikipedia.org/wiki/Interface_en_ligne_de_commande) nommée [Create React App](https://create-react-app.dev/) qu'il est possible d'installer avec la commande suivante :

npm install -g create-react-app

Les instructions qui suivent dans ce document sont basées sur l'utilisation de [Create React App](https://create-react-app.dev/) pour simplifier la démonstration des notions qu'il aborde.

<br>

---

<br><br>

# Créer un projet React.js

*Utilisation de base de Create React App*


<br>

## Démarrer un nouveau projet React.js

Pour bien débuter le développement d'une application avec [React.js](https://fr.reactjs.org) il est important de respecter une structure et de correctement organiser les différents composants qui seront utilisés dans l'application. Il est donc important de sélectionner un dossier spécifique sur la machine locale dans laquelle sera développée l'application [React.js](https://fr.reactjs.org).

Nous sélectionnons le dossier contenant nos différents projets pour y créer notre application [React.js](https://fr.reactjs.org) avec la commande suivante :

npm init react-app react-app

> Définissez les options que vous souhaitez et laissez le CLI créer l'application

<br>

[Create React App](https://create-react-app.dev/) installe des composants de bases lors de la création du nouveau projet, ce document va volontairement ignorer ces composants et présenter la mise en place d'une application à partir des fichiers de configuration de base.

<br>

## Liste non-exhaustive des commandes utiles

Avant de taper ces commande, nous vous conseillons de régarder la structure du fichier `package.json` dans lequel plusieurs scripts sont présents.

# Create new application
npm init react-app react-app

# Launch application in local server
react-scripts start

# Build application
react-scripts build

> Toutes les commandes sont disponible sur le site officiel de Create React App : https://create-react-app.dev

---

<br><br>

# Gestion des routes de l'application

*Mise en place d'une structure de base d'application Web*


<br>

## Associer des composants aux endpoints

Contrairement à des routes serveur, celles utilisées dans [React.js](https://fr.reactjs.org) n’ont pas pour but de correspondre à des requêtes HTTP mais plutôt d’utiliser les `endpoints` des URL, pour afficher dans le DOM un composant spécifique. Dans la mesure où une application [React.js](https://fr.reactjs.org) s’affiche dans une seule, est unique page HTML, il s’agit donc d’être capable d’afficher les bons éléments du DOM pour le bon endpoint.

Avant de configurer le routeur de notre application, nous allons dans un premier temps créer des composants qui correspondront aux différentes routes de notre application. il est important de noter à cette étape que nous considérons le composant d’une route comme un composant principal dans lequel nous intégrerons d’autres composants.

Avant de créer nos composants principaux, nous allons structurer notre application en créant dans le dossier `src` un dossier nommé `views` dans lequel nous créerons les composants des routes :

mkdir src/views

<br>

Une fois ce dossier créé nous pouvons générer nos composants principaux avec la commande suivante :

touch src/views/HomeView.jsx

<br>

Nous allons à présent éditer le fichier `HomeView.jsx` que nous venons de créer pour y placer le code suivant :

// Imports
import React, { Component } from 'react';

// Define component
class HomeView extends Component {
    constructor() {
        super();
        this.state = {
            title: `My first React App`
        };
    }
    
    render() {
        return (
            <div>
                <h1>{ this.state.title }</h1>
            </div>
        )
    }
}

// Export component
export default HomeView;

> La structure présentée ci-dessous vous servira de base pour créer les autre vues de votre application, pensez à modifier le nom de la constante.

<br>

## Configurer le router

Le principe de routeur pour une application Web est un fichier de configuration qui permet de définir le composant à utiliser selon le `endpoint` invoqué dans le navigateur.

En [React.js](https://fr.reactjs.org) ce fichier est structuré d'une certaine manière, avec des composants spécifique, et il doit être placé dans un dossier nommé `router`.

Pour initier le router de votre application, tapez les commandes suivantes :

# Créer la structure du router
mkdir src/router
touch src/router/index.js

# Installer la dépendance `react-router-dom`
npm install react-router-dom

<br>

Nous allons à présent éditer le fichier `index.js` que nous venons de créer pour y placer le code suivant :

// Imports
import { Switch, Route } from 'react-router-dom';
import HomeView from '../views/HomeView';

// Define component
function Routes(){
    return (
        <Switch>
            <Route exact path="/" component={ HomeView }/>
        </Switch>
    )
}

// Export component
export default Routes;

> Pour créer d'autres vues, il suffit d'ajouter une directive `Route`, en éditant les propriétés et en important le composant de la route.

<br>

## Implémenter le router dans l'application

Les éléments que nous venons de créer permettent de définir le comportement de notre application selon le `endpoint` invoqué dans le navigateur, il nous faut à présent indiquer où nous souhaitons que les vues s'affichent dans notre application.

Nous allons tout d'abord éditer le fichier `App.js` qui est le point d'entrée principal de votre application. Ce fichier est utilisé pour définir la configuration générale de l'application, c'est ici que nous devons importer notre router de la manière suivante :

// Imports
import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom'
import Routes from './router/index';

// Child components
import HeaderApp from './components/HeaderApp';

// Define component
class App extends Component {
    constructor() {
        // Super is mendatory to expend Component module
        super();
    }

    render() {
        return (
            <div className="App">
                {/* Use Router directive to display route components */}
                <Router>
                    <Routes />
                </Router>
            </div>
        );
    }
}

// Export component
export default App;

<br>

## Créer des liens entre les vues

L'exemple le plus probant à expliquer la mise en place de liens dans une application [React.js](https://fr.reactjs.org) est la mise en place d'une navigation.L'exemple le plus probant à expliquer la mise en place de liens dans une application [React.js](https://fr.reactjs.org) est la mise en place d'une navigation.

La mise en place de lien avec [React.js](https://fr.reactjs.org) est très proche des autres cadritiels, il s'agit d'utiliser une directive spécifique qui permet à [React.js](https://fr.reactjs.org) de gérer le passage entre les vues. La directive à utiliser est `Link`, elle s'utilise de la façon suivante :

<Router>
    <Link to="/">Accueil</Link>
</Router>

> La directive `router-link` dispose d'options présenté sur le lien suivant : https://reactrouter.com/web/api/Link

<br>

---

<br><br>

# Gestion des composant de l'application

*Mise en place des composant de base d'une application Web*


<br>

## Principe de construction en "poupée russe"

Le principe de développement à observer dans la mise en place d'une application Web et celui des poupées russes : nous imbriquons des composants les uns dans les autres. Cette méthode de travail est issue des bonnes pratiques de développement Web mises en place depuis plusieurs années, la "disruption" n'a pas en ce domaine son mot à dire. En effet, dans la mesure où le développement via des cadritiels induit une notion d'abstraction supplémentaire et une complexité due à la structure du cadritiel, les bonnes pratiques sont dans ce cas l'unique solution pour réussir à comprendre rapidement les notions du cadritiel.

Nous allons donc prendre en compte deux familles de composants : les composants `parent` et le composants `enfant`. Les spécificités de ces composants sont définies dans les chapitres ci-dessous.

<br>

## Définition d'un composant "parent"

Un composant `parent` est celui qui représente la vue affichée dans le navigateur, c'est-à-dire un composant qui présente d'autres composants afin de créer la mise en page d'une vue. Pour faire le rapprochement avec PHP, une vue serait le fichier `index.php` dans lequel des fonctions `include` permettent de charger un autre fichier PHP.

Nous avons déjà créé précédemment la vue `HomeView.jsx` que nous avons placé dans le dossier `views`, nous vous conseillons de toujours nommer le dossier de vos composants `parent` de cette manière.

Qu'il soit `parent` ou `enfant`, les composants [React.js](https://fr.reactjs.org) ont toujours la même structure. Il sont constitués d'un `template`, d'un `script` et en option d'un `style`. Nous allons à présent reprendre le fichier `HomeView.jsx` afin d'indiquer l'utilité de chacun des éléments d'un composant :

// Imports
import React, { Component } from 'react';

// Define component
class HomeView extends Component {

    constructor(props) {
        // Props are used to bind data between components
        super(props);
    }

    render() {
        return (
            <div />
        )
    }
}

// Export component
export default HomeView;

<br>

## Définition d'un composant "enfant"

Un composant `enfant` peut être utilisé dans plusieurs composants `parent` différents. Ils sont en règles générale constitué de peu de code, l'objectif étant d'avoir des composants `enfant` les plus réutilisables possibles, c'est pourquoi il est conseillé d'avoir une idée générale assez précise des composants `enfant` à créer pour une application.

Les composants `enfant` doivent être placé dans le dossier `components` à l'intérieur du dossier `src` de votre application. Vous avez tout le loisir d'organiser à l'intérieur du dossier `components` des sous-dossiers pour les composants que vous allez créer.

Nous allons prendre en exemple de composant `enfant` celui qui va nous permettre de mettre en place la navigation de notre application. Nous allons commencer par créer notre composant avec la commande suivante :

touch src/component/HeaderApp.jsx

<br>

Nous allons profiter de la mise en place de notre navigation pour définir certaines fonctionnalités importantes. Nous ouvrons donc le fichier `HeaderApp.jsx` pour y ajouter le code suivant :

// Imports
import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom'
import { Link } from 'react-router-dom';

// Define component
class HeaderApp extends React.Component {
    // Method to bind click on title
    onClickTitle = (event) => {
        // Use props to send data to parent component
        this.props.onChildClick("Data from HeaderApp.jsx");
    }

    render(props) {
        // Set navigation content
        const navigation = []
        for (const [index, value] of this.props.navLinks.entries()) {
            navigation.push(
                <li key={index}>
                    <Link to={value.path}>{value.name}</Link>
                </li>
            )
        }

        // Define App DOM content
        return (
            <header>
                <h1
                    /* Bind click event to perfom method */
                    onClick={ this.onClickTitle }
                >
                    {/* Bind value form parent component */}
                    { this.props.appItitle }
                </h1>
                <nav>
                    <Router>
                        <ul>
                            { navigation }
                        </ul>
                    </Router>
                </nav>
            </header>
        )
    }
}

// Export component
export default HeaderApp;

<br>

## Utiliser un composant "enfant" dans un composant "parent"

Un composant `enfant` peut être utilisé dans plusieurs composants `parent`, contrairement à un composant `parent` qui lui n'est utilisé qu'une seule fois. Nous allons à présent utiliser le composant `HeaderApp` pour illustrer la méthode qui permet d'intégrer un composant `enfant`.

Le rôle de notre composant `HeaderApp` est d'afficher la navigation de notre application, la règle veut qu'elle soit placée toujours au même endroit pour permettre aux utilisateurs de se repérer facilement. Nous allons donc éditer le composant principal de notre application - le composant `parent` le plus éloigné - pour intégrer notre composant.

Nous ouvrons donc le fichier `App.js` pour l'éditer de la manière suivante :

// Imports
import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom'
import Routes from './router/index';

// Child components
import HeaderApp from './components/HeaderApp';

// Define component
    class App extends Component {
    constructor() {
        // Super is mendatory to expend Component module
        super();

        // Define class properties
        this.appItitle = `My first React.js App`;
        this.navLinks = [
            {
                name: 'Home page',
                path: '/'
            }
        ]
    }

    onClickHeader = (event) => {
        return console.log('onClickHeader',event)
    }

    render() {
        return (
            <div className="App">
                {/* Use Child component */}
                <HeaderApp 
                    /* Inject value from parent component */
                    appItitle={ this.appItitle }
                    navLinks={ this.navLinks }

                    /* Bind event from child component */
                    onChildClick={this.onClickHeader}
                />

                <Router>
                    <Routes />
                </Router>
            </div>
        );
    }
}

// Export component
export default App;

> Chaque attribut de balise, lorsqu'ils sont plusieurs, doivent être chacun sur une ligne différente.

<br>

---

<br><br>

# Gestion de l'information en React.js

*Gestion des requêtes asynchrones dans une application Web*


---

<br>

## Le principe de "Single page application"

Développer une application Web en Javascript c'est avant tout travailler sur une structure de code qui permet de nourrir un DOM avec des informations, suite à une interaction utilisateur. Ce principe nécessite à la fois de connaître l'état de l'interface graphique et celui de l'information afin de présenter dans le navigateur les éléments qui correspondent à une requête utilisateur.

Le principe théorique à mettre en place ne date pas d'hier, dans la mesure où l'informatique moderne, qui se base sur le pattern MVC, a déjà dû répondre à cette problématique. Le pattern MVC est donc la base sur laquelle nous devons baser toutes nos réflexions en terme de développement. C'est en revanche les contraintes liées au Web qui doivent diriger notre réflexion quant à l'adaptation du pattern MVC dans le développement d'une application Web.

Les différents cadritiels Front ont des techniques qui se rapprochent, tant la problématique est commune à tous les projets qui gèrent des données. C'est en la matière les équipes qui développent React qui ont mis défini un nouveau pattern qui est à présent utilisé, en [React.js](https://fr.reactjs.org) par exemple : le pattern FLUX.

Initialement développé pour résoudre une problématique de mise à jour de notifications pour des messages chat, le pattern FLUX présente une méthodologie basse sur le principe d'observable, qui permet de définir des états et d'y associer des méthodes spécifiques. En [React.js](https://fr.reactjs.org), ce pattern est mis en place grâce au module `redux`.

> Support en cours de rédaction - Plus d'information : [Julien Noyer](https://www.linkedin.com/in/julien-n-21219b28/)