React

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