Tip 50: Use Build Tools to Combine Components

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: