Focus training

Etape3.md

Créer un routeur et créer une ou plusieurs route.

Enoncé

1. D'abord la route doit faire un console.log
2. La route doit afficher un composant basique React type hello world
3. La route doit afficher un composant affichant la liste des paramêtres de la route

Corrigé

1. Faire un console.log

Placez vous dans le répertoire router et créer un nouveau fichier test-router.js.

import {router as Router} from 'focus-core';

const TestRouter = Router.extend({
    routes: {
        'test': 'testRouteHandler',
        'test/:id': 'testDetailRouteHandler',
        'test2(/:id)': 'testIdOptionnelRouteHandler', // exemple de route avec paramètre optionnel
    },
    testRouteHandler() {
        console.log('Hello World !');
    },
    testDetailRouteHandler(id) {
        console.log('Appel de test avec le paramètre : ' + id);
    },
    testIdOptionnelRouteHandler(optionalId) {
        if(optionalId) {
            console.log('J\'ai un paramètre dans mon URL ! : ' + optionalId);
            return;
        }
        console.log('Je n\'ai pas de paramètres dans mon URL.');
    }
});

new TestRouter();

Editez le fichier index.js pour importer le nouveau router créé.

import './home-router';
import './test-router';

Normalement, en accédant à l'URL http://localhost:3000/#test (n'oubliez pas le dièse ^^) depuis votre navigateur, vous devriez voir Hello World ! dans la console (F12) :

en accédant à l'URL http://localhost:3000/#test/1 (n'oubliez pas le dièse ^^) depuis votre navigateur, vous devriez voir Appel de test avec le paramètre : 1.

2. Afficher un composant basique React

Nous allons maintenant initialiser la page de détail d'un film, dans lequel nous allons dans un premier temps afficher l'identifiant récupéré dans l'URL.

Placez vous dans le répertoire router et créer un nouveau fichier movie-router.js.

import {application, router} from 'focus-core';
import MovieDetailView from '../views/movie/detail';

const MoviesRouter = router.extend({
    log: true,
    beforeRoute() {
        application.changeRoute('movies');
    },
    routes: {
        'movies(/:id)': 'movies'
    },
    movies(id) {
        console.log(`ROUTE: MOVIES ${id}`);
        this._pageContent(MovieDetailView, {props: {id}});
    }
});

new MoviesRouter();

Editez le fichier index.js pour importer le nouveau router créé.

import './home-router';
import './test-router';
import './movie-router';

Créer un répertoire views\movie\detail qui contiendra toutes les vues qui composent la page de détail de votre film et un fichier views\movie\detail\index.js

// libraries
import React, {PropTypes} from 'react';

export default React.createClass({
    displayName: 'MovieDetailView',
    propTypes: {
        id: PropTypes.number
    },
    /** @inheritDoc */
    render() {
        const {id} = this.props;
        return (
            <div>`Hey ! Mon id en paramètre {id}`</div>
        );
    }
});

Dans votre navigateur, vous devez obtenir ceci :

3. Afficher un composant affichant la liste des paramêtres de la route