stefanofiorenza/FE-ReactJS

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
• Video 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. The Road to learn React basic

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. Build a Weather app
5. The SoundCloud Client in React + Redux
6. A Primer on the React Ecosystem: 1, 2 and 3.
7. Building a React/Redux App with JSON Web Token (JWT) Authentication
8. [Tools and React] https://dev.to/jsmanifest/22-miraculous-tools-for-react-developers-in-2019-4i46

video-resources

REACT BASICS

@Traversy

1. React JS Crash Course 2019@Traversy Video
   • Git(https://github.com/bradtraversy/react_crash_todo)

@Swartzmuller

1. Playlist Video
   • Git (https://github.com/mschwarzmueller/reactjs-basics)

@LearnCodeAcademy:

1. [Playlist Video] (https://www.youtube.com/watch?v=1w-oQ-i1XB8&list=PLoYCgNOIyGADILc3iUJzygCqC8Tt3bRXt)
   • Git Unofficial: (https://github.com/learncodeacademy/react-js-tutorials)

REDUX

@Traversy

1. Redux@Traversy Video

• Git (https://github.com/bradtraversy/redux_crash_course)

@Swartzmuller

1. [Redux@Swartzmuller Playlist] (https://www.youtube.com/watch?v=qrsle5quS7A&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_) (https://github.com/mschwarzmueller/reactjs-redux-basics)

@CodeWalkThrough

1. [Redux@CodeWalkThrough Playlist] (https://www.youtube.com/playlist?list=PL7sCSgsRZ-slZBE_8vsxzs1Rgrj7SVS-0)
   • Git (https://github.com/johnazre/youtube-intro-to-redux)

@LearnCodeAcademy:

1. [Redux@LearnCodeAcademy Playlist] (https://www.youtube.com/watch?v=DJ8fR0mZM44&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b&index=20&t=10s)
   • Git Unofficial whole course React + Redux (https://github.com/baskoroi/react-redux)

@Imran Sayed:

1. [Redux@Imran Sayed: Playlist] (https://www.youtube.com/watch?v=M_xaxck1SVY&list=PLD8nQCAhR3tSSFktby1h8htS6QWTTneEr)
   • Git (https://github.com/imranhsayed/redux-workshop/tree/combine-multiple-reducers)

REACT CONTEXT API:

@Traversy

1. Lyric Search App With React & Context API 1@Traversy Video
2. Lyric Search App With React & Context API 2@Traversy Video
3. Lyric Search App With React & Context API 3@Traversy Video
   1.1 Lyric Search App With React & Context API@Traversy Git

REACT HOOKS:

@Traversy

1. ReactJs Hooks@Traversy Video
   1.1 ReactJs Hooks@Traversy Docs

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

Mind Map Web Development in 2018

https://coggle.it/diagram/WMMEvSoNyAABBX2w/t/web-development-in-2018/b97ca171d59ba2ab3b7ea8da244a8ed3a154ffa067568635fe2676068a1d44d0

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