Thread by @jherr

Was asked by a Python dev on my Discord three questions about learning @react_js. 1) Do I have a course? 2) Good project based examples. 3) React gotchas. Long form answer there, 🧵 here.

I have a course youtube.com/playlist?list=… It's free. Free doesn't mean bad. It just means free. The content is up-to-date and covers everything you'd need to get a job doing @react_js. It's in JavaScript.

The course does include projects, and yes it's Todo lists, hey, it works. And there are three gotchas in react; Hooks, Async and State Management.

#1 Hooks: Hooks are weird and they trip people up. Especially the dependency arrays on useEffect, useCallback and useMemo. Spend some quality time learning hooks. Here is a video specifically around hooks and dependency arrays:

#2 Async is interesting in JavaScript at any time, and in React more so. Learn async/await and promises. Make sure the projects you work on include some element of asynchronous behavior (e.g. making an API call). Timers are also a good way to learn async.

#3 State Management - React is a "view framework". Its built-in state management is primarily intended to manage view state (e.g. whether a modal is open or closed).

Any application will have business logic and business state which are probably best handled, in a React application, by using a state management library. IMHO there are four common "models" of state management and you should try one (or more) from each.

One-way data binding: Redux, Redux + Redux Toolkit, Redux + Rematch, or Zustand. I would start with Zustand and then Redux + Redux Toolkit.

Two-way data binding: MobX or Valtio. Both of these are excellent libraries and worth a go. Valtio is a touch easier to get started with.

State machine: XState. This is where you have discrete states in your UI and the library models those states and the rules that govern transitions between states. I expect XState adoption to grow a lot in 2022.

Atomic: Recoil and Jotai. This is a very cool and innovative way to model state and the dependencies between the different state "atoms". I'm a Jotai fan, but Recoil is backed by FB. Either will teach you the core concepts.

Bonus: You might also want to try a simple global state hook (react-hooks-global-state). This is kind of a half-step between state management using hooks and state management using a state manager.

Hope this all helps you on your React journey. 😁