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

  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

  https://github.com/joshwcomeau/new-component

• Atom package to rename index.js files to their parent directory names

  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 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

• 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 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 that generates everything for you.