Introduction

TLDR;

create-react-app permet de démarrer rapidement un projet React, sauf qu’il n’intègre aucune autre librairie.

Dans cet article on va voir comment je configure des librairies essentielles à tout projet React.

React est une très bonne librairie pour organiser le code de votre site ou application web, elle est performante, très bien documentée et supportée par une large communauté.

Mais React est avant tout une librairie qui ne gère que la partie affichage des composants, on peut dire donc que quand on choisit React on choisit plutôt un écosystème, on pioche des librairies pour gérer tous les aspects de la création d’une application web, par exemple :

Gestion du state ( avec Redux, MobX …)
Routage ( react-router)
Formulaires (Redux-form)
Build ( webpack, babel …)

Démarrer un projet React peut être fastidieux, cependant facebook a créer un outils très utile pour faciliter le démarrage d’une application React nommé create-react-app.

Sauf que même avec cet outil, il est nécessaire de configurer soit même pas mal de librairies avant de réellement commencer à travailler.

Dans cet article on va donc créer un projet avec create-react-app, puis configurer quelques librairies pour faciliter le démarrage d’un projet React.

Création de projet

Avant de commencer le projet, assurez vous d’avoir une version à jour de NodeJS installée sur votre pc.

à noter que j’utilise yarn au lieu d’ npm pour la gestion des dépendances, remplacez yarn par npm dans mes exemples pour utiliser ce dernier.

On commence donc par créer projet d’exemple avec create-react-app, pour ce faire lancez la commande suivante :

npx create-react-app my-example

le projet react est maintenant créé, vous pouvez tester avec la commande :

cd my-exemple
yarn start

Ajouter quelques librairies essentielles

On va ensuite configurer quelques librairies qui vont nous aider à créer notre application, je travaille principalement sur des applications web, et en général j’utilise les librairies suivantes :

redux (gestion du state)
redux-thunk (gestion des actions creators asynchrones)
redux-form (facilite la création de formulaires)
immutable (impose l’immutabilité de notre state)
react-router (routage coté navigateur)
react-redux (facilite l’intégration de react avec Redux)

on installe donc toutes les dépendances avec la ligne de commande suivante.

yarn add immutable redux-form redux-thunk react-router-dom react-redux redux

ajouter le dossier src au NODE_PATH

En ajoutant le dossier src/ au NODE_PATH, on peut faire des imports avec des chemins absolus vers nos composants.

pour faire cela, créez un fichier .env à la racine du projet avec le contenu suivant :

chemin: .env

PORT=3000
CHOKIDAR_USEPOLLING=true
NODE_PATH=src

Préparation de notre store avec Redux

J’ai tendance à mettre tout ce qui concerne le state global de l’application dans un dossier store/, on commence donc à configurer notre store:

chemin: src/store/index.js

import { createStore, applyMiddleware } from "redux";
import thunkMiddleware from "redux-thunk";
import combinedReducers from "./reducers";

const reduxChromeExtesionConnection =
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();

export function initStore(initialState) {
  const middlewares = [thunkMiddleware];

  const store = applyMiddleware(...middlewares)(createStore)(
    combinedReducers,
    initialState,
    reduxChromeExtesionConnection
  );
  return store;
}

export default initStore;

Dans ce bout de code on configure les choses suivantes :

Création du store avec Redux
Configuration du plugin redux-thunk pour permettre la création d’actions asynchrones
Configurer le store pour utiliser l’extension chrome de Redux si elle est installée sur votre navigateur.

Pour faciliter la configuration du Hot module reload ( voir chapitre correspondant) on centralise tout nos reducers dans un seul fichier.

chemin: src/store/reducers.js

import { combineReducers } from "redux";

import { reducer as formReducer } from "redux-form";

// Import your reducers here

const reducers = {
  form: formReducer
};

export default combineReducers(reducers);

on centralise dans ce fichier tout nos reducers, et on en profite pour ajouter le reducer de redux-form.

Activer le hot module reload

Le hot module reload ne fonctionne pas trop bien avec create-react-app, en effet, à la moindre modification la page est rechargée, la prochaine étape est donc de corriger ce problème.

on commence par le point d’entrée de l’application, modifiez ce fichier avec le contenu suivant :

chemin: src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "App";
import { Provider } from "react-redux";
import configureStore from "store";

const store = configureStore();

const render = Component => {
  return ReactDOM.render(
    <Provider store={store}>
      <Component />
    </Provider>,
    document.getElementById("root")
  );
};

render(App);

if (module.hot) {
  module.hot.accept("./App", () => {
    const NextApp = require("./App").default;
    render(NextApp);
  });
}

Puis on modifie la configuration du store précédement faite, modifiez la fonction initStore pour ressembler à l’exemple ci dessous :

chemin: src/store/index.js

...
export function initStore(initialState) {
  const middlewares = [thunkMiddleware];

  const store = applyMiddleware(...middlewares)(createStore)(combinedReducers, initialState, reduxChromeExtesionConnection);

  if (process.env.NODE_ENV !== 'production') {
    if (module.hot) {
      module.hot.accept('./reducers', () => {
        store.replaceReducer(combinedReducers);
      });
    }
  }

  return store
}
...

Ajouter le routeur

On va maintenant mettre en place une configuration basique de React router, mais avant de commencer on va d’abort créer deux pages pour tester notre configuration.

chemin: src/views/SomePage1.jsx

import React from "react";
import { Link } from "react-router-dom";

export default function SomePage1() {
  return (
    <div>
      <h1>Page 1</h1>
      <Link to="/">Page 1</Link>
      <br />
      <Link to="/page2">Page 2</Link>
    </div>
  );
}

chemin: src/views/SomePage2.jsx

import React from "react";
import { Link } from "react-router-dom";

export default function SomePage2() {
  return (
    <div>
      <h1>Page 2</h1>
      <Link to="/">Page 1</Link>
      <br />
      <Link to="/page2">Page 2</Link>
    </div>
  );
}

Puis je configure mes routes directement sur App.js, remplacez le contenu de ce fichier avec le code suivant :

chemin: src/App.js

import React, { Component } from "react";
import { Router, Route, Switch } from "react-router-dom";
import createHistory from "history/createBrowserHistory";

import "./App.css";

import SomePage1 from "views/SomePage1";
import SomePage2 from "views/SomePage2";

export const history = createHistory();

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <Switch>
          <Route path="/" exact name="Page1" component={SomePage1} />
          <Route path="/page2" name="Page2" component={SomePage2} />
        </Switch>
      </Router>
    );
  }
}

export default App;

Conclusion

On a vu une façon simple de démarrer un projet React, cependant il existe pas mal de façons de faire, donc n’hésitez pas à vous inspirer des exemples présents sur github pour des solutions plus complètes.

Belahcen Marwane

Démarrer un projet d’application web avec create-react-app