Anatomy of a React Application — Architect with Sagas
Contains visual diagrams for every single CSS property in common use.medium.com
To get a good idea of how flex works try flex layout editor on this page.
1. There is a difference between knowing and understanding. Always learn from multiple sources. Sift out accurate facts.
3. You can find my react.js book on Amazon here. Support is appreciated. -jst
Well it may or may not be you. This is just a wild guess but…
Chances are you are not learning at your optimal pace. You are probably distracted with life – things you want to do. But you are not learning.
Because learning is time consuming and learning new things is hard; it involves a large amount of brain tissue.
That’s okay. At least, as far as React Saga architecture goes, I did all the homework for you. No. This may not be a fully 100% accurate picture and I am sure genetic variations of this dinosaur exist… but… it brings up some important elements of the structure, useful to those who are coming to Sagas for the first time.
This diagram is the result of my work at Goodyear tire company where I am currently Sr. React Developer. It was and still is a great experience… I learned a lot. So I jotted it down in Photoshop to share it with you.
Outside of component constructor and some special “Lifecycle” component methods you never want to modify state of your React component by directly assigning values to its properties. Instead there are actions.
The diagram depicts an application structure with async-based actions triggered via sagas. You know actions, right? In React we never change state manually. We trigger change by dispatching actions.
Sagas gives us a chance to dispatch them using EcmaScript 6 async. This means your HTTP requests will not clutter up execution flow.
This visual diagram should answer many questions you had about React by building a mental picture in your head of the entire architecture.
Of course it is not the only way to build React applications. And the diagram is intentionally skipping detail to get a better overall idea of architecture. But it’s a good one. Together with material-ui it is very efficient.
What’s next? You can follow me on GitHub — I follow back!
Are you learning React from scratch? If so…
Grab a copy of my React Book — here
Just a quick note… I am currently working on my next React book. The one in this link is pretty basic. Only get it if you are starting from scratch.
Published by < Learning Curve >
Nobody loves writing documentation. . . . . .the way we do.
It’s been a while since I’ve written for Medium. If you want to write valuable and authentic content you better research and absorb first. It takes up to two weeks on my average to fully grasp a new subject.