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.
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.
- ES6 Tutorial or Coursera ES6 Basics
- Follow some Vanilla projects:
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.
- 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
- 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:
- 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
- Game of live
- Markdown preview
- Recipe App
- Bookmark app
- Build a website
- Weather app
- Movie list app
- Multi Step Form With React & Material UI
- YouTube clone
- 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
Redux could be the most challenging subject. store, actions, reducers, thunks, sagas, dispatching. Start by learning how to use
useState hook, 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 you might not need Redux
- 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
- 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
- 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
- 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
- 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.
Happy React/Redux time!