Initiation à React (2/5)

Publié le 26/09/2016

L'application côté back

Par défaut, dans le dossier app/Resources/views, nous trouvons le fichier base.html.twig. Etant donné que ce fichier sera celui utilisé par tous les autres templates, nous devons le personnaliser comme ceci :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{% block title %}Nom projet{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        {% if app.environment == 'dev' %}
            <link rel="stylesheet" href="http://127.0.0.1:3000/static/style.css"></script>
        {% else %}
            <link rel="stylesheet" href="{{ asset('dist/style.css') }}" />
        {% endif %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
            {% if app.environment == 'dev' %}
                <script src="http://127.0.0.1:3000/static/bundle.js"></script>
            {% else %}
                <script src="{{ asset('dist/bundle.js') }}"></script>
            {% endif %}
        {% endblock %}
    </body>
</html>

Ce qui est intéressant ici, c'est le bloc {% block javascripts %}.

Comme nous sommes en environnement de développement, on insert le fichier servi par Webpack depuis le port 3000 du localhost (voir la configuration définie précédemment dans "output" de webpack.config.js). On remarque que le body est vide, ce qui nous fera une belle page blanche. Notez aussi que le fichier css (style.css) est servi de la même manière que bundle.js.

Le contrôleur par défaut affiche la page index.html.twig (qui elle-même étend base.html.twig, que nous venons de modifier). Voir le fichier src/AppBundle/Controller/DefautController.php.

Personnalisons ce fameux fichier index dans app/Resources/views/default/index.html.twig :

{% extends 'base.html.twig' %}
{% block body %}
    <div id="app"></div>
{% endblock %}

Voilà pour la partie twig.

Modifions légèrement la route utilisée dans le contrôleur src/AppBundle/Controller/DefautController.php aussi :

<?php

namespace AppBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;

class DefaultController extends Controller
{
    /**
     * @Route("{slug}", name="homepage", requirements={"slug"=".+"})
     */
    public function indexAction(Request $request, $slug = "default")
    {
        return $this->render('default/index.html.twig');
    }
}

Ainsi, toutes les urls seront gérées par ce contrôleur et React va prendre la suite en gérant le html et l'état des objets de l'application front.

Dans le cadre d'une application avec d'autres contrôleurs, il faudrait juste veiller à placer cette route en dernier dans le routing (voir le fichier app/config/routing.yml où il n'y a qu'un lien vers ce contrôleur pour l'instant), pour ne pas écraser la gestion des autres routes.

En résumé de cette partie, nous avons créé les conditions pour que React s'exécute au sein de notre application Symfony en ajoutant une simple balise div avec un id qui vaut "app".

Passons au plus intéressant : l'application React en elle-même.

L'application côté front

React fonctionne par composant. C'est-à-dire que des fichiers js vont inclure d'autres fichiers js et leur passer des objets.

Le composant de base s'appellera "app". Et sera rattaché au DOM par la balise "app" définie dans index.html.twig.

Créons donc ce premier composant dans app/Resources/js/app.js :

import React from 'react';
import ReactDom from 'react-dom';
import Component from './component.js';

ReactDom.render(<Component />, document.getElementById('app'));

Félicitations, votre application React est créée. Qu'a-t-on fait ? On a dit d'importer react, c'est le minimum. Puis react-dom, qui permettra de manipuler le DOM pour afficher nos composants. Enfin, on importe un composant nommé Component. Ce composant s'affichera dans la balise "app" du fichier HTML grâce à la fonction render de react-dom.

Bon si on regarde maintenant dans un navigateur l'adresse http://localhost:8000 (après avoir démarré le serveur node avec npm start et le serveur php avec php app/console server:run), on ne verra qu'une page blanche.

Pour commencer à afficher quelque chose, il faut créer le fichier component.js (toujours dans app/Resources/js/) avec ce contenu par exemple :

import React from 'react';

class Component extends React.Component {
    render () {
        return (<h1>Hello world!</h1>);
    }
};

export default Component;

Ici, on déclare un composant qui s'appelle Component et qui est une fonction. Dans cette classe, la méthode render, lorsqu'elle est appelée, affiche la phrase "Hello World !". Rien de complexe donc.

Si on retourne sur notre navigateur, et qu'on rafraîchit, on doit voir apparaître cette phrase. Les prochaines modifications se verront sans avoir besoin de rafraîchir grâce au module Hot Reload de React installé au début. Mais après une erreur console, la page ne se rafraîchit pas.

En ouvrant la console du navigateur, vous devriez voir des informations de ce style :

Ceci montre que l'application React a démarré.

Voilà, c'est tout pour cette partie. Dans une seconde partie, on va styliser un peu tout ça avec Twitter Bootstrap et voir des concepts plus avancés de React.