Créez un projet React en 5 min avec Parcel

12 décembre 2017 | Parcel

Parcel 📦🚀 est un nouveau bundler (encore un 😒). Sorti il y a à peine une semaine, il se décrit comme un bundler d'application web super rapide et avec zéro configuration. En clair, ça permet de compiler un projet web moderne super facilement. Si vous avez déjà eu à configurer Webpack, vous devez déjà avoir des coeurs dans les yeux 😍 en lisant ces lignes.

Créer un projet

La première étape consiste à créer votre projet, on va donc commencer par créer un nouveau dossier et initialiser un package.json.

mkdir my-react-project
cd my-react-project
npm init -y

Notre nouveau projet contient un fichier unique package.json dans lequel on trouvera le nom, la version et les dépendances du projet.

Vous vous souvenez de l'époque où on faisait des sites internet ? En ce temps là, on avait juste à créer un fichier "index.html" pour commencer à travailler ? Et bah on va faire comme si c'était encore le cas. Commençons par créer un fichier "index.html" classique :

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My React Project</title>
</head>

<body>
  Hello world!
</body>

</html>

Vous pouvez désormais ouvrir votre fichier "index.html" dans votre navigateur et voir un joli "Hello world!" s'afficher !

Installer Parcel

Commençons par installer Parcel dans notre projet (en dépendance locale) :

npm install --save-dev parcel-bundler

On va maintenant lancer parcel dans notre projet et ce sera l'unique commande pour démarrer notre environnement de développement. Utilisons npx qui permet d'exécuter une dépendance locale et ajoutons l'option "--open" pour que Parcel ouvre le navigateur automatiquement.

npx parcel --open

Ça y est Parcel tourne et notre page "hello world" s'affiche !

Ajouter du JavaScript

On souhaite maintenant ajouter du JavaScript à notre projet. Vous avez sûrement oublié, mais à la belle époque il suffisait d'inclure un script dans notre page HTML. Grâce à Parcel c'est exactement comme ça que l'on va procéder.

On crée un fichier index.js :

document.body.write('Hacked')

Et on l'inclut dans notre page HTML :

<body>
  Hello world!
  <script src="index.js"></script>
</body>

Sans même recharger la page, vous voyez apparaître "Hacked" dans le navigateur. Ça fonctionne !

Configurer Babel

Parcel est un outil magique, mais il ne peut pas deviner la configuration Babel que vous souhaitez utiliser pour votre projet. Il faut donc créer un fichier .babelrc :

{ "presets": ["env", "react"] }

Dans notre cas on va utiliser deux presets: "env" et "react". "env" permet d'être compatible avec les vieux navigateurs et "react" permet d'utiliser la syntaxe JSX.

N'oublions pas d'installer les deux presets :

npm install --save-dev babel-preset-env babel-preset-react

Ajouter React

Notre projet est maintenant prêt à accueillir notre application React. Installons les dépendances nécessaires, à savoir "react" et "react-dom".

npm install react react-dom

Modifions notre fichier HTML pour ajouter un élément "root" qui sera le point d'attache de notre application React :

<body>
  <div id="root"></div>
  <script src="index.js"></script>
</body>

Remplaçons "index.js" par un "Hello World" React assez basique :

// index.js
import React from 'react'
import { render } from 'react-dom'

render(<div>Hello world from React!</div>, document.querySelector('#root'))

Hé oui c'est déjà terminé, "Hello world from React!" s'affiche dans le navigateur. Vous êtes désormais prêt à développer !

Livrer en production

Une fois votre projet terminé, il vous faudra le livrer en production. Là encore avec Parcel c'est très simple, il vous suffit de lancer la commande suivante :

parcel build

Parcel crée un dossier dist/ avec tout ce qu'il faut à l'intérieur !

Conclusion

Si vous souhaitez démarrer un projet JavaScript moderne aussi rapidement que vous le faisiez il y a 5 ou 6 ans, Parcel est fait pour vous !

Il est très rapide et supporte tout ce qui est nécessaire dans un projet d'aujourd'hui : Babel, le Code Splitting, les assets, le Hot Module Reloading...

Vous pouvez désormais oublier create-react-app et jeter un coup d'oeil à la documentation de Parcel.

En bonus voici un Gist avec tous les fichiers utilisés dans cet article.