- Egghead.io - Learning
- ExploringJS - Book covering ECMAScript 6 (ECMAScript 2015)
The class of bugs you're getting rid of are all those pesky (…cannot read… 'undefined') errors in the console. If you're ready to get started, check out some of the links below:
- Why Create TypeScript?
- TS for the New Programmer - TypeScript explained for beginners
- Why TypeScript?
- Beginner's TypeScript - A (free) interactive video course by Matt Pocock
- React with TypeScript - Another free video course by Matt Pocock
- No BS TS - A (free) video course by Jack Herrington
- Learn TypeScript - Full Tutorial
- TypeScript errors - How to fix your confusing TypeScript errors
- React TypeScript Cheatsheet
It is not an exaggeration to call TypeScript an entire programming language. The good news is you can adopt TS complexity only as it aids you. Sometimes you might have to temporarily level up or step outside your level of expertise to complete a feature. For example, if a library gives you code to work with and it's more advanced TS than you can ordinarily write on your own, it's perfectly acceptable to use it. In most cases, adopting it incrementally in your JS projects and code is pretty painless, and it allows you to learn at your own pace without halting development altogether.
To give you a quick idea of the current state of React, check out this 2-minute clip by Fireship titled React in 100 Seconds. While it barely scratches the surface, it quickly communicates why React is so popular today (an important context to keep in mind).
Arrays have developed as of
Now, moving onto the React API, JSX is a declarative way to describe our UI. React allows us to ignore the chaos of browser DOM APIs for rendering our apps (or mobile rendering in the case of react-native). You're really going to want to know JSX.
Below are some specific recommended articles both in the docs and from various sources to help you "think" like a React developer. We recommend them precisely because they help you build the mental model of how React works:
- Thinking in React
- Responding to Events (like clicking, typing, scrolling, etc.)
- Describing the UI
- Managing State (locally, in components)
- Built-In React Hooks (hooks reference)
- Escape Hatches
- Common Beginner Mistakes with React
Really Understanding How Rendering Works in React
Many newcomers to React think a performant React app means simply cutting down the number of "re-renders" - but to really master performant React code you need to understand when/how/why re-renders happen, and what's actually happening when a re-render occurs.
Crash courses and more you can blow through below.