Let's bundle!

🧶 We need to bundle.

If you remember the previous lessons, we wrote a bunch of React components. Stuff like this Rectangle component:

import Rectangle from "./Rectangle";

const Barplot = ({ color }) => {
  return (
    <div>
      <Rectangle color={color} />
      <Rectangle color={color} />
      <Rectangle color={color} />
    </div>
  );
};

export default Barplot;

We explained in depth why this approach is so convenient.

But unfortunately, the browser doesn't know how to read this kind of file organization. It doesn't even understand imports! The browser needs a single HTML file with some JavaScript code linked to it. It doesn't know fancy things like components or JSX!

So your code needs to be transformed before the browser can run it. That's the job of a module bundler.

Bundling is a tough job. Fortunately, we won't do it ourselves! We'll use a tool called Vite for this.

👋 Introducing Vite

Vite is a blazing-fast frontend build tool and one of the most popular open-source projects on GitHub. It does exactly the job we described above. You can check its homepage here. It's free, open source, and used by everyone — from solo developers to massive companies.

🔥 Your first Vite project

Prefer watching? Jump to the video.

1️⃣ Install Node.js

Before we can use Vite, we need Node.js installed on our machine. We mentioned Node in the JS fundamentals lesson. It's a JavaScript runtime: it lets you run JavaScript outside the browser, directly in your terminal.