: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? |
To React with best practices. Written by @metamn.