Bundlers are used to take our various source files (JavaScript, CSS, Sass, etc). and prepare them for use in the browser. This article assumes that you're already sold on using a bundler for your JavaScript applications. For more information on bundlers and how they work, check out this post by Alberto Gimeno
There are many great tools we can use to bundle our applications like webpack, rollup, and others. Today, however, I want to focus on Parcel.
While there is very little overhead with Parcel, there are two steps we need to take (as noted in the Parcel documentation).
First, we must install parcel as a global dependency: npm install -g parcel-bundler
OR yarn global add parcel-bundler
From there, we need to create a project folder and initialize the project (with a package.json file): npm init -y
OR yarn init -y
(remove the -y
flag if you'd rather walk through the initialization wizard).
At this point, we should be good to start writing some code. We'll start by writing a "Hello world" type React component. In the video, I called this SayHello.js and created it in the root of the project folder. In a less contrived project, we might want a little bit more organization (e.g. we could place the JavaScript files under /src/
).
SayHello.js
import React from "react";
export default function SayHello({ name }) {
return
Hello {name}!
; }
Next, we'll create an index.js file. We'll treat this file as the location where we will connect our React component with our DOM elements. We haven't created the HTML file yet but let's assume that we will eventually have an element with an id of "main" and we'd like to render our component into this element.
index.js
import React from "react";
import ReactDOM from "react-dom";
import SayHello from "./SayHello";
ReactDOM.render(
,
document.getElementById("main")
);
Finally, we'll create our HTML file that will serve as the entry point of the application. Please note: we're using some contrived markup in this example. Ideally, there would be more in our HTML file (like doctype, title, etc) but for the sake of clarity, we'll keep it pretty light.
index.html
Now we can jump back to our command line and type parcel index.html
from the project directory and we should be presented with something like the following indication that our project is now running.
? testParcel parcel index.html
Server running at http://localhost:1234
? Packaging
? Built in 1.52s.
Navigate to localhost:1234 in the browser, and we should see our running application.
Please check out the Parcel documentation for more information.
We are a leading niche digital & tech recruitment specialist for the North East of England. We Specialise in the acquisition of high-performing technology talent across a variety of IT sectors including Digital & Technology Software Development.
Our ultimate goal is to make a positive impact on every client and candidate we serve - from the initial call and introduction, right up to the final delivery, we want our clients and candidates to feel they have had a beneficial and productive experience.
If you’re looking to start your journey in sourcing talent or find your dream job, you’ll need a passionate, motivated team of experts to guide you. Check out our Jobs page for open vacancies. If interested, contact us or call 0191 620 0123 for a quick chat with our team.
Follow us on our blog, Facebook, LinkedIn, Twitter or Instagram to follow industry news, events, success stories and new blogs releases.
Back to Blog