What is Parcel?
Parcel is a web app bundler that enables you to get up running with zero configuration
Unlike other bundlers like Webpack, Parcel doesnβt require you to write a lot of code just to get started
It offers blazing fast performance because it utilizes multi core processing where others work off of complex and heavy transforms
Cool features π
- π Error logging => provides highlighted syntax in the code when it encounters an error
- π₯ Hot module replacement (HMR) => automatically updates modules as you make changes in develop
- βοΈ Code splitting => uses the import() syntax to split up your bundle
- π» Automatic transforms => code is automatically transformed using Babel, PostCSS, and PostHTML
π₯ And many more!
Alright, letβs get started! π
Create a new NPM (or with your preferred package manager) app
mkdir my-awesome-app
cd my-awesome-app
npm init
π₯ npm init will ask you a bunch of questions, if donβt want to answer them, tack on the -y at the end: npm init -y
Letβs install the dependencies π¦
- React
- Babel
- Parcel
npm install --save react
npm install --save react-dom
npm install --save-dev @babel/preset-react
npm install --save-dev @babel/preset-env
npm install --save-dev parcel-bundler
Create a .babelrc file
{
"presets": ["@babel/preset-react"]
}
Create a index.html file
<!DOCTYPE html>
<html>
<head>
<title>π</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
Create a index.js file
import React from "react";
import ReactDOM from "react-dom";
function App () {
return <h1>This is my amazing app</h1>
}
const mount = document.getElementById("app");
ReactDOM.render(<App />, mount);
Add the entry point to our package.json
"scripts": {
"start": "parcel index.html",
},
npm start
Weβre done! We can view our app on http://localhost:1234
Now go out and build that todo app!
cover image from: https://www.woolha.com/media/2018/09/using-parceljs-bundler-for-building-reactjs-application-1200x627.jpg
Top comments (0)