Let's React. Learn React in 30 days

Do you want to learn React and you don't where to start? Don't look for any other curated list of resources. Let's React!

React is an user-interface library. It doesn't do a lot of things. It renders elements. Period. React isn't a Swiss-army knife framework full of functionalities.

From 2020 StackOverflow developer Survey, React is the second most popular Web Framework.

"React is a JavaScript library for building user interfaces" reactjs.org

One of my takeaways from the Ultralearning book is you should learn a new skill in the context where that skill will be applied. So, it's better to learn by doing, instead of reading a book from cover to cover or passively watching videos. No copy and paste!

These are some resources to learn React, its prerequisites and related subjects.

Prerequisites

CSS

• CSS Layout tutorial
• Build a Professional Website

JavaScript

• A re-introduction to Javascript or Learn JavaScript in an hour
• ES6 Tutorial or Coursera ES6 Basics
• Follow some Vanilla projects:
  • Music Box
  • Todo App
  • Tetris Game
  • Twitter clone
  • Product catalog
  • E-commerce site
  • YouTube API Proxy server

Some of these projects include the backend side using Node.js. You can find more vanilla projects without any backend code on 15 Vanilla Project Ideas and 20+ Web Projects With Vanilla JavaScript.

Don't mess your environment with different versions of Node. Follow Don't Install Node Until You've Read This and Your Development Workflow Just Got Better, With Docker Compose.

React and Stuff

Other Study Plans

• 4-Week Plan: A Study Plan To Cure JavaScript Fatigue
• How to Learn React — A roadmap from beginner to advanced
• Resources for Learning React
• How to learn React.js in 2020
• A simple guide to learning React from scratch

React: First steps

• What React Does (and Doesn't Do)
• React Tutorial: An Overview and Walkthrough
• React: Getting Started - The Complete Tutorial for 2020
• From React official docs:
  • Tutorial: Intro to React
  • If you prefer learning concepts first, Hello World
  • Thinking in React
  • Composition vs inheritance

React Hooks

• A Simple Intro to React Hooks
• How to fetch data with React Hooks?
• Fix useEffect re-running on every render
• A Complete Guide to useEffect
• Examples of the useReducer Hook and How to useReducer in React
• React Context and How to useContext in React?
• React State Hooks: useReducer, useState, useContext
• Five common mistakes writing react components (with hooks) in 2020

Walk-throughs

Basic & Intermediate

• Game of live
• Markdown preview
• Recipe App
• Bookmark app
• Quiz app
• Calculator
• Build a website
• Weather app
• Movie list app
• Multi Step Form With React & Material UI
• YouTube clone

Advanced

• Expense tracker and its backend
• Chat with Chatkit or with Socket.io
• Firebase Authentication in React Tutorial for Beginners
• Yelp clone. To start with TDD in React, Getting Started with TDD in React
• Travel Log
• Todoist clone
• Building a Newsreader
• eCommerce site
• Reservation app
• Netflix clone

React & Redux

Redux could be the most challenging subject. store, actions, reducers, thunks, sagas, dispatching. Start by learning how to use useState hook, then useReducer, then useContext, and last Redux. It feels more natural this way.

Make sure to understand what to put into Redux store and where you should call your API calls. Be aware that you might not need Redux

Tutorials

• 8 things to learn in React before using Redux
• What Does Redux Do?, A Complete React Redux Tutorial for Beginners and Immutability in React and Redux: The Complete Guide
• Redux vs. The React Context API
• React Redux Tutorial for Beginners This is a complete Redux tutorial. It covers almost everything you need to know, from creating an store to testing your reducers.
• Leveling Up with React: Redux
• Redux Tutorial - Learn Redux from Scratch

Walk-throughs

• Simple Notes app
• Shopping Cart Checkout Summary An interview process exercise. Try to add Redux on your own
• Movie app with Redux Again try to add Redux on your own.
• Developing Games with React, Redux, and SVG

Courses

Paid

• Pluralsight React.js Getting Started
• Coursera Full Stack React
• Udemy Instagram clone

Free

• The Beginner's Guide to React
• The Free React Bootcamp
• Learn React for free
• 30 days of React
• Learn Building Applications with React and Redux

Practice & Project Ideas

• Cheat to Win: Learn React with Copywork. Two projects to copy: React Snake, GitHub issue viewer
• Hands-on projects to learn the basics of React
• 6 Fun React Project Ideas
• 5 React Projects You Need In Your Portfolio
• 10 React Starter Project Ideas to Get You Coding

Misc

• How to Structure Your React Project or React directory structure
• How to build Chrome extensions with React + Parcel
• React internals
• Build Yourself a Redux
• Frontend Framework Showdown

You can find my own 30-day journey following the resources from this post in LetsReact.

You can read about my progress and takeaways on Let's React. Day 18 of 30 and Let's React. Day 27 of 30

Happy React/Redux time!