Let's React. Learn React in 30 days

26 Oct 2020 #letsX #react

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 learn React in 30 days!

React is a JavaScript library to build user interfaces. It doesn’t do a lot of things. It renders elements on the screen. Period! React isn’t a Swiss-army knife framework full of functionalities.

To learn React in 30 days, start learning to create components and understand the difference between props and state. Next, learn about hooks and how to style components. After that, learn about managing state with hooks. But don’t rush to use Redux from the beginning.

Instead of reading books from cover to cover or passively watching YouTube videos, let’s learn React by doing, by getting our hands dirty. Let’s recreate examples, build mini-projects, and stop copy-pasting. If you’re instered in learning strategies, check my takeaways from the Ultralearning book.

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

1. Prerequisites

Before starting to work with React, make sure to know about flexbox in CSS and ES6 JavaScript features.

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.

2. React

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
• 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

3. React and Redux

Redux could be the most challenging subject. You have to learn new concepts like: store, actions, reducers, thunks, sagas, dispatching.

Before getting into Redux, 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 a Redux store and where you should make your API calls. Be aware you might not need Redux at all.

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 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

4. 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

5. Practice and 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

6. Other resources

• 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

Voilà! Those are the resources and project ideas to learn React in 30 days. Start small creating components and understanding the difference between props and states. You can find my own 30-day journey following the resources from this post in my GitHub LetsReact repository.

If you’re interested in learning projects, check Let’s Go and my advice to start an ultralearning project.

Happy coding!