DEV Community

metamn
metamn

Posted on • Originally published at metamn.io on

Putting React in context

A deep dive into the language and the ecosystem around.


After deploying my first commercial React app I’ve started to learn more about the nuts and bolts of the language, the new way of thinking it employs, and how the ecosystem helps to make it all happen.

The process is ongoing and is far from being finished. The journey is pure joy. Learning new paradigms, talking with core members, contributing to libraries, putting it all together, deep dive into details, write prototypes and live documentation.

Just to get a glimpse about how vast the React context is — please allow me to present the main concepts.

Context Description Example
Leaders Identify trusted opinion leaders and sources of learning https://www.robinwieruch.de/, https://kentcdodds.com/, https://overreacted.io/
Programming paradigms The foundation of React Reactive programming, Functional programming
Basic concepts Understanding React Pure functions, Side effects, State, Hooks, Functional components, Referential equality
Designing applications Data and interaction models Information architecture with graph databases, behavior with Finite State Machines
Designing components Best practices in 2019 Functional components with Hooks, Auto-generated tests with XState, Design systems with Storybook
GraphQL Data driven applications Apollo, Relay, Amazon AppSync, fragments, mutations, subscriptions, code co-location
Performance Do not overthink it Loading data and images, Code splitting, Pre-caching assets, Pre-rendering static HTML, Memoization
Advanced React For large projects Static type checking; Single page, Multi page, Server side rendered applications; Testing
Rapid prototyping Both on front and back-end Material UI, Headless CMS services
Quick deployment Services with free tier Gatsby, Next, Netlify, Github pages
External libraries Open source components from the ecosystem Forms, Tables, Animation, Virtualized lists, Error handling
Tricks and tips Speeding up the development process Prettify conditions, Conditional props, Logging, ESxx / JavaScript for React
DevOps Sustainable deployments Monorepos, Bundle size analyzer

Stay tuned, details are on the way.

Top comments (0)