How to better organize your React applications?

I’ve been working on very large web applications for the past few years, starting from ground zero and, with a dozen other developers, making them scale up to now be used by millions of people. And sometimes, if you didn’t start with a good folder structure, it can become difficult to keep your code organized.

What are the challenges when you build an application?

This has happened or will happen to pretty much all developers over the course of their career:

  • Your client requires new features, fine, you add them.
  • Your client asks you to remove some features and add new ones, it starts to get complicated, you didn’t think about that, but you make it work even though it’s not perfect.
  • Your client now wants you to change another feature, remove some others and add another one that wasn’t expected. At that point, you grab the scotch tape and start patching some code. You are not really proud of it but it works.
  • 6 months later, after some other iterations, the code of the application gets really complicated to read and understand, everything looks like some Italian spaghetti pasta.
/src
/actions
/notifications.js

/components
/Header
/Footer
/Notifications
/index.js
/containers
/Home
/Login
/Notifications
/index.js
/images
/logo.png
/reducers
/login.js
/notifications.js
/styles
/app.scss
/header.scss
/home.scss
/footer.scss
/notifications.scss
/utils index.js

What could be a better approach to organize your application?

For a couple of years I worked for a financial institution which used Ember as their main javascript framework to build all their new web applications. One interesting thing about Ember is the ability to structure your project by features, instead of by type. And this changes everything.

/src
/components
/Button
/Notifications
/components
/ButtonDismiss
/images
/locales
/specs
/index.js
/styles.scss
/index.js
/styles.scss
/scenes
/Home
/components
/ButtonLike
/services
/processData
/index.js
/styles.scss
/Sign
/components
/FormField
/scenes
/Login
/Register
/locales
/specs
/index.js
/styles.scss
/services
/api
/geolocation
/session
/actions.js
/index.js
/reducer.js
/users
/actions.js
/api.js
/reducer.js
index.js
store.js
  • A scene can define nested components, scenes or services.
  • A service can define nested services. It cannot use or define components or scenes.
  • Nested features can only use from its parent.

Components

You all already know what a component is, but one important thing in this organization is the ability to nest a component into another component.

/src
/components
/Button
/index.js
/Notifications
/components
/ButtonDismiss
/index.js
/actions.js
/index.js
/reducer.js
  • Notifications can also be used anywhere. This component defines a component ButtonDismiss. You cannot use ButtonDismiss anywhere else than in the Notifications component.
  • ButtonDismiss uses Button internally, this is authorized because Button is defined at the root level of components.

Scenes

A scene is a page of your application. You can see a scene just like any component, but I like to separate them into their own folder.

/src
/scenes
/Home
/components
/ButtonShare
/index.js
/index.js /Sign
/components
/ButtonHelp
/index.js
/scenes
/Login
/components
/Form
/index.js
/ButtonFacebookLogin
/index.js
/index.js

/Register
/index.js
/index.js
  • Sign has a component ButtonHelp. This component can be used by Login or Register scenes, or by any components defined in those scenes.
  • Form component uses ButtonHelp internally, this is authorized because ButtonHelp is defined by a parent.
  • The Register scene cannot use any of the components defined in Login, but it can use the ButtonHelp.

Services

Not everything can be a component, and you will need to create independent modules that can be used by your components or scenes.

/src
/services
/api
/services
/handleError
/index.js
/index.js
/geolocation
/session
/actions.js
/index.js
/reducer.js

Wrapping up

I’ve been working with this folder structure for the past few months on a personal project built with React-Native, and I can tell you this saved me a lot of time. It’s much more simpler to have all related entities grouped together, it makes things easier to work with.

More articles from me

About me

Hi, I’m Alexis! I’m a full-stack developer who has been programming for over 14 years. I have always had a passion for technologies since I was young. I’m now specialized in Javascript development, I enjoy to spend countless hours learning and playing with new technologies and use them in my next projects.
I recently started to use Twitter, you can follow me here: @alexmngn

Javascript Application Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store