How to better organize your React applications?

What are the challenges when you build an application?

  • You build an application for a client with a team of a few developers, everything works very well all together.
  • 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?

/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 component can define nested components or services. It cannot use or define scenes.
  • 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

/src
/components
/Button
/index.js
/Notifications
/components
/ButtonDismiss
/index.js
/actions.js
/index.js
/reducer.js
  • Button can be used anywhere in your application.
  • 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

/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
  • Home has a component ButtonShare, it can only be used by the Home scene.
  • 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

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

Wrapping up

More articles from me

About me

--

--

Front-end Application Developer

Love podcasts or audiobooks? Learn on the go with our new app.

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