React Code Architecture

It’s was a blast at Fosdem 202. I had a talk on React Code Architecture. The fun thing about the event is that I had to talk to lot of developers from around the world, not just React Architecture but the difference between React and Document Object Model(DOM).

This article is base on my Fosdem talk, read through;

The React Architecture holds various layers such as;

• Infrastructure: Rest/GraphQL/LocalStorage/State (Redux/Recoil/Mobx/VeuX), etc..
• Services: call requests to third parties/server side,..
• Adapters: Implement specific logic that helps the UI to interact with the infrastructure. For example: We use Redux as State Management in infrastructure, so we need implement an adapter for the Redux — we put the reducers/saga here.
• Components:

The most important things in this architecture is dependency rule — The lower layer must not know about the higher layer. Then we can keep it testable. Use interface to define the methods as a communication.

Conclusion

This is my take on React Code Architecture