Simplifying JavaScript: A Handy Guide for Software Engineers/

...

/

Tip 50: Use Build Tools to Combine Components

Tip 50: Use Build Tools to Combine Components

In this tip, you’ll learn how to compile JavaScript code and assets with build tools.

We'll cover the following...

In the previous tip, you saw the advantages of the component architecture. You also learned about the one big problem with component architecture: It won’t work natively in browsers.

Also in the previous tip, you used the tools provided by create-react-app to get your project compiled and running. That’s great. You should always take advantage of predesigned build tools. Every project has one. Sometimes there are official projects—angular-cli and EmberCLI are examples—and if there are no official projects, search code repos such as github for Starter Packs. Eventually, however, you’ll need to customize your build.

Build tools

In this tip, you’re going to make a basic build process. Build tools can be exhausting, and it can be difficult to keep up with the latest trends and tools. Don’t get discouraged. A build tool is merely a way for you to process the code one piece at a time.

To begin, take a simplified version of your components from the previous tip. Start by removing everything except for some HTML, in the form of React JSX, and some JavaScript. It’ll be easier to make build tools when you have fewer assets. Here’s a basic container component:

Press + to interact
import React from 'react';
import Copyright from './components/Copyright/Copyright';
export default function App() {
    return (
        <div className="main">
            <footer>
                <Copyright />
            </footer>
        </div>
    );
}

Here’s a stripped-down version of your copyright component:

Press + to interact
import React from 'react';
export default function CopyrightStatement() {
    const year = new Date().getFullYear();
    return (
        <div className="copyright">
            Copyright {year}
        </div>
    );
}

Even though these files are simple, you couldn’t run them in a browser. And even if you could, you certainly wouldn’t be able to run them in older browsers. You need a tool to convert ES6 syntax—import and export— and JSX into compatible code.

Working with Babel

Fortunately, there’s an amazing tool called ...