Apprendre ReactJS : create-react-app

Créer une application ReactJS, installer les dépendances, lancer l’application en mode DEV, lancer les tests et créer un build pour aller en production. Tout ce qu’il y a à savoir cet outil.

Créer une application React ou même un simple composant demandait la mise en place d’un ensemble d’outils et étapes pour la compilation du JSX en JavaScript, gérer les dépendances et optimiser les fichiers sources avant de pouvoir générer un artefact utilisable dans un autre projet. Heureusement pour nous ce n’est plus le cas aujourd’hui.

Avec la sortie de “create-react-app” développer et générer un artefact (bundle, build … appelez le comme vous voulez) devient aussi simple que lancer une seule commande.

installation

Cet outil est disponible sur Linux, Mac OS et Windows. Vous pouvez l’installer en utilisant NPM. Pour utiliser NPM, vous aurez besoin d’installer NodeJS.

> npm install -g create-react-app

Vous aurez besoin d’une version de Node >= 6 sur votre machine de développement. Node est utilisé par l’outil create-react-app pour gérer l’environnement de développement.

Pour ceux qui utilisent des versions de Node différentes de la 6, vous pouvez utiliser nvm pour avoir différentes versions de Node sur votre machine.

créer une application React

> create-react-app todo-app
> cd todo-app

Cette commande va créer un dossier appelé todo-app dans le repertoire dans lequel vous avez lancé cette commande puis générer la structure du projet et installer les dépendances du projet.

todo-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ └── favicon.ico
│ └── index.html
│ └── manifest.json
└── src
└── App.css
└── App.js
└── App.test.js
└── index.css
└── index.js
└── logo.svg
└── registerServiceWorker.js

Aucune configuration à faire et pas de structure de dossiers compliquée. On ne trouve que les fichiers et dossiers qu’il faut pour développer notre application sans penser à comment la lancer en mode DEV, la tester ou la préparer avant d’aller en production.

Pour lancer notre application en mode DEV nous pouvons utiliser l’une des deux commandes suivantes :

> yarn start 

ou bien

npm start

Une fois l’une de ces commandes est exécutée vous pourrez voir et tester l’application sur http://localhost:3000/.

L’application se rechargera à chaque fois qu’une modification est faite sur l’un des fichiers sources.

Pour lancer les tests nous utilisons la commande :

> yarn test
// ou bien
> npm test

Une fois notre application prête à affronter le monde nous pouvons créer notre artefact/bundle/build avec la commande:

> yarn build
// ou bien
> npm run build

Pour la création d’un bundle, create-react-app va compresser et optimiser les fichiers pour obtenir les meilleures performances possibles.

Pourquoi utiliser create-react-app ?

Si vous démarrez avec React, utilisez create-react-app pour automatiser la création de votre application. Il n’y a pas de fichier de configuration, et les scripts react sont la seule dépendance supplémentaire dans votre package.json. Votre environnement aura tout ce dont vous avez besoin pour créer une application React moderne :

  • React, JSX, ES6, et le support de la syntaxe Flow
  • Un serveur dev qui détecte les erreurs courantes
  • Utilisation du CSS et des images directement depuis javascript
  • Un script de compilation pour regrouper JS, CSS et des images pour la production, avec des source-maps.
  • Et bien plus encore

Limitations

Certaines fonctionnalités ne sont actuellement pas prises en charge:

  • Server rendering.
  • Les nouvelles extensions ( ex: décorateurs )
  • Les modules CSS
  • Le Hot-Reloading des composants React

Certaines de ces fonctionnalités pourraient être ajoutées à l’avenir si elles sont stables, utiles à la majorité des applications React, et pas en conflit avec les outils existants et n’introduisent pas de configuration supplémentaire d’après l’équipe de développement et create-react-app.