4 Resources to Get You Started with React, Facebook's New Frontend Library

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).

If you fall into the second “early coders” group, in that you understand the basic concepts front end web development (HTML, CSS, Javascript, and maybe some jQuery as well) and you’re looking for a way to help you build out user interfaces in a more modular, maintainable way, you might be interested to check out React.  My point is that I don't think you need to be an experienced developer in order to begin learning and benefiting from React.

Described as a “Javascript library for building user interfaces,” React was created and released pretty recently by Facebook.  It’s one of the hottest topics in frontend web development these days.

I was curious and wanted to see what all the buzz was about.  I'm an early coder myself, and had dipped my toes into some of the popular Javascript frameworks out there like AngularJS, but immediately found React to be far more approachable and intuitive.  I wasn’t quite sure why that was, but this Angular vs React blog post seems to offer one possible explanation:

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.
To his point, I’d say that if you’re already fairly comfortable with HTML, CSS, and Javascript, I don’t think there’s anything stopping you from gaining a solid grasp of React in a couple of days, which is pretty excellent.

So, ready to give it a shot?  Here’s one introductory path you can take to kick things off:

1: Getting Started

https://facebook.github.io/react/docs/getting-started.html

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

https://www.youtube.com/watch?v=N98ACjjJABw

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?

http://facebook.github.io/react/docs/events.html

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

https://www.youtube.com/watch?v=Pd6Ub7Ju2RM

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

https://www.youtube.com/watch?v=XxVg_s8xAms

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.

Wrapping up

Find these resources useful?  Are there others that you found helpful as you were first learning React?  I'd love to hear about them!

Mobile Analytics