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
JavaScript
- A re-introduction to Javascript or Learn JavaScript in an hour
- ES6 Tutorial or Coursera ES6 Basics
- Follow some Vanilla projects:
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
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!
Top comments (6)
waiting for let's react native
I didn't think about it. But...why not! Maybe Let's React Native is coming...
Thank you for considering it!
Beginning in 65 days, next year!
Happy coding, next year!
Thank you so much, Cesar! I expect the React world will be so promising that our class will understand the general aspects of this beautiful language created by Jordan.