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)