Introduction
- 📺 React in 100 Seconds • 2 minute video by Fireship
- 🎓 Learn React for free • Four-hour online course by Bob Ziroll and Scrimba that includes interactive coding challenges and exercises and culminates in building two apps
- 📺 Mental Model of React Application Development • 8 minute video by Basarat Ali explaining how JSX and the virtual DOM work under the hood
State Management
- 📺 What State Management Library Should I Use with React? • 9 minute video by Lee Robinson explaining good options for separately managing UI state (e.g.
xstate
) and server-caching state (e.g.react-query
,swr
). See the accompanying blog post for a table with specific solutions for various use cases - 📺 How I Manage State in React • 17 minute video by Leigh Halliday with tips for how to separately manage app state and external data in
react
- 📺 Introduction to React Recoil (Experimental) State Management • 28 minute video by Leigh Halliday using a shopping cart as an example to show how to use
recoil
to manage state
SVG components
- 📺 SVG Components in React • 5 minute video by Basarat Ali showing how to create SVG components both manually and using
svgr
React Query
- 📺 All About React Query • 89 minute video by Tanner Linsley and Jason Lengstorf demonstrating how to use
react-query
to make cached fetch and post requests and keep them updated. Optimistic update method shown at 1:08:5 - 📺 React Query v3 - Refactor an app into using React-Query • 25 minute video by Weibenfalk showing how to refactor a movie search app infinite scrolling from custom data fetching hooks to
react-query
. - 📺 React shopping cart with TypeScript • 68 minute video by Weibenfalk showing how to create an ecommerce store using
react-query
3 and the Fake Store API - 📺 React Query - Data Fetching Hooks • 18 minute video by Leigh Halliday introducing how to use
react-query
to fetch data - 📺 Posting Data to Server from React - Query Updates from Mutations • 22 minute video by Leigh Halliday showing how to use
react-query
to update server-side data with an optimistic UI pattern
SWR
- 📺 Buffering new Tweets with SWR • 17 minute video by Sam Selikoff using a Twitter clone to demonstrate how to use
swr
to show cached content while fetching the latest content in the background
React Dev Tools
- Install in Chrome or Firefox: https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-to-get-it
- Useful for inspect state and props in production
Inbox
- https://kyleshevlin.com/compound-components
- https://www.builder.io/blog/react-js-in-2023