Learn Reactjs Online

To get a taste of how React works beyond a simple HelloWorld app, Facebook's official tutorial will teach you how to build your own realtime comment box with React. Once you have a feel for the library, you can go deeper and read the guides on how to build interactive and dynamic UI, form components, and more.

If you're building a website that deals with dynamic data, it is highly recommended you follow the Flux architectural design, which promotes a single directional dataflow. When React is used with Flux, it brings you the functionality of an MVC. However, according to Facebook, current MVCs don't scale well with building additional features to a large codebase, so React + Flux was their solution.

React uses JSX - a statically-typed, object-oriented programming language that compiles to standalone JavaScript. It aims to boost JavaScript performance and make it more type-safe. In other words, if you developing a mid- to large- software, JSX may be a good thing to use.

This one-page tutorial will quickly help you get a grasp of how React works, and if you're a hands-on type of person, you can code along with its starter kit. Or, you can simply learn through reading the succinct tutorial. The tutorial won't teach you how to set up your environment, but it should nonetheless be quite helpful.

Learn ReactJS from square one with this interactive tutorial, which is clearly inspired by the Ruby Koans project. All you have to do is fork this project, install Node.js and Python, run the setup and then you're good to go! Follow the practical exercises, and don't peek at the answers.

The author of this site used to work at Facebook and also built React UI components and taught React. Although the site's not yet 100% complete, it nevertheless provides some nice interactive tutorials that will provide you with enough code examples to get familiar with the basics of React, and it also has some more advanced topics such as how to update with React.render, creating fade-in images with React, and more articles planned, so be sure to stay tuned to the site's progress!

This four-part tutorial series from the awesome folks at scotch.io will first teach you the basic concepts of React.js to get started, teach you how to build a twitter stream with Node and React.js, introduce you to the Flux architecture, and finally finish off with walking you through how to create a simple shopping cart with React.js + Flux.

After 6 tries to create a production-ready ReactJs application, Codementor Christian Alfoni finally came up with a solution for a good workflow to do such a thing. In part 2, Christian goes on to explain the workflow's dependencies and how to test it quickly.

If you're still debating whether you should adopt React, this tutorial may convince you to take the leap, as the author provides a lengthy intro to his reasons for using React. In this four-part tutorial, you will learn how to build as simple departure board for subway stations, optimize your code, test it, and render it to the server for SEO.

If you'd like to get a better idea of how flux works by following an example application, this tutorial will walk you through building a web-chat app from scratch with React and the Flux architecture. The author also uses Node.js to run the example.

This tutorial will walk you through building the Hacker News frontpage using React, and it's main purpose is to help you get a feel for understanding how to 'grow' a React UI from small parts into a functioning web app. There aren't a lot of explanations, but if you can learn simply from looking at the code and following along with the tutorial, this should be an interesting way to learn how to build React apps.

If you prefer to see how the code works, this post contains examples of how to use React.js to build a timer, a navigation menu, a real-time search, an order form, and an image app. The source and examples are shown through JSfiddle, and the author adds some notes and explanations so you can better understand the code.

Christopher Pitt's Medium has a few detailed articles on React Fundamentals, such as on components, React properties, states, and how to use React with Backbone.

If you prefer something other than the official Jest, you can try unit testing Reactjs with the method in this concise article, which was authored by Oleaksandr Rudenko, who has mentored Reactjs a few times.

Although a lot of people seem to be running ReactJS on Node.js, this doesn't mean you can't create an isomorphic React app with Rails. If you prefer rails, then this is definitely the tutorial for you. You will be using React & Rails to build a simple blog, and the tutorial will walk you through how to improve the SEO of your React app by rendering the React components on the server.

This tutorial teaches you how to setup your ReactJS application with gulp.js and Browserify, and then proceed to walk you through how to use JSX to build components for a sample app that allows users to add/remove/rate songs.

Famous for its bite-sized video tutorials that will teach you just what you want to know, egghead is a great place to get up to speed with React.js. You can try out some of their free videos before you decide if the site works for you.

With 21 lessons that span 2 hours long, this Tuts＋ course will first walk you through the basics, explain React's data flow, and more. You will finish off with a real-time project to better understand how things fit together, which includes how to use Browserify and Gulp in your React build process.

Pluralsight has been a training platform for developers since 2004, and they naturally have some professional video courses for you to get started on learning React, where they go over components, JSX, events, and forms.

If you're a JavaScript developer, chances are you follow Addy Osmani's twitter account, as he is a well-known JavaScript developer at Google who often tweets useful JavaScript information. In this article, he talks about React components and custom elements, and he concludes with a useful tip on what to watch out for.

This guidelines mostly focuses on component structure and JSX best practices to make code more readable, robust and easily maintainable.

If you want to have weekly updates on new ReactJS tutorials available, then it's a good idea to subscribe to this free newsletter. It's fairly new, but it has been consistent with the weekly updates so far.

This blog is maintained by 3 brothers who write about web development technologies, and it has several useful posts on ReactJS, such as React's Flux vs Reflux, the React data flow model, ReactJS encapsulation, and more. If you're still wondering about whether you should pick up ReactJS for your project, you can read their extensive ReactJS case study.

This website showcases projects made by ReactJS, where you can link to the demos and see the code samples. All in all, one of the best ways to figure out how to do things is by examining other people's code, and this is a great place to find out what other people are doing with React.

This blog is an excellent place to get the latest ReactJS tips and tricks, and the older articles should also be quite useful as well. Other ReactJs developers have also contributed to the blog, so you should see a variety of contents.

ReactJS is not a framework, so you can use it with other JavaScript frameworks such as AngularJS. If you're frustrated by your AngularJS app's performance and want to speed it up, this article is a neat tip on just how to use ReactJS to speed up your Angular app.

Although Flux is the architectural approach recommended by Facebook, Facebook doesn't actually provide a framework for it so you'd have to build it yourself by scratch. Or, you can use Reflux. This article explains what Reflux is. In essence, Reflux makes it simpler than having to build your React + Flux app from scratch and it's currently the most popular (event-based) implementation of Flux.

If you're not convinced by Reflux, you can also check out Fluxxor, which provides tools to make it easier for you to use the Flux architectural approach when building your React app.

As the most popular ReactJS routing solution, React Router is highly inspired by Ember.js's URL-first router, and it features nested views, sync and async transition hooks, modular construction of route hierarchy, dynamic segments, and more. Its goal is to increase your screen-creation productivity, help you better understand your app's structure, and provide code tractibility.

Quickly bootstrap your ReactJS application with this popular starter kit, which uses ES6 Harmony, JSX, Gulp, Webpack, BrowserSync, and more to help you create an isomorphic SPA. Codementor Konstantin Tarkus contributes to this open-source project, so if you have any questions, you can always ask him.

If you're using Sublime Text to code your web applications, then you'll probably appreciate this React package for Sublime Text. It provides JSX syntax highlighting and also provides a few JSX snippets!

This tool is a library that provides an abstraction for React components. It has fast top-down rendering that imbraces immutable data - in other words, with this library, components can use cursors to easily swap their own piece of data inside the larger immutable data structure, where you'd only need to render components that have changed their data layer. It's a pretty neat project that sounds pretty useful!

If you're looking to power ReactJS with Node.js, then you should use Browserify to speed up your productiviy. Browserify allows you to write Node.js-flavored modules that compile for use in the browser, and it is very useful for code-organization. There's also a community managed Browserify-Rails Gem if you prefer using Rails.

Make your life easier by using the 'streaming build system' Gulp.js if you aren't already - it's efficient, easy to learn, and helps you manage complex tasks.

A highly popular JavaScript unit testing tool, Jasmine is a DOM-less and simple Behavior Driven Development testing framework that is suited for anywhere that JavaScript can run. Many have praised it for it's easy-to-read syntaxes, and it's also easy to get started on. If you aren't using Facebook's Jest and you prefer to test your apps with Jasmine, you'll probably want to check out the Jasmine-React, which aims to make unit testing ReactJS components less painful.

If you're a fan of CoffeeScript, you'll probably like this nifty project, as it provides support for an equivalent of JSX syntax in Coffeescript (called CJSX). With this tool, you can write your React components with CoffeeScript.