× {{alert.msg}} Never ask again
Online Beginner React Course: Learn React in 4 weeks
View Class
Learn React Online

Learn React Online


ReactJS is a library that has become increasingly popular for its performance and its flexibility. If you're looking to build an app that renders a lot of dynamic data quickly and also performs well on mobile, then you'd probably want to learn ReactJS!

Learning Center  ›  Learn to Code  ›  Learn React  ›  React Guide

Online Beginner React Course:
Learn React in 4 weeks

Online reactjs training course live
View Class
About Resources

React.js is a JavaScript Library developed by Facebook that functions as the V in an MVC. Known for its fast performance with a Virtual DOM, React.js is especially ideal for building mobile sites. What's more, since you can run React.js on the server, it's more SEO-friendly than other JavaScript Frameworks available. If you don't know JavaScript yet, you should probably start out with learning JavaScript.

Online reactjs training course live
Online Beginner React Course:
Learn React in 4 weeks
curriculum

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.

Price Free
Suitable for Intermediate JavaScript Developers
Recommend Articles

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.

Price Free
Suitable for Intermediate JavaScript Developers
Recommend Articles

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.

Price Free
Suitable for Intermediate JavaScript Developers

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.

Price Free
Suitable for Intermediate JavaScript Developers

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.

Price Free
Suitable for Intermediate JavaScript Developers

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!

Price Free
Suitable for Intermediate JavaScript Developers

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.

Price Free
Suitable for Intermediate JavaScript Developers
Recommend Articles

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.

Price Free
Suitable for Needs some familiarity with React
Recommend Articles

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.

Price Free
Suitable for Intermediate JavaScript Developers
Recommend Articles

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.

Price Free
Suitable for Needs some familiarity with React

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.

Price Free
Suitable for Needs some familiarity with React

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.

Price Free
Suitable for Needs some familiarity with React

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.

Price Free
Suitable for Needs some familiarity with React

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.

Price Free
Suitable for Needs some familiarity with React

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.

Price Free
Suitable for Intermediate JavaScript & Rails Developers

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.

Price Free
Suitable for Intermediate JavaScript Developers
Recommend Articles

Codementor React Class is a 4-week series of 4 online classes where you’ll be learning from a live React mentor. In a small group setting with other peers, you’ll learn core concepts of React while building a real-time chat app at the same time.

Price $99.0
Suitable for Beginners

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.

Price $14.99/month or $149.99/year
Suitable for Intermediate JavaScript Developers

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.

Price $15/month for full access
Suitable for Intermediate JavaScript Developers

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.

Price starts from $29/month or $299/year
Suitable for Intermediate JavaScript Developers

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.

Price Free
Suitable for Needs some familiarity with React

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

Price Free
Suitable for Needs some familiarity with React

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.

Price Free
Suitable for Needs some familiarity with React

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.

Price Free
Suitable for Needs some familiarity with React

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.

Price Free
Suitable for Needs some familiarity 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.

Price Free
Suitable for Needs some familiarity with React

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.

Price Free
Suitable for Needs some familiarity with React & AngularJS

This handy, open-source site will let you search for any React components, so if you need any components and want to see if someone else has already built one, be sure to check out this place!

Price Free

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.

Price Free

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.

Price Free

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.

Price Free
Recommend Articles

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.

Price Free

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!

Price Free

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!

Price Free

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.

Price Free

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.

Price Free

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.

Price Free

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.

Price Free

If you'd like to find more useful ReactJs tutorials and tips, dig into this project on Github, where it's an extensive collection of articles and tools about ReactJs - have fun!

Price Free

About Codementor
Learn React

Want to get started on ReactJS quickly or don't understand why your ReactJS app isn't working? Get help from ReactJS experts on Codementor and save yourself from the frustration of banging your head against the wall!

Online reactjs training course live
Online Beginner React Course:
Learn React in 4 weeks
Online Beginner React Course:
Learn React in 4 weeks