A few months ago I read an interesting blog post by someone who teaches programming to beginners, in which he argues that it is important to distinguish between true beginners - people who are brand new to coding - and people who are relatively new to coding, but are nonetheless familiar with all the basic concepts. He calls this latter group early coders.
If you are brand new to programming (ie, a beginner), there are tons of great resources that make learning fun and very approachable, including Codecademy,com, Teamtreehouse,com, Udacity.com, and Codeschool.com. These sites and many others like them will have you up and running in no time (well, it will take some time, but it will be pretty fast).
AngularJS introduces an explosion of new concepts. There is, at least, controllers, directives, factories, scopes, services, transclusion, the directives library, the module system, and more that I’ve no doubt forgotten about or haven’t encountered yet. Add to that the famously bad documentation and you have a learning curve like a cliff.
In React there are just three important concepts: components with properties and state. Components are just code. There is so little to React that when I started to learn it I could read all the documentation in just one day.
So, ready to give it a shot? Here’s one introductory path you can take to kick things off:
1: Getting Started
I wouldn’t have predicted it, but I actually started with Facebook’s documentation and found that it was a great place to start. They have a quick tutorial where they walk you step-by-step through the creation of a simple comment thread using React. By the end you’ll have created your first React app using multiple components and be familiar with all the basic concepts. Nice!
2: An 8-part walkthrough
Next I found this relatively short video series by some guy on Youtube who walks you through the creation of a similar app to what the Facebook documentation walks you through, but now you have someone verbally guiding you through it, which will help to reinforce all the concepts that Facebook’s documentation introduced you to. Because he broke the tutorial up into 8 pieces it’s easy to rewatch a section as many times as you need to in order to make sure you understand what’s going on.
3: No need for jQuery?
This gem of a blog post was shared with me by my good teammate Neville. I have tended to use jQuery for all my event handling, but this blog post does a good job at explaining some of the challenges that arise from jQuery event handling in complex apps, and how React can alleviate many of those problems. This tutorial is also rather unique in that it first looks at how you would accomplish some functionality in jQuery, then translates it into React, which I found very useful.
4: Learn React, Flux, and Flow
Once you’ve worked your way through the two steps above, I would recommend you check out this recording of what seems to be a meetup held at Facebook. What’s nice about this video is that while this guy also walks you through the creation of a basic React app, similar to the other resources I’ve linked to here, he also describes at a higher level what React is and how it differs from other forms of frontend development.
Extra Credit: In their own words
This talk was given by the folks at Facebook who created React, just shortly after they first open-sourced it on Github. While there isn’t anything here that isn’t covered by the other videos and tutorials, I found it very interesting to hear them make the case for why React is worth the time and attention of experienced developers, at a time when it may not yet have been clear how the community would receive it.
Find these resources useful? Are there others that you found helpful as you were first learning React? I'd love to hear about them!