create-react-app : une nouvelle appli React prête sans configuration

J'avoue, j'ai fait de grosses infidélités à Angular 2 ces derniers temps. D'abord car je ne suis pas marié à Angular, ni à Google, ensuite car c'est toujours une bonne idée de voir comment les ingénieurs d'une autre grosse boîte ont pensé et mis en oeuvre un framework (même si React, c'est que le V de MVC, j'ai du coup joué aussi avec react-router, Redux ...etc... mais c'est une autre histoire). La vie du développeur React était tristement célèbre pour la phase de configuration qui précédait la première ligne de code. Et bien là, avec le package create-react-app, c'est vraiment du zéro config

npm install -g create-react-app

Là, sur mon vieux PC, ça a pris quelques minutes. Mais ensuite, la création d'une appli n'a pas été plus compliquée que ça :

create-react-app hello-world

Un petit npm start qui ne dépaysera pas les développeurs node que nous sommes :

cd hello-world  
npm start

Tadam : vous avez une appli React sur le port 3000.

inscrivez vous à la newsletter de meanjs.fr.

Création d'un petit presentational component

Création d'un petit presentational component histoire de vérifier que tout va bien. Je le mets dans un répertoire "components" que je viens de créer - ce n'est pas obligatoire, juste une habitude personnelle de mettre tous mes components react dans un repertoire racine "components", ayant un sous-répertoire "movie" -, le code du component étant dans MoviePage.js, avec le code qui suit :

import React from 'react';

export const Movie = () => {  
    return (
        <div>
            <h1>Super film</h1>
            <div> Je suis un film :)</div>
        </div>
    );
};

export default Movie;

Utilisation de ce component depuis App.js grâce à un

import Movie from './components/movie/MoviePage';

puis dans le JSX à l'ajout de :

"<Movie />"

import React, { Component } from 'react';  
import logo from './logo.svg';  
import './App.css';  
import Movie from './components/movie/MoviePage';  

class App extends Component {  
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Movie />
      </div>
    );
  }
}

export default App;

Et voilà.

Seul eslint a rajouté une étape

Bon, j'ai ensuite dû copier coller d'un autre projet un ".eslintrc" pour arrêter d'être assomé par VS Code qui se plaignait à juste titre de l'absence dudit fichier :

{
  "ecmaFeatures": {
    "arrowFunctions": true,
    "binaryLiterals": false,
    "blockBindings": true,
    "classes": true,
    "defaultParams": true,
    "destructuring": true,
    "forOf": true,
    "generators": true,
    "modules": false,
    "objectLiteralComputedProperties": true,
    "objectLiteralDuplicateProperties": false,
    "objectLiteralShorthandMethods": true,
    "objectLiteralShorthandProperties": true,
    "octalLiterals": false,
    "regexUFlag": false,
    "regexYFlag": false,
    "restParams": true,
    "spread": true,
    "superInFunctions": true,
    "templateStrings": true,
    "unicodePointEscapes": true,
    "globalReturn": false,
    "jsx": true
  }
}

Attention : c'est pure paresse. Vous trouverez probablement des fichiers ".eslintrc" plus complets. Et tout baigne.

J'ajouterai du routage via react-router, ainsi que Redux pour continuer à jouer avec ce state container qui me met dans tous mes états (vue l'énergie que j'ai économisée à ne pas configurer plein de choses, j'ai du temps de cerveau pour les jeux de mots douteux). Mais je suis confiant dans ce qui a été généré par ce yeoman du pauvre :D

Voilà, essayez donc No Configuration pour monter en compétence sur React sans passer trop de temps en configuration, si comme moi, vous rongez votre frein en attendant la version finale d'Angular 2.

React create app with no configuration

Confidences

Si vous avez lu jusque là, je peux vous avouer que je suis passé à React (en plus d'Angular 2) pour trois raisons :

celle-là, vous la connaissez déjà, j'attends qu'Angular 2 sorte en version finale, car entre la RC1 et la RC4, je trouve que certains changements continuent à être plus importants qu'ils ne sont d'ordinaire pour des RC. Routage et gestion des formulaires ont été quasiment réécrits entre la RC 1 et la RC 4. Ca va créer, à juste titre, de la confusion pour ceux qui suivent la playlist Angular 2. Donc ça m'a libéré du temps pour autre chose
je voulais tester Meteor.js avec React : et franchement, ça me plait beaucoup. Bon, ça a été un peu compliqué de comprendre comment faire cohabiter React et Blaze, vu que ce sont les templates Blaze qui sont utilisés par le module de connexion/authentification natif à Meteor par exemple. Mais ça valait le coup
J'ai voulu tester React pour jouer avec la combinaison classique React/Redux, après avoir été tenté par Redux via ngrx/store d'Angular 2, qui m'a fait donné envie de continuer de jouer avec actions, reducers et autre store. Et puis comme Redux est agnostique vis à vis du client, peut-être que le couple Redux/Angular va devenir un classique (même si ngrx-store ...)