Putting React in context
metamn
Posted on October 22, 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 | 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.
Posted on October 22, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024