This is a test change
Simplifying your React App Structure
In this article, I want to explain how you can structure a React app and what are best practices.
When you first created
create-react-app, your app structure will look like this:
public/ is where all the static assets such as images and media files go. You can also see index.html file here. This is the main HTML file and React needs this file since it includes your React code and libraries related code and provides a context
<div id="root"></div> tag for React to render your application to.
node_modules/ is for all your dependencies library that you included in
package.json get stored when you do
If you are wondering how you should organize your files under src/ directory, read on.
This is how
create-react-app decided to structure the app:
You can delete or rename the other files.You may create subdirectories inside
src. For faster rebuilds, only files inside src are processed by Webpack. You need to put any JS and CSS files inside
src, otherwise Webpack won’t see them.
There’s no one correct way of structuring your React app but we can make changes to the based on my how build. Here’s the modification from the built-in scaffold that I recommend starting. You can add more modules to your
containers/ folder as you see fit later. But in my opinion the simpler the structure is, the better you can maintain later on.
You can see that I have added
tests folders under
src. Let me explain to you why I have chosen those.
src/index.jsis the entry point to your application where you render the components by calling
ReactDOM.renderand initializing the app and related libraries.
src/componentsare for the Container and the Presentation components. The idea here is to divide your components into two categories: Container components are concerned with how things work and Presentation components are concerned with how things look. Yon can read more about them here.
src/apiis for to make API calls to backend API or APIs when needed. Here you can see I have two API files: one for the news and one for the user.
src/assetsis to store all your static assets such as images and video files related to your app. Here you can see
registerServiceWorker.jsas a util file. In production, we register a service worker to serve assets from local cache.
src/utilsis to store utilities or helper functions that you need e.g. string formatters, error handlers, generators, etc.
src/stylesis where I put all the styles sheets for each component under
src/componentsfolders. For easier context, we should name the file names exactly the same e.g. style sheet for
src/containers/App.jsshould be named as
src/testsis where you put all the Jest unit test cases, similar to
src/stylesfolder you should name the file name the same as component’s file name.
Importing your files
create-react-app assumes that your files are under
src but not under sub-directories. But no worries, it also supports
Usually you will have to include/import a file like this:
import User from '../../components/User'
But if you want to eliminate
../../ part form
import ... from statements, change
start script in
package.json to this:
"start": "NODE\\\_PATH=src react-scripts start"
NODE\\\_PATH is an environment variable and it can be set to a colon-delimited list of absolute paths as well. For our project we can change to:
"start": "NODE\\\_PATH=src:src/components:src/containers:src/utils:src/styles react-scripts start",
“build”: “NODE_PATH=src:src/components:src/containers:src/utils:src/styles react-scripts build”, “test”: “NODE_PATH=src/tests react-scripts test --env=jsdom”,
Even though we could go deep by making sub-directories under components and containers for each feature, the simpler, the flatter your organization is the better to see and maintain things.
If you are wondering how to add Redux to your React app, start with this article. You can find the source code to this point can be found here
This article was last updated at: Wednesday, September 20, 2017 11:09 AM