Folder Architecture
Last updated
Last updated
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.
Writing Scalable React Apps with the Component Folder Pattern
The 100% correct way to structure a React app (or why there’s no such thing
CLI utility for quickly creating new React components
Atom package to rename index.js files to their parent directory names
From:
To:
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. 🤓
index.js?The problem with this, is that there is a little side effect. A very annoying side effect:
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.
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 for instance - Writing Scalable React Apps with the Component Folder Pattern).
If on your own project you still want to write the content of your Component in index.js, joshwcomeau wrote a 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.
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 that generates everything for you.
