A curated list of free resources to master React Development

Table Of Contents

• Motivation
• Essential Path
  • Why React?
  • React
  • ES2015+
  • Routing
  • State Management
  • Bundlers
  • Build Stuff
• Optional Path
  • Typescript
• How To Use This Guide
• How To Collaborate
• Team
• Inspiration And Additional Resources

Motivation

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

Essential Path

Why React?

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

React

1. React Docs - Quick Start section basic
2. React Docs - Tutorial: Intro to React basic
3. React Docs - Advanced Guides section advanced

ES2015+

1. Learn ES6 (ECMAScript 2015) basic
2. Exploring ES6 advanced
3. Exploring ES2016 and ES2017 advanced

Routing

1. React Router Docs basic

State Management

Redux

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

Bundlers

Webpack

1. Get Started with Webpack

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

Optional Path

Static Type Checkers

Flow

Typescript

1. Gitbook Typescript deep dive
2. React - Redux - Typescript - TodoMVC
3. React Typescript samples

Immutable Data Structures

Immutable.js

1. Immutable.js: An Introduction with examples written for humans

How To Use This Guide

Use a linear approach to complete this guide. That means you should start with the first resource in the Essential Path 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.

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.

After you complete the Essential Path, you can choose one (or more) topics in the Optional Path. You do not need to go through this section in the same linear approach, you should choose new topics to learn based on your necessity and/or desire.

How To Collaborate

To suggest new sections or new resources, open one issue for each resource/section explaining why we should add/remove such item. 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.

Team

• Project creator: Eric Douglas
• Project maintainer: Eric Douglas
• Contributors: contributors

Inspiration And Additional Resources

Inspiration

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

Additional Resources

1. React/Redux Links
2. Redux Ecosystem Links
3. Community Resources