I assembled this list at my day job to train folks who had done C++/Java/etc, but never even touched JS or React before. Most of these links could be included here.
This list is at least somewhat less stale than the rest of the repo, although some of the links are likely outdated (like, Tania Rascia's React tutorial is still class-based, and I think Dave Ceddia has a couple newer posts that should be referenced).
Content follows:
Recommended Learning Path
You should learn these technologies in the following order:
"How Web Apps Work": a series of posts that lays out the big picture of the core technologies, terms, and concepts used in client/server web apps
JavaScript . If you don't know JavaScript, nothing else will make sense
React . You can use React by itself, or with Redux and/or TypeScript. Learning it separately will minimize the number of new concepts and syntax you have to learn at once.
Redux . Redux can be used separately, but it's most commonly used with React.
TypeScript . Because it adds static types on top of JS, you need to understand JS first. Also, it's easiest to understand React and Redux first, then learn how to use them with static types.
The resources in this page are listed in that order.
You are not required to read every single link and article listed in this page. However, you should try to read through as many of the articles linked in the "Recommended Primary Resources" sections as possible, especially for topics you are not already familiar with. Many of the recommended tutorials do cover the same topics, so feel free to skip past concepts you've already learned.
Links in the "Additional Resources" sections are available as references and reading as needed.
true
How Web Apps Work
Mark's post series that describes the key terms, concepts, technologies, syntax, and data flow used in web apps.
Start with reading the official docs first. However, the React team is in the process of starting a major rewrite of the React docs site to focus on teaching function components and hooks first. That won't be published until mid-2021. Until then, a third party has made a fork of the React docs and converted the tutorials and examples to show function components instead of classes, so I'm going to link that here and suggest reading it.
These other listed tutorials are also excellent and may explain things in a different way.
Use: CodeSandbox.io (an online IDE that uses VS Code's editor, and can let you develop and run your apps completely in the browser)
Use: Create-React-App (the official CLI tool for creating a React app with one command. Sets up a project with good default build settings out of the box.)
Specific Topics
Understanding how React works conceptually / internally
React as a UI Runtime (deep dive - not required reading, but will definitely help you understand React better)
"Redux Essentials" tutorial: explains "how to use Redux, the right way", using the latest recommended techniques and practices like Redux Toolkit and the React-Redux API, while building a real-world-ish example app.
"Redux Fundamentals" tutorial: teaches "how Redux works, from the ground up". including core Redux data flow and why standard Redux patterns exist.
Read: "Idiomatic Redux" concepts and opinion series. A series of blog posts that describes standard Redux development best practices, why they exist, and how Redux is meant to be used. (These are not required reading to get started, but highly recommended once you understand the basics.)
Legacy resources (do not cover "Modern Redux", but still informative)
Read: Redux Fundamentals Workshop slices** : a 2-day internal workshop that covers Redux from the ground up. Includes complete recordings of each section, slides, and an exercises repo. (Does not cover "Modern Redux", but
I assembled this list at my day job to train folks who had done C++/Java/etc, but never even touched JS or React before. Most of these links could be included here.
This list is at least somewhat less stale than the rest of the repo, although some of the links are likely outdated (like, Tania Rascia's React tutorial is still class-based, and I think Dave Ceddia has a couple newer posts that should be referenced).
Content follows:
Recommended Learning Path
You should learn these technologies in the following order:
The resources in this page are listed in that order.
You are not required to read every single link and article listed in this page. However, you should try to read through as many of the articles linked in the "Recommended Primary Resources" sections as possible, especially for topics you are not already familiar with. Many of the recommended tutorials do cover the same topics, so feel free to skip past concepts you've already learned.
Links in the "Additional Resources" sections are available as references and reading as needed.
true
How Web Apps Work
Mark's post series that describes the key terms, concepts, technologies, syntax, and data flow used in web apps.
Recommended Primary Resources (should read)
Javascript
Recommended Primary Resources (should read)
General JS
Specific Topics
thiskeyword and scopesthiskeyword in JavaScriptthisin JavaScriptAdditional Resources (read as needed)
General JS
Specific Topics
package.jsonGuidepackage.jsonFileReact
Recommended Primary Resources (should read)
General React
Start with reading the official docs first. However, the React team is in the process of starting a major rewrite of the React docs site to focus on teaching function components and hooks first. That won't be published until mid-2021. Until then, a third party has made a fork of the React docs and converted the tutorials and examples to show function components instead of classes, so I'm going to link that here and suggest reading it.
These other listed tutorials are also excellent and may explain things in a different way.
Read: official React docs
Read: React docs (converted to show hooks)
Watch: React Tutorial for Beginners
Read: [Intro to React, Redux, and TypeScript for 2020](Intro to React, Redux, and TypeScript (2020)) (Mark's presentation slides)
Read: Build a CRUD App in React with Hooks
Read: A Comprehensive Guide to React in 2020
Exercises: Learn React - Interactive Tutorials
Project Setup
Specific Topics
Additional Resources (read as needed)
General React
Redux
Recommended Primary Resources (should read)
General Redux
Start with reading the official docs first, and also watch Mark Erikson's "Redux Fundamentals Workshop" videos.
The other tutorials are also excellent and may explain things in a different way.
connect() : Extracting Data withmapStateToPropsconnect(): Dispatching Actions withmapDispatchToPropsMark Erikson's Redux Resources
Specific Topics
Additional Resources (read as needed)
TypeScript
Recommended Primary Resources (should read)
Specific Topics
interfacevstypeAdditional Resources (read as needed)