Créer une application React avec Parcel 🌳
🗓 07 mars 2021
Pré-requis
- 📌Node installé
- 📌Npm ou Yarn installé
- 📌notions en React
Introduction
Commencer un projet React est très facile grâce à des outils comme create-react-app
. Mais si nous voulons aller plus loin et personnaliser le projet selon notre besoin, il est impératif d’utiliser un bundler.
Module bundler
Un module bundler est un outil utilisé en frontend pour assembler les différents fichiers de notre projet. Typiquement si notre code source ressemble à cela
package.json
src
|-- index.js
|-- components
|-- App.js
|-- App.css
Un bundler nous permet d’assembler ces fichiers en un seul fichier javascript et css qui seront envoyés au navigateur
dist
|-- script.js
|-- style.css
|-- index.html
Mais il ne fait pas que cela, le bundler nous permet d’effectuer différentes opérations sur les fichiers de notre code source.
💡Le bundler nous permet notamment de faire du code-splitting, de la minification, ou encore d’appliquer des transformations grâce à un compilateur comme Babel
Parcel ou le bundler à zéro configuration
Il existe plusieurs bundlers plus ou moins faciles à utiliser. Parmi les plus faciles nous avons Parcel qui se veut “zéro configuration”. C’est-à-dire qu’on peut le mettre en place très rapidement.
💡Je pense que Parcel est l’outil parfait pour un développeur débutant avec React habitué à
create-react-app
pour s’essayer aux bundlers.
Installation
Pour installer Parcel sur un projet il suffit d’exécuter
yarn add -D parcel@next
# ou
npm install -D parcel@next
💡Parcel est un outil de développement, donc il fait partie des dépendances de dev d’où l’argument
-D
💡Nous allons utiliser Parcel 2 qui est encore en version beta. Par rapport à la version 1, je trouve que l’API est plus simplifiée. Mais ne t’en fais pas, si tu veux utiliser Parcel 1 ce n’est qu’une question d’adaptation.
Création d’un projet React
Initialisation du package.json
Pour créer notre projet React, il faut d’abord créer le fichier package.json
. Pour cela, nous allons nous mettre dans un dossier react-parcel
puis exécuter npm init -y
mkdir react-parcel
cd react-parcel
npm init -y
💡
-y
permet d’initialiser notre projet avec toutes les informations par défaut dans lepackage.json
Installation des dépendances
En dehors de Parcel, le minimum nécessaire à installer pour créer notre projet sont react
et react-dom
yarn add react react-dom
yarn add -D parcel
# ou
npm install react react-dom
npm install -D parcel
Hello World React
Nous allons mettre en place un projet Hello World très simple. Dans react-parcel
, nous allons créer un dossier src
et dedans on y mettra les fichiers index.js
et index.html
# dans react-parcel
mkdir src
cd src
touch index.js
touch index.html
index.html
est le point d’entrée de notre projet React (ce qui rend Parcel différent des autres bundlers qui spécifient un fichier Javascript en point d’entrée). Dedans nous allons écrire
<!DOCTYPE html>
<html>
<head>
<title>React Parcel</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="index.js"></script>
</body>
</html>
💡Comme tu peux le constater, nous référençons notre fichier
index.js
dans le fichierindex.html
en spécifiant letype="module"
💡L’élément
div
avec l’identifiantroot
nous permettra d’encrer notre application React à cet endroit
Dans index.js
, nous allons écrire
import React from 'react'
import { render } from 'react-dom'
import App from './components/App'
render(<App />, document.getElementById('root'))
Et enfin, nous allons créer un dossier components
dans le dossier src
où on y mettra les fichiers App.js
et App.css
# dans src
mkdir components
cd components
touch App.js
touch App.css
// App.js
import React from 'react'
import './App.css'
const App = () => (
<main>
<h1>Hello World</h1>
<p>This is a React application built with Parcel</p>
</main>
)
export default App
/* App.css */
body {
background-color: lightgray;
font-family: sans-serif;
}
h1 {
color: dodgerblue;
}
Scripts Parcel
Pour lancer Parcel et construire notre projet, nous allons modifier le fichier package.json
pour ajouter les scripts de commande suivants
{
// ...
"scripts": {
"start": "parcel serve src/index.html",
"build": "parcel build src/index.html"
}
// ...
}
💡
parcel serve
permet de lancer le projet en mode développement. Parcel est configuré par défaut avec leHot Reload
qui permet d’effectuer des modifications dans le code et d’appliquer ces changements dans l’application sans rafraîchir la page du navigateur
💡
parcel build
permet de construire et de bundler le projet dans un dossier appelédist
(pour distribution). Ce dossier peut ensuite être déployé sur un serveur (Netlify
ouGithub pages
par exemple)
Exécution
Lançons maintenant notre projet en exécutant la commande
yarn start
# ou
npm run start
Par défaut le serveur de Parcel se lance sur http://localhost:1234
Et voilà ✨ Nous venons de configurer simplement une application React avec Parcel 😁
Pour aller plus loin
Parcel est très facile à mettre en place. Cependant, ce que nous avons vu ne nous permet pas de traiter tous les cas d’utilisation.
Je te conseille vivement de lire la documentation (v1 ou v2) pour connaître tout ce que tu peux réaliser avec cet outil.
💡Parcel est très puissant mais personnellement je préfère utiliser Webpack pour avoir plus de flexibilité et de contrôle. Mais ce sera pour un autre article.
Voici quelques trucs en plus que tu peux essayer de mettre en place pour t’entraîner
- 📌utiliser un préprocesseur CSS (sass)
- 📌configurer le code-splitting
- 📌configurer un proxy vers un serveur d’API