# Folder Architecture

Shopify follows a pattern called the *Component Folder Pattern* to write component. This pattern helps us keep our code base scalable as we go and we add new components.

## Resources

* Writing Scalable React Apps with the Component Folder Pattern  

  <https://medium.com/styled-components/component-folder-pattern-ee42df37ec68>
* The 100% correct way to structure a React app (or why there’s no such thing &#x20;

  <https://hackernoon.com/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed>
* CLI utility for quickly creating new React components &#x20;

  <https://github.com/joshwcomeau/new-component>
* Atom package to rename `index.js` files to their parent directory names &#x20;

  <https://github.com/joshwcomeau/nice-index>

## TL;DR;

**From:**

```
src/
|- App.js
|- Title.js
|- Title.css
|- ProductList.js
|- ProductList.css
|- ProductItem.js
|- ProductItem.css
```

**To:**

```
src/
|- App.js
|- Title/
    |- index.js
    |- Title.js
    |- Title.css
|- ProductList/
    |- index.js
    |- ProductList.js
    |- ProductList.css
|- ProductItem/
    |- index.js
    |- ProductItem.js
    |- ProductItem.css
```

### `index.js`?

There is two thing to highlight here: 1. **First**, we have a file named `index.js`. This allows us to keep our import simple. We will still be able to do: `import ProductList from './ProductList'` from another `App.js` for instnace. Webpack will automatically load the `index.js` file. 2. **Second**, the `index.js` file contains only a single line of code: `export {default} from './ProductList'`. It's a weird synthax, I know, but it basically exports the `default` export from `ProductList` to be the `default` export of the current file. 🤓

#### Why not write your component in `index.js`?

At this point you might be wondering why we don't put all the code of `ProductList` in `index.js`. If you read about the *Component Folder Pattern*, you will see that some people actually write the content of their component inside `index.js` (See [Donavon West's article](https://medium.com/styled-components/component-folder-pattern-ee42df37ec68) for instance - *Writing Scalable React Apps with the Component Folder Pattern*).

The problem with this, is that there is a little side effect. A very annoying side effect:

![Atom tab](https://366599030-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEGRfOxS6iFE8GUqpjc%2F-LEGRjwPuGTTScW_73Bs%2F-LEGRrybzNEbiX4BFUBV%2Ftabs.png?generation=1528227399031882\&alt=media)

* All the tabs of your editor will be named `index.js`
* When you will search for your component file, you will end up having a hard time finding your file.

**This is basically why we chose to favor having this "dumb"** `index.js` **file.**

If on your own project you still want to write the content of your Component in `index.js`, `joshwcomeau` wrote a [cool Atom plugin](https://github.com/joshwcomeau/nice-index) to show the name of the folder when you open an `index.js` file. But because **at Shopify we work at scale** and because everyone work with different editors, we can't ask everyone to install an editor plugin.

### Don't worry, we got you covered

Because it is still a pain in the 🍑 to create a folder and this `index.js` file each time you want to create a new component you can use a [simple command line tool](https://github.com/joshwcomeau/new-component) that generates everything for you.