Our project structure

Let’s see what this looks like in practice. In our chatastrophe project folder, create an src folder (which should be next to the public and node_modules folder in the root of the project folder).

The src folder is where all our React files will live. To illustrate what this will look like, let’s create some mock files.

Inside src, make another folder, called components. Inside that folder, let's make three JavaScript files. You can name them whatever you like, but for example purposes, I’ll call them Component1.js, Component2.js, and Component3.js.

Imagine that each of these component files holds a bit of our user interface. We need all three files to construct a complete UI. How do we import them all?

Well, we can do what we’ve done so far when we needed to use JavaScript files. We can create a script tag for each component in our index.html. That’s the brute force way.

However, as our application grows, this approach will quickly become unwieldy. An application such as Facebook, for example, will have tens of thousands of components. We can’t write tens of thousands of script tags!

Ideally, we’d have only one script tag, with all our JavaScript combined. We need a tool that takes our varied files and squishes them together, giving us the best of both worlds--organized, separated code for the developer, and compressed, optimized code for the user.

"But wait, Scott," you might say, "if we put all our code in one file, won’t that take longer for the browser to download? Isn’t it a good thing to have small, separate files?"

You're exactly right. We don’t want to go back to a monolithic single file in the end, but neither do we want thousands of separate files. We need a happy medium of a handful of code files, and we’ll get to that medium. However, to start, let’s see how we can bundle multiple JavaScript files into just one using our new friend--Webpack.