Documentation and roadmaps
- Official documentation of React. React documentation has two main sections — Learn and Reference. The Learn section guides you from basic knowledge of what React is to the implementation of custom hooks. It covers the majority of stable features. The Reference section contains information about all features and also useful examples of how to use features and common issues that you could encounter.
- Official documentation of TypeScript. The TypeScript site also contains two main sections: Handbook and Reference. The Handbook introduces you to all aspects of TS from basic usage to more comprehensive usage. The Reference section contains more extensive information about TS and the approaches it offers.
- If you prefer a more visual way to understand the React or TypeScript ecosystem, check out these awesome Roadmaps: React Developer Roadmap and TypeScript Roadmap. Clicking on any node provides more information about the topic plus some links for learning.
Books
- TypeScript Deep Dive — Not new but still a relevant free online book covering recent JavaScript features, TypeScript, React, and FrontEnd development.
- Tackling TypeScript — an online free book by the awesome Dr. Axel Rauschmayer (who has other books as well) about how TypeScript works. It helps you understand better how it works under the hood and describes non-trivial cases of how TS could be used.
Let’s combine React and Typescript.
- There are many video courses online, and I haven't checked them all. I could recommend the site https://www.totaltypescript.com/, which has a good collection of articles about React and TypeScript and a really good short free video course https://www.totaltypescript.com/tutorials/react-with-typescript - video lessons on how to type your React projects and a GitHub repo where you can do exercises. Kudos to Matt Pocock for his excellent work.
- React TypeScript Cheatsheets — Cheatsheets for experienced React developers getting started with TypeScript. Contains many examples of how to add types to your React project and also how to troubleshoot errors in the TS compiler.
Let's do some Challenges!
- TypeHero - A collection of TypeScript interactive coding challenges.
- Interactive Handbook — An online code platform that offers interactive code challenges.
- https://github.com/type-challenges/type-challenges — A repository that has a lot of challenges and tasks. Check it out for a new experience.
Conclusion
I know that there are many more resources about TypeScript and React. I mentioned only those that I know and have used.