Initiation à React (3/5)

Publié le 27/09/2016

Installation de Twitter Bootstrap

Twitter Bootstrap, bien que discutable pour certains, reste pratique pour démarrer une appli web en mode responsive.

J'ai donc choisi de l'utiliser sur ce tutoriel, l'inconvénient majeur étant qu'il utilise jQuery (et jQuery, c'est le mal, surtout avec du code JS moderne).

Pour parer cet inconvénient, on ne va pas installer Bootstrap depuis les dépôts officiels.

Bootstrap-sass est un paquet NPM qui étend et compile Twitter Bootstrap en SASS. Seule la partie SASS est utilisée (donc pas de JS depuis Bootstrap). On l'installe en ligne de commande comme ceci :

npm i bootstrap-sass --save-dev

Puis on l'utilise en ajoutant ces 2 lignes au début du fichier app\/Resources\/scss\/style.scss :

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

React-bootstrap est un autre paquet NPM bien utile. Il remplace jQuery dans Bootstrap par du JS React. Il a seulement besoin du CSS de Bootstrap (généré par le SASS du paquet précédemment cité). On a donc 2 packages complémentaires. On aura aussi besoin de liens bootstrap compatibles avec le routeur. Pour l'installation de ces paquets :

npm i react-bootstrap react-router-bootstrap --save

Utilisation de Twitter Bootstrap

Reprenons le composant créé dans la première partie du tutoriel : component.js, qui n'affiche qu'un "Hello world!".

Voici à quoi il ressemblait :

import React from 'react';

const Component = () => {
 return (<h1>Hello world!</h1>);
};

export default Component;

Nous allons maintenant l'améliorer un peu :

import React from 'react';
import { Grid, Row, Col, Nav, Navbar, NavItem } from 'react-bootstrap';

const Component = () => {
    return (
        <Grid fluid>
            <Row>
                <Col sm={12}>
                    <Navbar>
                        <Navbar.Header>
                            <Navbar.Brand>
                                <a href="#">Site de tutoriel</a>
                            </Navbar.Brand>
                            <Navbar.Toggle/>
                        </Navbar.Header>
                        <Navbar.Collapse>
                            <Nav>
                                <NavItem href="#">Accueil</NavItem>
                                <NavItem href="#">Menu 1</NavItem>
                                <NavItem href="#">Menu 2</NavItem>
                            </Nav>
                        </Navbar.Collapse>
                    </Navbar>
                </Col>
                <Col sm={12}>
                    <div className="content">
                        <h1>Hello world!</h1>
                    </div>
                </Col>
            </Row>
        </Grid>
    );
};

export default Component;

Qu'a-t-on fait ? Rien de bien extraordinaire : on a ajouté une barre de menu et rendu le tout responsive. On peut d'ailleurs redimensionner l'écran pour s'en rendre compte. Si les serveurs ne sont pas démarrés, deux terminaux à lancer :

serveur node : npm start
serveur php : php app/console server:run

Puis dans un navigateur : http://localhost:8000

En mode desktop :

En mode mobile :

Pour rendre tout ceci plus propre et modulaire, ce code contenant la barre de menu sera à mettre dans un composant de layout, lui-même incluant un composant header.