Recently, while working with React I came across this scalable ‘Component’ folder structure and since then my app is well organised and looks un-cluttered. Let’s consider we have different components in our app as follows:

| – src/
++| – App.js
++| – SearchLoader.js
++| – SearchInput.js
++| – SearchError.js
++| – Button.js
++| – index.js
++| – TextField.js

The major problem I faced in the above directory structure is that as and when I kept adding components in my app, my src folder kept filling up. This created an issue when I had to find files related to a particular component. This gave me a hard time to find what I was looking for and cluttered my root folder. So I found the following approach which made it easy to organise my components.

| – src/
++| – App.js
++| – components/
++     | – Search/
++++++ | – index.js
++++++ | – SearchLoader.js
++++++ | – SearchInput.js
++++++ | – SearchError.js
++    | – Button.js
++    | – index.js
++    | – TextField.js

Imagine when you have many such components and in your Editor, while looking at the files you are looking at them all together. The above structure helps to reduce the visual clutter because you can simply collapse the folder you don’t wish to see as below; one of the perks.

| – src/
++| – App.js
++| – components/
++     | – Search/
++     | – Button.js
++     | – index.js
++     | – TextField.js

Now let’s dive into accessing these components across the app. This is achieved by using the ‘export‘ & ‘import‘ statements from ES6. Now, did you see the 2 index.js files in your app? What are those files for? This is the highlight of this directory structure. First, we will see the content in the index.js which resides inside the Seach folder:

Consider all the other 3 files inside the Search folder have the following content:

SearchLoader.js

import React from 'react';
const SearchLoader = props => (
  Loading..
);
export default SearchLoader;

SearchInput.js

import React from 'react';
const SearchInput = props => (
  InputField comes here..
);
export default SearchInput;

SearchError.js

import React from 'react';
const SearchError = props => (
  Error. Data not found.
);
export default SearchError;

The above exports are known as ‘default‘ exports as per ES6.  Now, the index.js file in the Search folder serves as an entry point for all the files related to the Search Component. This helps exporting the entire component in a single file which can then be used across your app. A single entry point makes it easy to traverse inside your app and understand the structure easily. This also serves very handy when the code has to be given to some new member/ person to work, all he/ she has to do is just go through the components and will quickly know what components are already made and simply use them. The index.js will just contain the following code:

components/Search/index.js

import SearchLoader from './SearchLoader';
import SearchInput from './SearchInput';
import SearchError from './SearchError';
export {
  SearchLoader,
  SearchInput,
  SearchError
}

AS you can see above, all you have to do is simply import all the component files related to search in its index file. Now the export from this index file is known as ‘named’ export. Now these component files can be accessed anywhere across the app. The components must only accept the props and do their job. Isn’t this clean? Now let us access this component in our App.js.

App.js

import React, { Component } from 'react';
import {
  SearchLoader,
  SearchInput,
  SearchError
} from './components/Search';

This is how you can easily import all your related component files from a directory. This keeps your components organised. Your app might have many more components like Tables which in turn will have the main component broken into the TableRow and Table. Can contain many components which don’t have related components like the Button and TextField we have in the root components folder. These can be exported from the index.js file in the components folder, which in turn can be used again in App.js as follows:

components/index.js

import Button from './Button';
import TextField from './TextField';
export {
  Button,
  TextField
}

App.js

import React, { Component } from 'react';
import {
  SearchLoader,
  SearchInput,
  SearchError
} from './components/Search';
import {
  Button,
  TextField
} from './components';

This is how you can import your related components and independent components. Looking at the import statement itself gives a clear picture about the components and their structure. This approach helped me solve the cluttering problem in my app and it actually made it easy for any second person to quickly get a gist about the app. But structuring your app depends from person to person.

Sharing this as this solved my problem. Will share more soon. Till then Happy Coding!