Créez un projet React en 5 min avec 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.