Why React developers should modularize their applications?

What is a modular structure?

Organization by squads and tribes

What if the same pattern gets applied to programming?

“Do one thing and do it well“

— Unix philosophy

Application divided by modules

Why you should follow this structure?

A/B testing a module can be as simple as having a second module

Applying this concept to your React applications

/security
/__tests__
/Authenticate.js
/sensor.js
/user-preferences.js
/PinPopup
/__tests__
/index.js
/index.js
/lock-icon.png
/SensorPopup
/__tests__
/index.js
/failed-icon.png
/fingerprint-icon.png
/index.js
/success-icon.png
/Authenticate.js
/index.js
/sensor.js
/user-preferences.js
The Security module is used by other modules

Advanced level: the multi-package repository

Juggling a multi-module project over multiple repos is like trying to teach a newborn baby how to ride a bike.

— Sebastien McKenzie — creator of Babel, Yarn, Facebook Engineer

GitHub’s Code Owners feature
/.github
/CODEOWNERS
/node_modules/packages
/AdminApp
/CustomersApp
/SellersApp <--- those are the app containers with navigation
/analytics
/basket
/emailing
/library
/live-chat
/login
/offers
/payments
/referrals
/search
/security
/settings
/.eslintrc <--- same lint rules
/jest.config.js <--- same jest config
/lerna.json
/package.json

Wrapping up

More articles from me

--

--

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