Originally posted on Medium on June 18, 2017.
Photo by Artem Sapegin on Unsplash.
Over the past few months, I’ve been learning React slowly, trying to build an in-depth understanding of its large ecosystem. This post lists the resources I found most useful to get a solid foundation in this area. I have definitely missed out on some links or people, so please feel free to reply with your own favourites and recommendations.
Note: I strongly recommend coding along to get the most out of these.
React Fundamentals, by Tyler McGinnis
This is the best place to start in my opinion, because it begins with React out of its ecosystem to make you feel the pain points solved by each tool it introduces. That way you won’t feel overwhelmed by too much tooling all at once, and you will then understand the reason for the rather large tooling lineup.
The course covers the JS bits you might miss, React (with and without JSX), the different kinds of React components, ES6 classes, React Router, Babel, Webpack. It offers good explanations right from the basics up to best practices. And you are lucky as it has been updated as of React v15.5.
Redux docs & egghead.io courses by Dan Abramov
Redux is not mandatory with React, but I am personally a huge fan of how it keeps the code really clear and self-documenting, by decoupling concerns around state management.
[EDIT] I am primarily not using Redux anymore, and prefer MobX-State-Tree (more details further down). However, I would still highly recommend learning Redux. You’ll become a much better developer just understanding the underlying principles to Redux. Read more about this in this excellent article.
There are 2 ways to go about this list — video lectures or docs tutorials. You can pick the method you prefer, but I do find useful to do both and this is the order I’d recommend (I prefer reading first, so feel free to swap the video/docs order):
- Redux docs, read the “Introduction” and “Basics” sections and treat the Todo List example as your first tutorial.
- Getting Started with Redux course on egghead.io builds upon the Todo List example.
- Redux docs, read the “Advanced” and “Recipes” sections and treat the Reddit API example as your second tutorial.
- Building React Applications with Idiomatic Redux course on egghead.io is a continuation of the first egghead.io course.
See the note on MobX-State-Tree below, which is currently my favorite state management library. I would still recommend learning Redux, as it is an essential part of the community’s fundamentals and is an excellent way to understand simple functional programming concepts which will make you a better developer in the long run.
Other tools and libs
Having gone through the above, you should be pretty confident by now to build a typical React + Redux app. The best at this point would be to pick a side project of your own to further explore things first-hand. My chosen project was a React + D3 playground which I wrote about in this post. Below are some tools and libs that I’ve been playing with and would recommend learning.
Immutable.js & Reselect
These tools are great for performance optimizations using pure components. They help to ensure the props you pass to your components are immutable, allowing to drop out of unnecessary render cycles. If you haven’t already, read the part on Immutability from the redux docs. When using Redux, use Immutable.js to make your whole store immutable and Reselect to make computed props optimal with memoized selectors.
Styled Components
This is my favorite CSS-in-JS solution. It has been thought to be the way to go with CSS in the component age. It uses ES6 tagged template literals to allow JS-powered CSS writing, with dynamic theming, props-based styling, etc. It has full CSS support and allows you to basically write CSS along your components with close to no learning curve. Classes are automatically generated and styles are nicely encapsulated. This means your component are really portable without risking class conflicts inherent to big apps.
Create React App
This is the best way to get down to coding without having a ton of configuration to handle. It is supported by the React team and is more or less the React CLI people dream of. It provides a great developer experience, with out-of-the-box support for most of the features you might desire, as well as options for building your app for production.
Redux-Saga
Redux does not support side-effects in its actions / reducers. A simple way to get around this limitation is Redux Thunk, a Redux middleware for dispatching functions. If you want a more complex but elegant approach, Redux-Saga is pretty darn amazing. It is another Redux middleware based on the Saga pattern, which helps you implement your side-effects calls as ES6 generators. You declare them in a central place and they are executed reactively to pure Redux actions.
Recompose
Recompose is a React utility belt which I use mainly to write Higher-Order Components and compose behaviours into components in neat ways. It is very well introduced in the Higher Order Components with Functional Patterns Using Recompose egghead.io course by Tim Kindberg.
If you want to know more about HOCs, there is also a great post by Franleplant entitled React Higher Order Components in depth.
MobX
Redux can sometimes be an overkill. Yet, you might still want some easy-to-use state management solution that is more featured than setState(). I like MobX for such situations. MobX turns your state into an observable, allows for computed values and automatic reactions (side-effects) based on actions, and most importantly turns React components into reactive components automatically.
MobX-State-Tree (MST)
Despite its name, MST is very different from MobX. It was built by the same people and leverages MobX under the hood for the observable and reactivity part. However, MST is a lot more opinionated and full-fledged than the minimal MobX. With MST, you need to provide the shape (type information) of you state “tree” (i.e. the models, actions, etc.) which is automatically leveraged to generate a living tree of immutable, structurally shared snapshots of your state. This can then be used to support time travel, hot module reloading, and other developer goodness that Redux got us accustomed to, but sparing us from the boilerplate.
I see MST as a mature solution for managing state which combines the goodness of immutability, the ease of use of mutable structures, the convenience of type checking, the separation of concerns of dedicated state stores, and the natural performance of observable structures. It is to state what React is to UI (paraphrasing Daniel Earwicker). It is the best developer experience (DX) I’ve had managing state. 🔥
I’d recommend learning in depth about MobX from the docs, before diving in on MST with the excellent egghead course by Michel Weststrate.
Final good reads
Having played around with the above on your own, you should start to feel pretty solid. I would then recommend the following resources to wrap things up.
- React docs. Yes, it probably sounds odd to finish here. While I find the above resources provide a better pace to get started with React, the docs are a great reference for everything-React and make for a good conclusion chapter.
- Watch the Worst ‘Hello World’ ever by mpj, which, given all your newly acquired knowledge, should make you laugh. Disclaimer: this is not the way you should be coding!
I would like to highlight that the Complete Intro to React course by Brian Holt on Frontend Masters is really great as well. It is not part of the resources listed above as it is not free, but I do recommend it.
Shout-out to Clevertech, my employer who sponsored the Frontend Masters subscription. Check out what we are up to and come join us!
Some great React-ers to follow on Twitter
In alphabetical order, let’s not play favourites!
Top comments (0)