React Roadmap - A Curated List Of Free Resources To Master React Development

Datetime:2016-08-23 00:10:44         Topic: React          Share        Original >>
Here to See The Original Article!!!

A curated list of free resources to master React Development

Table Of Contents

  • Motivation
  • Roadmap
    • Why React?
    • React
    • Bundlers
    • ES2015+
    • Routing
    • Redux
    • Build Stuff
  • How To Use This Guide
  • How To Colaborate
  • Team
  • Inspiration And Additional Resources


This project aims to collect the best free resources for those that want to learn how to build applications with React and also understand theconcepts that come with its adoption like Functional Programming, Composition, Unidirectional Data Flow and many others.


Why React?

  1. JS Apps at Facebook
  2. Why did we build React?
  3. React: Rethinking best practices


  1. React Fundamentals
  2. Getting Started
  3. Getting Started with create-react-app
  4. React Docs Tutorial
  5. Thinking in React
  6. The React Quick Start Guide ( ES6 version )
  7. Removing User Interface Complexity, or Why React is Awesome
  8. Learn Raw React — no JSX, no Flux, no ES6, no Webpack…
  9. Learn Raw React: Ridiculously Simple Forms
  10. Building a Router with Raw React
  11. React's Official Guides & Tips
  12. react-devtools
  13. React Cheat Sheet



  1. Webpack your bags
  2. Webpack — The Confusing Parts
  3. SurviveJS - Webpack


  1. Learn ES6 (ECMAScript 2015)
  2. Setting up ES6
  3. Overview of ECMAScript 6 features
  4. Exploring ES6
  5. Exploring ES2016 and ES2017


  1. React Router Tutorial


  1. Getting Started with Redux
  2. Building React Applications with Idiomatic Redux

Build Stuff

  1. Several project ideas
  2. React - TodoMVC
  3. Bootstrapping a React project
  4. The SoundCloud Client in React + Redux
  5. A Primer on the React Ecosystem: 1 , 2 and 3.
  6. Building a React/Redux App with JSON Web Token (JWT) Authentication

How To Use This Guide

Use a linear approach to complete this guide. That means you should start with the first resource and pass to the next one after you finish the previous and after make a practical project to internalize what you have learned.

The React's ecosystem is overwhelming for beginners. Ensure to learn each new tool isolatedly .

Said this, our first course in the React section covers all the React ecosystem. Face this as a general introduction to each topic that will be studied deeply in the following sections.

In the sections about React, Webpack, and ES2015+, the initial resources are more superficial and the last ones are going deeper in the respective topic. You can opt to learn the basics first and return to them later, but don't skip them without have a basic knowledge of the matter.

How To Colaborate

To suggest new sections or new resources, open an issue explaining why we should add/remove some resource/section. After at least 5 people approve ( :+1: ) your indication, you will be invited to create the pull request.

The reason to keep this way of collaboration is to ensure that our list of resources will be really concise, bringing only the best resources for those that want to master the topics listed here.


Inspiration And Additional Resources

  1. You’re Missing the Point of React
  2. react-makes-you-sad
  3. react-howto
  4. Your Timeline for Learning React
  5. 5 Steps for Learning React Application Development
  6. Path to Learning React


Put your ads here, just $200 per month.