:heart: React

Putting React in context

September 25, 2019

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 Robin Wieruch, Kent C. Dodds, Dan Abramov
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.

Updates

This article will be continuously updated to serve as a central hub for the concepts presented above.

There is an ongoing experience on Github distilled into a documentation site.

When considerable results are found a new article is written and linked below.

Context Description Articles
Leaders Identify trusted opinion leaders and sources of learning Identify the right leaders
Programming paradigms The foundation of React The reactive, functional nature of React
Basic concepts Understanding React
Designing applications Data and interaction models
GraphQL Data driven applications
Rapid prototyping Both on front and back-end Rapid prototyping for GraphQL APIs?

Metamn

To React with best practices. Written by @metamn.