Paul:
This is the React starter project we made/use at my job…
https://github.com/t7/react-starter
You can see an example of it running here…
http://t7.github.io/style-guide-example
We also have a separate, sibling Node app, that "consumes" the React app, and spits out a generated style guide…
http://t7.github.io/style-guide-example/isg/intro
http://t7.github.io/style-guide-example/isg/patterns
For some good tutorials on React, you can check out these videos…
https://egghead.io/series/react-fundamentals
Once you've watched those, "Redux" builds upon React by serving as a "parent component" to multiple others. Redux acts as a pass-thru and/or single source of truth for UI state.
Basically, instead of…
— grandparent ←→ "parent" props
—— parent ←→ "grandparent" and "child" props
——— child ←→ "parent" props
You can do…
— grandparent ←→ Redux
—— parent
——— child ←→ Redux
^ That way, if the "parent" doesn't share any aspects of its state with either the grandparent or child, it doesn't need to serve as an (unnecessary) middle-man.
Like, let's say the child UI component updates "username" and the grandparent needs to display it in the header, but the parent displays other, unrelated data. That'd be a scenario in which Redux would keep track of the username. And, the data that the parent needs for its duties could also be in Redux, just not the same object or key/value pair.
This video series is by the creator of Redux…
https://egghead.io/series/getting-started-with-redux
^ Basically, the first 80% of the video series shows you how painful manually maintaining shared state is, then the last 20% of the series shows you how to implement Redux, which handles that all auto-magically, in like 15 extra lines of code.
Dan (creator of Redux) has since joined the React team at Facebook.
Note: Facebook had an approach called "Flux" that they used (still do?) but has been obviated by Redux.
https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207
https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6
http://technologyadvice.github.io/where-flux-went-wrong
Here's Dan's introductory video, where he first debuted Redux ("I've accidentally recreated Flux!")…
Anywho, I could blab on and on, but that'll getcha started.
One thing to keep in mind about React is:
"Everything is a component."
https://medium.com/@learnreact/container-components-c0e67432e005
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
React is the "V" layer of MVC, and can serve as "C" as well.
But in terms of "models," those really only exist inasmuch as you need to use objects, and that'd be more akin to how Redux works.
P.S.
Here are the slides/video for a talk I gave on React, last year…
https://speakerdeck.com/nathansmith/node-style-guide
— Nathan