Learning React all over again
Over the past couple of months I’ve been learning React and thought I would make a short list of how I would approach learning React now if I had to do it over again. At the end of the article, I also briefly mention helpful tools to get you up and moving quickly.
1. Learn Flux
In response to internal problems using MVC design patterns, Facebook developed a new pattern called Flux. React was written as part of Facebook’s efforts to implement this new architecture pattern. Although React can be used within other design patterns, I have only used it as part of Flux and would recommend sticking to that pattern at least until you’re comfortable with React and can see the positives and negatives of the methodology.
At this point, just focus on being familiar with the how and why of Flux, which you should be able to get from Facebook Enginner Jing’s presentation as well as the architecture diagram below.
2. Become familiar with React and JSX
Learning how React components are built takes practice and doing it well will take seeing how an experienced React developer goes about it and then doing it yourself. The goal here is just to become aware of the different parts of components and JSX syntax. For that, I recommend Facebook’s React tutorial. Very rarely does a project’s website provide the best introductory tutorial but the React team has proven an exception to the rule here.
3. Get comfortable with Redux
Any expert React developer might cringe to see Redux, a state management tool, mentioned so early in this list since it is usually learned after someone has a good understanding of React. I would tend to agree except these video tutorials by Dan Abrimov, the author of Redux are superb. I learned more about ES6, JSX and React from these tutorials than any other resource I could find. They are also a good introduction to the way React components should be constructed and used within an application.
Dan uses JSBin to teach the course and instead of worrying about typing them all out yourself while trying to watch the videos, Justin Wu has created a different JSBin for each video so you can reference it as you go along.
Of course there are times when Redux is overkill or unnecessary and Dan Abrimov agrees. This is his article explaining when you should use Redux, and when you shouldn’t.
Two Great Tools
Finally, two tools that I have come to love as I dived into React:
- Atom Editor
An open source text editor with ES6 syntax highlighting, suggestions and project views.
A command line tool to get you up and running fast without learning webpack, babel, or other tooling. Just run create-react-app and you’re up and ready to roll.
Thanks for reading!