High level Context Setting:
React allows you to build user interfaces through components. A component is a group of one or more HTML elements on a page (it's essentially a template put together by JavaScript). For example, an 'article' component would be made up of the article title, article image, article body, etc (because those are the building blocks of an article on a webpage). What makes react so popular is that these components can be reused. In other words, with the above article component example, the article component can be used over an over again for different news stories (because every news story would have a title, image, and content to go with it) - we would only have to pass in the relevant title, image, and body text. Just like you write a method once and can reuse it numerous time, you just pass in the necessary props (arguments). Think of a component as a method - because it is. One thing to know about component, you have to import them into the page you are working on before you can use them. In this post we'll explore an effective way to structure you components folder and how to leverage an index file to make importing components more efficient.
How to import a React component
As mentioned earlier, before using a React component (see line 7 in screenshot below), it first must be imported (see line 2 in the screenshot below). While this works just fine, notice how we have to define the exact path so React knows where to pull the component from. What happens if we want to import 20 components, would we have to write 20 import lines? Yes, unless we use an index file to handle this much more elegantly. 
How to import a React component using an index.js file
If we utilize an index file, we could import many components with just one line. The import statement would look like the below: import {Component1, Component2, Component3, Component4, Component5 } from './components'; In this case we are able to import multiple components because they are all stored in the same folder. When we call the component this way, React will look at the name of the component we are trying to import, for example 'Component1' - React will look for 'Component1' in the index.js file, the index.js file will contain the path for 'Component1'. In the screenshot below, notice the index.js file in the components folder. [caption id="attachment_153" align="alignnone" width="218"]
Components folder with index.js file[/caption] NOTE: An index file is always the first file to be served in a directory/folder. This is why you always name your HTML homepage index.html (it's the first page that you want served when someone pulls up your website/directory).
Let's take a look at what's in the index.js folder
As you can see in the screenshot below, the index.js file contains the path/destination of each component. So, when we import the component from the components folder, React will check to see if there is a index.js file, if there is, it will reference that file to pinpoint the location/path of each component that is being imported. 
This also means that if we create a new component, that component should be reflected in the index file before we can import it as part of the single import statement.
Summary
As projects get more complicated, we want to make our code shorter and easier to look at and understand. Having many import statements is redundant. The DRY (Don't Repeat Yourself) principle encourages writing code once and reusing that original code, as opposed to copying and pasting which inflates your code base and makes your program more prone to human error. By using an index file, we can quickly import components that we need across multiple React methods with just one line.