Parcel Basic Setup for JS and React | Code Boost
Description: Let's face it, setting up web projects can be a pain. Between finicky build tools and endless configuration files, the word "Webpack" might send a shiver down your spine. But what...

Article

# Parcel Basic Setup for JS and React

By Matt · Mar 27, 2024

Let's face it, setting up web projects can be a pain. Between finicky build tools and endless configuration files, the word "Webpack" might send a shiver down your spine. But what if I told you that there's a way to get your projects up and running with almost no setup? Enter Parcel.js, the zero-configuration web application bundler. What is Parcel.js? Parcel.js is a super-fast bundler that aims to make web development a breeze. With Parcel, you can focus on building your application and let it handle the nitty-gritty details of asset bundling, code transformations, and setting up a development server. That means no more lengthy webpack configurations! Setting the Stage Before we dive in, make sure you have the following prerequisites:

- Node.js and npm (or yarn): You can download these from the official Node.js website (https://nodejs.org).

Let's install Parcel globally to have it ready whenever you start a new project: Bash npm install -g parcel-bundler Your First Vanilla JavaScript App

1. Project Setup:

- Create a new project folder:
- Bash
- mkdir my-parcel-project
- cd my-parcel-project

- Initialize your project with npm:
- Bash
- npm init -y

- Create the following files:
  - - index.html
    - index.js
  - styles.css

1. Basic Boilerplate:

- index.html
- HTML
- <!DOCTYPE html>
- <html>
- <head>
- <title>My Parcel App</title>
- <link rel="stylesheet" href="styles.css">
- </head>
- <body>
- <div id="app"></div>
- <script src="index.js"></script>
- </body>
- </html>

- index.js
- JavaScript
- const appDiv = document.getElementById('app');
- appDiv.innerHTML = '<h1>Hello from Parcel!</h1>';

- styles.css
- CSS
- body {
- font-family: sans-serif;
- margin: 20px;
- }

1. Parcel in Action
2. Now for the magic! Start Parcel's development server:
3. Bash
4. parcel index.html

1. Open your web browser and go to http://localhost:1234/. You should see your "Hello from Parcel!" message proudly displayed. Make a change in any of your files, save, and see your browser update instantly – that's Parcel's hot reloading!

Section 3: Adding React to the Mix

1. Installing Dependencies:
2. Bash
3. npm install react react-dom

1. Converting to a React Structure

- Create a components folder and add a simple component file (e.g., MyComponent.jsx):
- JavaScript
- import React from 'react';
- const MyComponent = () => {
- return (
- <div>
- <h2>Hello from my React component!</h2>
- </div>
- );
- };
- export default MyComponent;

- Modify index.js:
- JavaScript
- import React from 'react';
- import ReactDOM from 'react-dom/client';
- import MyComponent from './components/MyComponent';
- const root = ReactDOM.createRoot(document.getElementById('app'));
- root.render(<MyComponent />);

1. Let Parcel Work Its Magic
2. No extra configuration is needed. Run your parcel index.html command again, and your React app is ready!

Section 4: Deployment Made Easy (Netlify) Check out Netlify! It's a fantastic way to host your projects:

1. Create a Netlify account: https://netlify.com
2. Deploy: Link your GitHub repo or drag-and-drop your project files.

Conclusion Parcel.js simplifies web app development. Give it a try on your next project, especially if you're looking for a quick setup. Keep exploring – Parcel supports even more like Sass, image optimization, and more!