useful references about react + typescript

_react_and_typescript.md

• React.js

  • [YouTube] React in 100 seconds | Fireship

  • Tao of React - Software Design, Architecture & Best Practices | Alex Kondov - 2021/01/18

  • My Top 5 Best Practices for ReactJs | HackerNoon - 2022/03/14

  • [YouTube] 4 React Best Practices That Will Make You A PRO | PedroTech - 2022/03/29

  • React Testing | React Docs

  • React Hooks | React Docs

  • React Hooks Cheatsheet

  • Learn React: Hooks Cheatsheet | Codecademy

  • React Hooks: everything you need to know! | Software on the Road - 2019/03/19

  • Deep dive: How do React hooks really work? | Netlify Blog - 2019/03/11

    • [YouTube] Getting Closure on React Hooks by Shawn Wang | JSConf.Asia 2019

  • Intro to React Hooks | CSS-Tricks - 2020/05/01

  • React’s useCallback and useMemo Hooks By Example | Nikolay Grozev - 2019/04/7

  • useHooks - Easy to understand React Hook recipes

  • React.useEffect

    • A Simple Explanation of React.useEffect() | Dmitri Pavlutin Blog - 2021/10/06

    • The last guide to the useEffect Hook you’ll ever need | LogRocket - 2020/11/04

    • A Complete Guide to useEffect | Overreacted - 2019/03/09

    • React useEffect hook with code examples | linguinecode - 2019/03

    • [YouTube] Mastering React's useEffect | Jack Herrington - 2022/01/24

      • [GitHub] jherr/taming-useeffect

    • useEffect vs useLayoutEffect | Kent C. Dodds - 2020/12/01

    • How to Test React.useEffect | Epic React by Kent C. Dodds - 2020/11/16

  • Simplify React Apps with React Hooks | Egghead.io

  • React Hooks: Making it easier to compose, reuse, and share React code - 2019/02/06

  • [YouTube] 10 React Hooks Explained // Plus Build your own from Scratch | Fireship

  • 5 Tips to Help You Avoid React Hooks Pitfalls | Kent C. Dodds - 2019/08/05

  • Build a Chat App Using React Hooks in 100 Lines of Code | CSS-Tricks - 2019/07/22

  • React Context

    • [Gist @erkobridee] my way of use the react context effectively

    • [YouTube] Mastering React Context: Do you NEED a state manager? | Jack Herrington - 2022/03/07

      • [GitHub] jherr/mastering-context

  • [YouTube] Picking From 20 React State Managers | Jack Herrington - 2022/01/03

    • [GitHub] jherr/which-react-state-manager

• React Query

  • [GitHub] tannerlinsley/react-query

  • [YouTube] React Query in 100 Seconds | Fireship

  • [YouTube] React Query Crash Course | Laith Harb

    • [GitHub] harblaith7/React-Query

  • [YouTube Playlist] React Query Tutorial for Beginners | Codevolution

• React Query vs. React Redux | Libhunt - Compare react-query vs redux and see what are their differences.

  • Does React Query replace Redux, MobX or other global state managers? | React Query

  • [YouTube] Redux Toolkit Query vs React Query | Jack Herrington

    • [GitHub] jherr/rtk-query-vs-rq

  • Migrating from React Redux to React Query | Theodo - 2021/10/19

  • [YouTube] Livestream: Refactoring to react-query | Kent C. Dodds - 2020/02/18

    • [GitHub] kentcdodds/bookshelf

  • [YouTube] React Query: It’s Time to Break up with your "Global State”! – Tanner Linsley | React Conferences by GitNation - 2020/05/18

• React Redux

  • [GitHub] reduxjs/react-redux

  • Understand Redux with React in few steps | by Jihen Barhoumi | Nerd For Tech | Medium - 2021/07/03

    • [GitHub] JiheneBarhoumi/Counter_Redux

  • [YouTube] React Redux (with Hooks) Crash Course | Laith Harb

    • [GitHub] harblaith7/react-redux-crash-course

  • [YouTube] Redux Tutorial - Learn Redux from Scratch | Programming with Mosh

• React Redux - Style Guide: Ducks Patten

  • Redux Toolkit - The official, opinionated, batteries-included toolset for efficient Redux development

    • [GitHub] reduxjs/redux-toolkit

    • [YouTube] React Redux Tutorial For Beginners | Redux Toolkit Tutorial 2021 | PedroTech

      • [GitHub] machadop1407/react-redux-toolkit-tutorial

    • [YouTube] Redux CRUD Tutorial in React - Redux Toolkit Tutorial | PedroTech

      • [GitHub] machadop1407/redux-crud-react

    • [YouTube] React with Redux Toolkit Crash Course | Laith Harb - 2021/09/12

      • [GitHub] harblaith7/Redux-Toolkit-Crash-Course

    • React Tookkit Query

      • RTK Query: The future of data fetching and caching for Redux | LogRocket - 2021/02/16

  • Modular Ducks - A design pattern for scalable redux architecture | DEV Community - 2021/05/10

  • [GitHub] erikras/ducks-modular-redux - A proposal for bundling reducers, action types and actions when using Redux

  • re-Ducks Pattern: [Gist] datchley / react-redux-style-guide.md - React + Redux Style Guide

    • Scaling your Redux App with ducks | freeCodeCamp - 2017/01/23

    • [GitHub] alexnm/re-ducks - An attempt to extend the original proposal for redux modular architecture

    • [GitHub] FortechRomania / react-redux-complete-example - A react+redux example project based on the re-ducks folder structure

    • [GitHub] erkobridee/react-socket-simple-chat - [JS] [OUTDATED] a simple chat application that uses react.js, redux and socket.io

      • redux re-ducks related code

    • [GitHub] erkobridee/nx-todos - ToDos app using the Nx (Extensible Dev Tools for Monorepos)

      • redux re-ducks related code

  • Redux in a TypeScript React Application: Following the Ducks Pattern | Andrew Jarombek - 2021/12/03

  • Set Up a Typescript React Redux Project | TypeOfNaN - 2020/01/23

    • [GitHub] nas5w/ts-redux - Sample React Redux Typescript app with thunks

• React Testing Library

  • [GitHub] testing-library/react-testing-library

  • Learn React Testing: React Testing Library Cheatsheet | Codecademy

  • React Testing Examples

  • React Testing Library – Tutorial with JavaScript Code Examples | freeCodeCamp - 2021/05/07

  • React Hooks Testing library

    • [GitHub] testing-library/react-hooks-testing-library

• TypeScript

  • TypeScript Cheat Sheets

  • [GitHub] typescript-cheatsheets / react

  • TypeScript Handbook

    • React | TypeScript Handbook

    • JSX | TypeScript Handbook

    • Generics | TypeScript Handbook

      • Define generics in TypeScript | Microsoft Learn

      • How To Use Generics in TypeScript | DigitalOcean - 2021/11/16

      • TypeScript — Generics and overloads | Charly Poly - 2018/05/19

    • More on Functions | TypeScript Handbook

      • writing good overloads

      • [GitHub Issue 35400] microsoft/TypeScript - Multiple generic functions in interface TypeScript

      • Example of functions overloads - on Gist | on TypeScript Playgroung

    • Conditional Types | TypeScript Handbook

      • Conditional types in TypeScript | David Sheldrick - 2018/11/21

  • How to Use TypeScript – Beginner-Friendly TS Tutorial | freeCodeCamp - 2022/03/29

  • Ultimate React Component Patterns with Typescript 2.8 | by Martin Hochel | Level Up Coding - 2018/02/28

  • React with TypeScript Cheatsheet | Bits and Pieces - 2021/11/24

  • TypeScript and React - Guide | fettblog.eu

    • TypeScript and React: Hooks - Guide | fettblog.eu

  • [YouTube] How to use TypeScript with React... But should you? | Fireship

  • [YouTube] React & TypeScript - Course for Beginners | freeCodeCamp

    • [GitHub] piyush-eon/react-typescript-taskify

  • [YouTube] React with TypeScript Crash Course | Laith Harb

    • [GitHub] harblaith7/React-With-TypeScript-Crash-Course

  • How to write a React Component in TypeScript | Kent C. Dodds - 2021/03/04

  • TypeScript React props: interfaces vs type aliases | Ben Ilegbodu - (2021/11/14) A practical breakdown of when to use interfaces versus types when defining TypeScript object types such as React prop types

  • TypeScript Types or Interfaces for React component props - Ronald Rey | Dev.to - 2020/02/03

_react_hooks_libraries.md

• [GitHub] erkobridee/react-lifecycle-hooks - useful react hooks to manage any function component lifecycle (storybook)

• React Hook Form - Performant, flexible and extensible forms with easy-to-use validation.

  • [GitHub] react-hook-form/react-hook-form - React Hooks for form state management and validation (Web + React Native)

• React Hooks Library

  • [GitHub] heyitsarpit/react-hooks-library - A collection of hooks and utilities for modern React

• Rooks - Collection of React hooks ⚓ for everyone.

  • [GitHub] imbhargav5/rooks - Essential React custom hooks ⚓ to super charge your components!

• usehooks-ts - Welcome to the documentation of usehooks-ts, a React hooks library, ready to use, written in typescript.

  • [GitHub] juliencrn/usehooks-ts - React hook library, ready to use, written in Typescript.

miscellaneous.md

• [YouTube] 10 Design Patterns Explained in 10 Minutes | Fireship - 2022/03/14

• [Twitter Thread] 🔥 Massive JavaScript Compilation 🔥 30 Tips on writing better JavaScript, TypeScript and React | @SimonHoiberg

---

• Next.js

  • Learn | Next.js