React.js

November 22, 2023

December 4, 2015

The library for web and native user interfaces

React is moving fast, post older then 2 years should be discarded
TODO: remove old docs (reviewed to #Hook)

React – The library for web and native user interfaces
Quick Start – React
Introducing react.dev – React

Learn React - Best React Tutorials (2022) | gitconnected
The Beginner's Guide to React | egghead.io 2021
React Crash Course for Beginners 2021 - Learn ReactJS from Scratch in this 100% Free Tutorial! - YouTube 3:51:55
React Course - Beginner's Tutorial for React JavaScript Library [2022] - YouTube 11:55:27
Learn React With This One Project - YouTube 2023-04, 42:37
React Tutorial: Learn React JS - Free 11-Hour Course
Become a Pro React Developer - YouTube
Learn React and TypeScript - YouTube

React.js: The Documentary - YouTube
ReactJs Roadmap🗺 for beginners - 2021 - DEV Community mind map
Why React Hooks? - YouTube an overview of React API history
render props and HOC creates false hierarchies and wrapper hells
React Philosophy For Beginners. Important concepts every React… | by ThankGod Ukachukwu | Bits and Pieces

React’s true strengths:

composition
unidirectional data flow
freedom from DSLs
explicit mutation
static mental model
minimal rendering with vDOM diff

React blends view and controller more the higher up in the component hierarchy. It allows developer to "do what makes sense for your current project". This more important thing is the philosophy of uni-directional data flow.

Your Timeline for Learning React
React Resources
React book landing page
Learn
React Fundamentals some free lessons

Watch The 2020 Reactathon San Francisco Developer Conference for Free

Introduction

React Screencasts

Fullstack React 🐬: React Tutorial: Cloning Yelp
Fullstack React: 30 Days of React
Start Learning React from @joemaddalone on @eggheadio
React Testing Cookbook from @trevordmiller on @eggheadio

React.Component – React
React lifecycle methods diagram src
React Component Lifecycle - DEV Community 👩‍💻👨‍💻

JavaScript's History and How it Led To ReactJS - The New Stack
Baby’s First Reaction — JavaScript Scene — Medium
The React Handbook
ReactJS For Stupid People
Josh Haberman: React Demystified
The React.js Way: Getting Started Tutorial
ifandelse/ReactJS-Rethinking-Web-UI
ES2015 (ES6) Features Commonly Used with Functional Style React - BEKK Open
Introduction | React 入门教程
 Setting State in React - Frontend Masters
These are the concepts you should know in React.js (after you learn the basics)
Reintroducing React: every React update since v16 demystified.

React JS Todo 2 - JSFiddle

Want to learn React.js? Here’s my free course which teaches it by building a chat app.
Building a chat app with React.js and Chatkit | Scrimba.com
Building a React-based Chat Client with Redux – ITNEXT

Starter Kit

DO NOT use Create React App anymore

nextjs
vite#Templates

Replace Create React App recommendation with Vite by t3dotgg · Pull Request #5487 · reactjs/react.dev

npm create vite@latest my-app -- --template react-ts
yarn create vite my-app --template react-ts

# or use Next.js right away
npx create-next-app@latest --ts my-app
yarn create next-app --ts my-app

npm create t3-app@latest
yarn create t3-app

Project structure

How to Structure Your React Project
How to structure your react app. - By
How to structure your React app 2. - ITNEXT
How I structure a React project - DEV Community 👩‍💻👨‍💻
folder-structure.md
Fractal — A react app structure for infinite scale | Hacker Noon
Folder Structure in React Apps - Noteworthy - The Journal Blog
Screaming Architecture - Evolution of a React folder structure - DEV Community

Structuring projects and naming components in React | Hacker Noon src/screen (= page, matches routes), src/components

CRUV: Structure React apps in 4 directories and 3 files - James K Nelson

/containers/
/routes/
/utils/
/views/
/config.js
/contexts.js
/store/ (optional)

A Simple Approach to File Structures in React Apps | by Juan Bernal | JavaScript In Plain English | Medium

Scalable file structure for React and other projects
move files around until it feels right

Commentaries

Why React

Why We Moved From Angular to React
Why I Ditched Angular for React
Why are we using React.js in our projects? - React Kung Fu
From Ember to React — Medium

Pete Hunt: React: Rethinking best practices -- JSConf EU 2013 - YouTube
Built With React

React vs. Ember - Alex Matchneer - EmberNYC meetup - Google Slides
Removing User Interface Complexity, or Why React is Awesome
javascript - Pros and Cons of Facebook's React vs. Web Components (Polymer) - Programmers Stack Exchange
React.js and How Does It Fit In With Everything Else? - Funny Ant
Is React killing Angular? - Quora
Should I learn ReactJS or AngularJS? - Quora

On the contrary

React vs. Vue: Clash of the JavaScript titans | InfoWorld

Don't React - webbisauna
You probably shouldn’t be using React – Noteworthy - The Journal Blog
Boiling React Down to a Few Lines in jQuery - Hackflow
Is React Overrated?. Or does it actually have some merits… | by Aphinya Dechalert | matcha.fyi
Really, why React? - DEV Community
React Is Holding Me Hostage

React/TypeScript

React TypeScript: Basics and Best Practices | by Fernando Doglio | Bits and Pieces
The React TypeScript Cheatsheet – How To Set Up Types on Hooks
How to Use TypeScript with React Components
Making the most boring website ever with TypeScript, NodeJs, React. - YouTube 2022

The React.ReactNode type is a black hole |> Changelog <ReactNode>, in particular <ReactFragment> is equivalent to any

reactjs - React createContext issue in Typescript? - Stack Overflow

import { createContext } from 'react';

interface IUserObject {}

interface IUserContext {
  user: IUserObject;
  setUser: React.Dispatch<IUserObject>;
}
const UserContext = createContext<IUserContext>({} as IUserContext);
export const UserProvider = UserContext.Provider;
export const UserConsumer = UserContext.Consumer;
export default UserContext;

interface Props {
  seriesList: SeriesProps["seriesList"];
  setSeriesList: Dispatch<SetStateAction<SeriesProps["seriesList"]>>;
}

const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
  //
};

const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
  // ...
};

missing .d.ts:
create modules.d.ts and define module

Minimal React

without build step

Minimal React.js Without A Build Step (Updated) | Shing's Blog 2018-02
How to add React to a simple html file – Toni Petrina – Medium 2017-01

Learn to think in React | Pure React coupon code: INDIA9?

Internals

React In Depth – Medium
Overreacted — A blog by Dan Abramov
Deep dive into React codebase Series' Articles - DEV Community

React as a UI Runtime — Overreacted
How Virtual-DOM and diffing works in React – Gethyl George Kurian – Medium
Performance Calendar » React’s diff algorithm

Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior · Mark's Dev Blog
Understanding Rendering Behavior in React
A Visual Guide to React Rendering - Cheat Sheet | Alex Sidorenko
A Visual Guide to React Rendering - DOM | Alex Sidorenko

React - Under the hood
A Closer Look at ReactDOM.render - The Need to Know and More -- newline
Managing DOM components with ReactDOM - LogRocket Blog

SyntheticEvent – React
Getting started with React SyntheticEvent - LogRocket Blog

How Does React Tell a Class from a Function? — Overreacted
Why Do React Elements Have a $$typeof Property? — Overreacted

Why Do We Write super(props)? — Overreacted

Lucy | How does React decide to re-render a component?

Components

many of these are outdated (HOC, props drilling, render props)
but lifecycle, slot pattern, controlled vs uncontrolled, compound components are fundamentals

Component – React

Stateful and Stateless
Classes and Functions
Pure and Impure

Use memo() HOC to wrap functional components for PureComponent.
Set displayName property of the function to help debugging.

React Component Lifecycle Methods Cheatsheet 📄 - DEV Community 👩‍💻👨‍💻
React Component Lifecycle Hooks Cheatsheet 📄 - DEV Community 👩‍💻👨‍💻

React component patterns - Team Subchannel - Medium
React Component Patterns by Michael Chan - YouTube
Merrick Christensen - Headless User Interface Components

Advanced React Component Patterns workshop @ PayPal (Part 1) - YouTube
Advanced React Component Patterns workshop @ PayPal (Part 2) - YouTube

React Patterns Workshop - Slidev
nearform/react-patterns-workshop: A workshop which covers intermediate and advanced React usage patterns
nearform/scalable-front-end-architecture-react-example

React Component Lifecycle - DZone Web Dev
React Stateless Functional Components: Nine Wins You Might Have Overlooked ❗!important
Understanding React’s Components: Stateless and Stateful
Writing Resilient Components — Overreacted mostly a pitch to hooks
How the “Golden Rule” of React components can help you write better code
Better Reusable React Components with the Overrides Pattern
Anti-patterns to avoid when building a component library in React Native
How to write great React - The Startup - Medium

Props passing

Composition vs Inheritance – React

Prop Drilling
React Anti-Pattern: Prop-Drilling - codeburst with HOC
When to break up a component into multiple components
How to Solve Render Props Callback Hell
Application State Management with React
How to use React Context effectively
How to Avoid Prop Drilling with Composition - The Non-Traditional Developer - Medium

How to pass props to components in React - RWieruch slot pattern
the-road-to-learn-react/react-slot-pattern-example: An example implementation of React's slot pattern for passing components as props

In-depth explanation of state and props update in React

Controlled and Uncontrolled Component

An component is controlled if the parent explicitly set its value (probably from state/store) and provides a callback to update this value. It is uncontrolled if it has internal state and response to inputs without the parent knowing, which is similar to letting the DOM handling the state.
Note that controlled components are no longer interactive by default (as it reflects the state). You must use onChange() to update the state when the component is changed.
Also note that null or undefined are considered uncontrolled in React. Set initial state of controlled component to '' or false.

Sharing State Between Components – React
– React
– React

Value of null for Controlled Input | React
How “Controllable” React components maximize reusability
To Be or Not to Be - Better Programming - Medium

Building a Dynamic, Controlled Form with React – ITNEXT data-* as dateset
Controlled Form Inputs in React - DEV Community 👩‍💻👨‍💻

You Probably Don't Need Derived State – React Blog derived state in child component is also uncontrolled data

jquense/uncontrollable: Wrap a controlled react component, to allow spcific prop/handler pairs to be uncontrolled

Compound Components/Sub-Components/Namespacing

React Tutorial - Compound Components in React - Styled Components - React Design Patterns - YouTube
Ryan Florence - Compound Components - YouTube critics on how we compose components, uses cloneElement()

Component Dot Notation with TypeScript | Spencer Miskoviak
Composing React Components with TypeScript | Pluralsight

Converting tables to grids with React compound components - LogRocket Blog <LayoutSwitch>
KRRISH96/react-layout-switch-blog-example: A Compound Component Example
Write Compound Components | egghead.io

Compound Components In React — Smashing Magazine
Compound Components with React Context API - Noteworthy - The Journal Blog
Using the React.cloneElement() function to clone elements - LogRocket Blog
React.js — Compound Components - Dane Sirois - Medium

enkidevs/seapig: 🌊🐷 Utility for generalized composition of React components 😴inactive

Refs

Refs and the DOM - React
Use React.createRef()/React.useRef(), not string ref or callback ref

How to use React's useRef() hook
Working with refs in React | CSS-Tricks
How to use React Ref

Forwarding Refs – React
How to use React's forwardRef function
Cleaning up the DOM with ForwardRef in React - LogRocket Blog
Generic Component with forwarded ref. · Issue #106 · typescript-cheatsheets/react

useRef() not limited to DOM node, hold previous state and store non-state value
How to get previous props/state with React Hooks - LogRocket Blog
8 Useful Practices for React Apps You Should Know - DEV Community 👩‍💻👨‍💻
React Hooks - Passing Child Component State Up with useRef
The Latest Ref Pattern in React | Epic React by Kent C. Dodds

Refs in React : All you need to know ! – Hacker Noon string refs are DEPRECATED
When to use React's Ref on a DOM node in React - RWieruch callback ref

Portal

since 16.0

Portals – React
Using React Portals to Render Children Outside the DOM Hierarchy | CSS-Tricks
React’s Portals in 3 minutes - codeburst
Using a React 16 Portal to do something cool - HackerNoon.com - Medium
React Portals: What are they and why should we use them?
React-cool-portal: What it is and how to use it - LogRocket Blog
Using React Portals to build a modal | LogRocket Blog

diegomura/react-portalgun: Lightweight portal system for React. Mega seeds included 🔫
tajo/react-portal: 🎯 React component for transportation of modals, lightboxes, loading bars... to document.body or else.

Code Splitting/Lazy Loading

since 16.6
not my concern, built tool/app framework should take care of this

lazy – React
– React

Magic of React Suspense with concurrent react and React.lazy API - By Vivek Nayyar
Async React using React Router & Suspense – ITNEXT
Analyze your React app’s bundle size and reduce it using code-splitting · Emma Goto
React.js: reduce your javascript bundle with code splitting
Lazy Loading React Components (with react.lazy and suspense)
How to Reduce React App Loading Time By 70% - DEV Community

Loadable Components - React code splitting can embed async components for SSR
Comparison with React.lazy - Loadable Components
An SEO approach to async components with loadable-components - LogRocket Blog
Code splitting in React: An overview - LogRocket Blog

App Frameworks/Distros

nextjs

JavaScript Frameworks in 2023 - YouTube
drawing

React Distros

Hydrogen overview
Shopify/hydrogen: React-based framework for building dynamic, Shopify-powered custom storefronts.

Openblocks overview - Openblocks Docs
openblocks-dev/openblocks: 🔥 🔥 🔥 The Open Source Retool Alternative

Remix vs. Next.js vs. SvelteKit - LogRocket Blog

Refine

refine | Build your React-based CRUD applications, without constraints! | refine
refinedev/refine at float-cta

Getting started with Refine, the React-based framework - LogRocket Blog
Migrating a React-Admin Application to refine 💖 - DEV Community

Remix

Server Side Rendering ONLY, app framework

Remix - Build Better Websites
Remix: A guide to the newly open-sourced React framework - LogRocket Blog
Remix: The Yang to React's Yin
Why I Love Remix
I Built a Blog with RemixJS so You Don't Have To (You're Welcome)
Is Remix JS the Next Framework for You? | Bits and Pieces
An Alternative to Next.JS? - Everything You Need to Know About RemixJS
Remix - Web Standards Are Cool Again - Simple Thread

Remix Tutorial with Kent - YouTube 6 hours
Remix is a NEW JavaScript framework you MUST try - YouTube

Remix vs Next.js | Remix
Remix vs. Next.js: A Detailed Comparison | by Ravidu Perera | Feb, 2022 | Bits and Pieces
Moving from Next to Remix

Ultra

Ultra: Un-bundle the Web Aleph/Deno + React
Using Ultra, the new React web framework - LogRocket Blog

Aleph.js

React Server Component

this is a React + Next.js thing (Next.js adding nextjs#Server Actions)
the paradigm is quite different from React on client, I won't try this

Understanding React Server Components – Vercel
Getting Started: React Essentials | Next.js

Making Sense of React Server Components
React Server Components: A Comprehensive Breakdown - YouTube 52:41

My take on the current React & Server Components controversy | phryneas.de

React Server Components
Introducing Zero-Bundle-Size React Server Components – React Blog
React Server Components. - It’s not server-side rendering. | by Nathan Sebhastian | Bits and Pieces
I Tested React Server Components And I'm Not A Fan (Yet).
What are React Server Components? - International Javascript Conference
React Server Components in Next.js 12 - LogRocket Blog
React Advanced Features: Server Components | by Nivetha Krishnan | Feb, 2022 | Bits and Pieces

Did RSCs Really Turn React Into PHP? - YouTube
PHP vs Next.js Pages vs Next.js App Router

Server Side Rendering/Hydration

ReactDOM – React
Understanding React Hydration | Gatsby
Understanding Hydration in React applications(SSR) | Saeloun Blog
Deep dive into the new Suspense Server-side Rendering ( SSR ) architecture in React 18 | Saeloun Blog
Conquering JavaScript Hydration - DEV Community

Hydration is Pure Overhead
Why Progressive Hydration is Harder than You Think
Why Efficient Hydration in JavaScript Frameworks is so Challenging - DEV Community

The Perils of Rehydration: Understanding how Gatsby/Next manage server-side rendering and rehydration
The site will be "rehydrated" on client to make it dynamic.
Use two-pass rendering to prevent invalid default state, useHasMounted().

Suspense

since 16.6

<Suspense> captures a thrown Promise from its children in render tree and renders the component in fallback prop.
React Suspense: Bringing a Bit of Hitchcock to UI Performance
Understanding Suspense-ful coding in React - DEV Community uses suspension

Fetch-then-render, as opposed to Fetch-on-render as in useEffect() and componentDidMount(). The fetched data are supposed to be stored in some global cache as the current component is removed.

Present and future
Why React Suspense Will Be a Game Changer - React In Depth - Medium
What the heck is this in React ? 🥁🥁(Suspense) 🥁🥁

Dan Abramov - Suspense! - ReactFest 🎡 - YouTube ❗!important, code splitting
Dan Abramov: Beyond React 16 | JSConf Iceland 2018 - YouTube
Moving To React Suspense - Jared Palmer - React Conf 2018 - YouTube
Andrew Clark: React Suspense - YouTube
Data Fetching With Suspense In Relay | Joe Savona - YouTube

A Quick Walkthrough of SuspenseList in React - Bits and Pieces

Another use case is for data fetching (experimental), using react-cache (experimental).
This function also be archived by Hooks as of now.
The Suspense is Killing Redux - Ryan Florence - Medium
Suspense for Data Fetching (Experimental) – React
React Suspense in Practice | CSS-Tricks
How to use React Suspense for Data Fetching Now | Level Up Coding
React Suspense with the Fetch API – Levelup Your Coding
React's Experimental Suspense API Will Rock for Fallback UI During Data Fetches | CSS-Tricks

<SuspenseList> controls order of rendering
First Look at React Suspense List - YouTube
Concurrent UI Patterns (Experimental) – React
Concurrent Mode API Reference (Experimental) – React

Hook

since 16.8
TODO: clean-up trivial posts

new API to replace life cycle API, co-locate effect/logic and state to a reusable function

Introducing Hooks – React ❗!important
Rules of Hooks – React
Hooks at a Glance – React
Hooks FAQ – React
Hooks API Reference – React

One Hook Per Screen: a simple architecture for scalable React Native apps | Theodo application, best practice, custom hook

Collection - React Hooks and Suspense on @eggheadio
Rundown of the Most Important React Hooks | by Kunal Vishnoi | Better Programming | Medium
Underrated React Hooks you're missing out on - LogRocket Blog
React Hooks: The good, the bad, and the ugly - LogRocket Blog
What are React Hooks and Why do I need them?
Making Sense of React Hooks - DEV Community 👩‍💻👨‍💻

React Today and Tomorrow - Sophie Alpert and Dan Abramov - React Conf 2018 - YouTube
90% Cleaner React With Hooks - Ryan Florence - React Conf 2018 - YouTube
ryanflorence/react-conf-2018
React.js Hooks Crash Course - YouTube

Developer Productivity Tips from 25 React Experts | KendoReact
Hooked on React - ITNEXT

Build Tic Tac Toe with React Hooks

Learn React Hooks – A Beginner's Guide
React Hooks cheat sheet: Unlock solutions to common problems - LogRocket Blog
Frustrations with React Hooks - LogRocket Blog
Solutions to frustrations with React Hooks - LogRocket Blog
React Hooks — Gotchas - Fuzz - Medium
Best Practices With React Hooks — Smashing Magazine

Introducing: Redux Hooks – ITNEXT
An Intro to Advanced React Hooks - In the Weeds - Medium
Why React Hooks, and how did we even get here?
Why React Hooks? A developer’s perspective. – Hacker Noon
The useState Hook: A Deep Dive into React State Management - DEV Community 👩‍💻👨‍💻
Hooked on Hooks - The Startup - Medium
Introduction to React Hooks
An Overview of React Hooks with Examples – Level Up Your Code
⚛️ React: Hooks vs. Render Props vs. Higher-Order Components 👨‍🔬 - DEV Community 👩‍💻👨‍💻
Understanding Hooks in React. An introduction to React 16.7 hooks… | by Mahesh Haldar | Bits and Pieces
How to Reuse Logic with React Hooks | Rafael Quintanilha
How to Create Your First React Hook from Start to Finish useCopyToClipboard()

How to Use Basic React Hooks for State and Effects
How to Use Basic React Hooks for Context
How to Use Basic React Hooks for Reducers
A Dark Mode Toggle with React and ThemeProvider | CSS-Tricks

Programming Patterns with React Hooks - JavaScript in Plain English - Medium
Advanced React (anti)patterns - Frontend Weekly - Medium async useCallback()

Frustrations with React Hooks - LogRocket Blog
Gotchas of working with React Hooks and Concurrent mode

Asynchronous Functional Programming Using React Hooks

Notes on TypeScript: React Hooks - DEV Community 👩‍💻👨‍💻
10 React Hooks you Should Have in Your Toolbox – Bits and Pieces

Alternatives API design:
Why Do React Hooks Rely on Call Order? — Overreacted
RFC: React Hooks by sebmarkbage · Pull Request #68 · reactjs/rfcs

How to Build a Todo List with React Hooks

Internals

Under the hood of React’s hooks system – The Guild – Medium ❗!important
React hooks: not magic, just arrays – Rudi Yardley – Medium
React Hooks in depth - JavaScript in Plain English - Medium
Getting Closure on React Hooks

Demystifying React Hooks: useRef - DEV
Demystifying React Hooks: useContext - DEV
Demystifying React Hooks: useReducer - DEV

Fun with React Hooks - Michael Jackson and Ryan Florence - YouTube

CrappyHooks from scratch
how hooks solves life-cycle issues with async data
since all hooks are functions, it is easy to create custom reusable hooks

swyx Speaking | Getting Closure on Hooks (JSConf Edition)
Deep dive: How do React hooks really work? | Netlify
A guide to useState in React – LogRocket
Get Hooked: Hooks in React and Beyond - Circle Engineering
How does React Hooks re-renders a function Component?

`useEffect()`

React "hooking" into lifecyle methods hook as lifecycle methods

state initialization
cleanup
when dependencies change
a) cleanup the last subscription
b) re-initialize subscription

A Complete Guide to useEffect — Overreacted deep dive
Simplifying useEffect | TkDodo's blog
The last guide to the useEffect Hook you'll ever need - LogRocket Blog
4 Ways to useEffect() - DEV Community 👩‍💻👨‍💻
Mastering the useEffect API - DEV Community 👩‍💻👨‍💻
React useEffect Hook. What is the useEffect hook, how does it… | by Ceci García García | Trabe | Medium
React useEffect Hooks in Action - Better Programming - Medium

All useEffect Mistakes Every Junior React Developer Makes - YouTube

cancel network request
strict mode

// mimicking life cycle functions
const Component = props => {
  useEffect(
    // effect function
    () => {
      // componentDidMount() code

      return () => {
        // componentWillUnmount() code
      };
    },
    // only run effect after these values are changed
    // omitting mean run every render, empty array means run once
    []
  );

  render (</>);
}

// conditional update upon props change
useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, [props.source]);

For DOM related effects use useLayoutEffect()

`useReducer()`

Hooks, State, Closures, and useReducer | Adam Reacts
simplify useEffect() with reducer
React hooks useState and useReducer are equivalent in theoretical expressiveness
React useReducer hook. What is the useReducer hook, how does… | by Ceci García García | Trabe | Medium

// note 2nd param is array
function scanReducer(state, [type, payload]) {
  switch (type) {
    case "initial":
      return { ...state, pending: payload.pending };
    case "pendingBookAdded":
      return { ...state, pending: state.pending + 1 };
    case "bookAdded":
      return {
        ...state,
        pending: state.pending - 1,
        booksSaved: [payload, ...state.booksSaved],
      };
    case "bookLookupFailed":
      return {
        ...state,
        pending: state.pending - 1,
        booksSaved: [
          {
            _id: "" + new Date(),
            title: `Failed lookup for ${payload.isbn}`,
            success: false,
          },
          ...state.booksSaved,
        ],
      };
  }
  return state;
}
const initialState = { pending: 0, booksSaved: [] };

const BookEntryList = (props) => {
  const [state, dispatch] = useReducer(scanReducer, initialState);

  useEffect(() => {
    const ws = new WebSocket(webSocketAddress("/bookEntryWS"));

    ws.onmessage = ({ data }) => {
      let packet = JSON.parse(data);
      dispatch([packet._messageType, packet]);
    };
    return () => {
      try {
        ws.close();
      } catch (e) {}
    };
  }, []);

  //...
};

Hook Applications

wojtekmaj/react-hooks: A collection of React Hooks.
antonioru/beautiful-react-hooks: 🔥 A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥
usehooks-ts - React hooks library, written in Typescript
useHooks - Easy to understand React Hook recipes
imbhargav5/rooks: Essential React custom hooks ⚓ to super charge your components!
@mantine/hooks
@mantine/hooks - npm
streamich/react-use: React Hooks — 👍
pmndrs/its-fine: 🐶🔥 A collection of escape hatches for React.

craig1123/react-recipes: 👩‍🍳 A list of React Hooks utility library containing popular customized hooks 😴inactive
kripod/react-hooks: Essential set of React Hooks for convenient Web API consumption and state management. 😴inactive
rehooks/awesome-react-hooks: Awesome React Hooks 😴inactive
beizhedenglong/react-hooks-lib: A set of reusable React Hooks. 😴inactive
Hooks.guide 😴inactive

React Hooks: Recipes - codeburst ❗!important
11 Useful Custom React Hooks for Your Next Web App - Bits and Pieces
5 top React Hooks libraries compared - LogRocket Blog
How to execute a function only after the user stops typing? - DEV useEffect() for debouncing
15 Custom Hooks to Make your React Component Lightweight - DEV Community

Building Your Own Hooks – React
React: Writing a custom API hook - DEV Community 👩‍💻👨‍💻
Writing Your Own React Hooks, the Return Value - DEV Community 👩‍💻👨‍💻
Build your own React hook - DEV Community 👩‍💻👨‍💻

Essential React Hooks Design Patterns - ITNEXT
useLink, useThrottle, DelayedInput
youtube/videos/react-demos/src/demo at master · hswolff/youtube

How to Build a Simple Pokémon Web App with React Hooks and the Context API

Using React Hooks to create sticky headers - LogRocket Blog
A Practical Guide to Creating Reusable React Components - SitePoint
The power of custom hooks in React (responsive design example) - DEV Community

React Hooks: Inverting Container/Presenter - ITNEXT
helloitsjoe/react-hooks-compose: Decouple Hooks from the presentational components that use them inject hook to presentational components

React Custom Hooks — useAutoScroll - Level Up Coding
MarkGeeRomano/useAutoScroll
How to autofocus using React Hooks - LogRocket Blog

Page Scroll to Top – How to Scroll to a Particular Section with React
Creating a reading progress bar with React - LogRocket Blog

Implementing private routes with React Router and Hooks useAuthDataContext() with provider

Delayed rendering of React Components - Trabe - Medium

How I Developed React Hooks for Web Workers - ITNEXT

useBreakpoint Hook — Get Media Query Breakpoints in React
How To Use Media Queries Programmatically in React - Better Programming - Medium

Using React Hooks to sync your component state and the URL Query string

Infinite Scroll
metafizzy/infinite-scroll: 📜 Automatically add next page

Build an Infinite Scroll Component in React using React Hooks - Upmostly
How To Create a Custom useInfiniteScroll() With React Hooks

Using requestAnimationFrame with React Hooks | CSS-Tricks

react-use-date | bmalehorn
Making setInterval Declarative with React Hooks — Overreacted

Hook Forms (from scratch)

Using Custom React Hooks to Simplify Forms - Upmostly
React Custom Hook: useSubmit - JavaScript in Plain English - Medium
How to Build a Dynamic, Controlled Form with React Hooks (2019)
Using React Hooks To Create Awesome Forms - Rajat S - Medium
How React Hooks Change The Way We Build Forms - YouTube
How to Build a Dynamic, Controlled Form with React Hooks (2019) | by Mike Cronin | ITNEXT
How to Build Dynamic Forms in React

Data Fetching

basically a useEffect() wrapping and async task with loading state, Suspense will support this use case in future release

How to fetch data with React Hooks? - RWieruch useDataApi(), useEffect() and states managed by useReducer()
Easier Asynchronous State Modelling in React Redux or Hooks
Handling API request race conditions in React how to handle stale API calls

dai-shi/react-hooks-fetch: Minimal data fetching library with React Suspense
dai-shi/react-hooks-async: An abortable async function library with React Hooks production lib, like RWieruch's example, cancelable with axios, build async pipeline like async
ilyalesik/react-fetch-hook: React hook for conveniently use Fetch API

slorber/react-async-hook: React hook to handle any async operation in React components

Introduction - React Async
How to handle async side effects in 2019 - LogRocket Blog react-async

How to create React custom hooks for data fetching with useEffect
How To Fetch Data From An API With React Hooks – codeburst
Fetch API data using useEffect React hook - Code Fountain - Medium
React Hooks Tutorial on Developing a Custom Hook for Data Fetching
useFetch: React custom hook for Fetch API with Suspense and Concurrent Mode in Mind

React Query

React Query - Hooks for fetching, caching and updating asynchronous data in React
Important Defaults | React Query | TanStack
tannerlinsley/react-query: ⚛️ Hooks for fetching, caching and updating asynchronous data in React

React Query and Management of Server State - Rootstrap
How and Why You Should Use React Query | by Nathan Sebhastian | Jul, 2020 | Bits and Pieces
Practical React Query | TkDodo's blog series, ❗!important
Mastering data fetching with React Query and Next.js
Using Suspense with react-query - LogRocket Blog
React Query and Axios example with Rest API - BezKoder
React Query - The Only Guide You Need

Web Dev Simplified
React Query Makes Writing React Code 200% Better - YouTube
Learn React Query In 50 Minutes - YouTube

Comparison | React Query vs SWR vs Apollo vs RTK Query vs React Router | React Query | TanStack
React Query has these advantages:

dev tool
batching
garbage collection
declarative useQuery(), imperative useMutation()

Purchase the React Query Course
We noticed you're in Vietnam. Get 70% off the Official React Query Course with code a5zPu.

SWR

SWR – SWR ❗!important, stale-while-revalidate
RFC 5861 - HTTP Cache-Control Extensions for Stale Content
vercel/swr: React Hooks library for remote data fetching

Reparenting

Home | React-reparenting
Reparenting is now possible with React | The Startup

Reparenting nodes, good for moving components without re-initializing

Resources

ReactJS - Building Web Apps w/JavaScript
Home - React Kung Fu
Blogged Answers: Resources for Learning React · Mark's Dev Blog

enaqx/awesome-react
Some of the best resources to learn ReactJS DebugMe Blog
luismartinezs/react-katas: Each folder contains a "kata" to practice a specific technique of intermediate to advanced React
arkency/reactjs_koans: Learn basics of React.js making the tests pass

ReactRally - YouTube

The React Handbook download
SurviveJS - React
How to Learn React – Best Free Online Resources for Beginners | Blog Brainhub.eu
The React Way by Andrew Clark - YouTube

Building a React-based Chat Client with Redux – ITNEXT
Concepts to become an advanced React developer – wineofbits – Medium

React.js Conf 2015 - Making your app fast with high-performance components - YouTube
React.js Conf 2016 - YouTube
React Conf 2017 - YouTube

Lin Clark: A cartoon guide to performance in React - JSConf Iceland 2016 - YouTube
James Long - Debugging Your Debugger - YouTube

Tools

5 Tools For Faster Development In React – Bits and Pieces
11 Top React Developer Tools for 2020 - Bits and Pieces

Complementary Tools · facebook/react Wiki
A Guide to React.js Tools and Libraries | Toptal
style-guides/react.md at master · Khan/style-guides
Development workflow with rackt-cli - revolunet blog

React Devtools: A Brief Introduction | DigitalOcean 2018-05
Introducing the New React DevTools – React Blog 2019-08 v4
React DevTools tutorial
redux-devtools/extension at main · reduxjs/redux-devtools

Realize for React visualize React state flow and component hierarchy

React Sight visualize component hierarchy

Documentation

React Styleguidist: Isolated React component development environment with a living style guide | React Styleguidist uses react-docgen
styleguidist/react-styleguidist: Isolated React component development environment with a living style guide

Docz uses GatsbyJS

Code Hike

reactjs/react-docgen: A CLI and toolbox to extract information from React component files for documentation generation purposes.
morlay/react-docgen-ui
Automating React Documentation using React-Docgen ⚛⚙️📚 | by Ryosuke | Medium

Write a documentation React and ES6 project by ESDoc
ESDoc requires class syntax.

Babel Classes · Issue #1 · ctumolosus/jsdoc-babel

Tips and Tricks

React.js cheatsheet
Introduction · React Bits

Patterns.dev - Modern Web App Design Patterns
14 Beneficial Tips to Write Cleaner Code in React Apps - DEV Community 👩‍💻👨‍💻
5 common practices that you can stop doing in React
5 Awesome React.js Libraries You Should Know About - Better Programming - Medium
6 Tips and Best Practices for a Scalable React Project | by Nathan Sebhastian | Bits and Pieces

React.js and Dynamic Children - Why the Keys are Important - Arkency Blog properly define keys for React to diff the virtual DOM
Most Senior React Devs Don’t Know How To Fix This - YouTube without key React don't know the component changed

5 Key React Lessons the Tutorials Don't Teach You

React.js loses input focus on typing - React Kung Fu
focus-trap/focus-trap-react: A React component that traps focus

reactpatterns.com
krasimir/react-in-patterns: List of design patterns/techniques used while developing with React
cjcenizal/react-design-workshop: A workshop on the process of designing React components and applications.

React JSX: How to Do It the Right Way, Part I - DZone Web Dev
React JSX: How to Do It the Right Way, Part II - DZone Web Dev
React Guide to Props - Part I - DZone Web Dev
React Guide to Props - Part II - DZone Web Dev
React Guide to Props - Part III - DZone Web Dev
State Management in React Apps - Part I - DZone Web Dev

React best practices and patterns to reduce code - DEV Community
React best practices and patterns to reduce code - Part 2 - DEV Community
React best practices and patterns to reduce code - Part 3 - DEV Community

How To Write Better Code in React – Bits and Pieces

React.js Best Practices for 2016 | @RisingStack
3 Performance Tips to Speed Up Your React Applications

Using Derived State in React ← Alligator.io
You Probably Don't Need Derived State – React Blog

Implementing Infinite Scroll Into a React Component ← Alligator.io
How to implement shouldComponentUpdate with this.context? · Issue #2517 · facebook/react

Conditional Rendering

Conditional Rendering – React
8 React conditional rendering methods – LogRocket
Conditional Rendering in React and JSX, the solution

const Conditional = (props) => {
  return !!props.if && props.children;
};

#perfmatters

PureComponent – React
Optimizing Performance – React
Performance Engineering with React
A Deep Dive into React Perf Debugging
React optimization tips – ITNEXT
React Rally: Animated -- React Performance Toolbox // Speaker Deck
React is Slow, React is Fast: Optimizing React Apps in Practice
React Training: React, Inline Functions, and Performance
React Performance Fixes on Airbnb Listing Pages – Airbnb Engineering & Data Science – Medium
10 Ways to Optimize Your React App’s Performance | by Chidume Nnamdi 🔥💻🎵🎮 | Bits and Pieces
6 tips for better React performance – ITNEXT
What to do when your React app feels slow – ITNEXT
Render Performance Optimization With React - Adaptive Financial Consulting
5 Packages to Optimize and Speed Up Your React App During Development - DEV Community

Introducing the React Profiler – React Blog
Deep dive with the React DevTools profiler - YouTube

Improve React Performance - Vena Engineering - Medium
Performance Optimization Techniques In React - Level Up Coding

Cache your React event listeners to improve performance.
setState(), shouldComponentUpdate(), And render() Timing In ReactJS
shouldComponentUpdate() Will Short-Circuit An Entire Subtree Of Components In ReactJS

Why re-render

welldone-software/why-did-you-render: why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.)
Why Did You Render Mr. Big Pure React Component? | by Vitali Zaidman | Welldone Software | Medium
Why Did You Render Mr. Big Pure React Component Part 2- Common Fixing Scenarios | by Vitali Zaidman | Welldone Software | Medium
Track Redundant React Hooks Re-Renders With “Why Did You Render” Version 3 | by Vitali Zaidman | Welldone Software | Medium
next.js/examples/with-why-did-you-render at main · vercel/next.js

Hook perf

Improve React App Performance Through Memoization – Bits and Pieces
React Hooks: Optimizing for performance - ITNEXT

How React Forget will make React useMemo and useCallback hooks absolutely redundant - DEV Community
What is React Forget?

Fix the slow render before you fix the re-render
DejaVu: Caching versus Memoization - DEV Community 👩‍💻👨‍💻 PUSH mode of hook cause double rendering
Demystifying React Hooks: useCallback and useMemo - DEV
Before You memo() — Overreacted
The Uphill Battle of Memoization | TkDodo's blog
You Probably Shouldn't Use React.memo() - YouTube

useMemo() and useCallback() create stable variable that can be used in improving re-render speed
useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

React hooks: useCallback and useEffect dependencies - YouTube
use-updating-callbacks - npm use the latest closure

React.Memo vs Memoize - Better Programming - Medium
React Hooks: Memoization - Sandro Dolidze - Medium
When to useMemo and useCallback
useMemo() Hooks API Reference – React
useCallback() Hooks API Reference – React
React.memo() React Top-Level API – React

import React, { useState, useCallback } from "react";

function formatCounter(counterVal) {
  return `The counter value is ${counterVal}`;
}
function App() {
  const [counter, setCounter] = useState(0);
  const onClick = useCallback(() => {
    setCounter((prevState) => ++prevState);
  }, []);
  return (
    <div className="App">
      <div>{formatCounter(counter)}</div>
      <button onClick={onClick}>Increment</button>
    </div>
  );
}

import React, { useMemo } from "react";
function App({ text }) {
  const [state, setState] = useState(true);
  const someRandomObject = useMemo(
    () => ({
      a: state ? 3 : 4,
      b: !!state,
    }),
    [state],
  );
  return (
    <div className="App">
      <div>{text}</div>
      <button onClick={() => setState(!state)}>Change</button>
    </div>
  );
}

Replacing VDOM

Million.js
aidenybai/million: The Virtual DOM Replacement for React

High-school student makes React a million times faster - YouTube

Non-UI Components

pmndrs/use-gesture: 👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript. multi-frameworks

nfl/react-helmet: A document head manager for React allows for SSR
It's All In the Head: Managing the Document Head of a React Powered Site With React Helmet | CSS-Tricks

Using "window" the React Way with react-fns ← Alligator.io
gaearon/react-document-title: Declarative, nested, stateful, isomorphic document.title for React
gaearon/react-side-effect: Create components whose nested prop changes map to a global side effect
ericclemmons/react-resolver: Async rendering & data-fetching for universal React applications.
dleitee/react-fetches: React Fetches a new way to make requests into your REST API's.

Animation

Best Animation Libraries For React🎉 - DEV Community
15个有用的React动画库，马上让你的项目变得高大上-轻识
 React-Stonecutter masonry layout
dantrain/react-stonecutter: Animated grid layout component for React

React Awesome Reveal
morellodev/react-awesome-reveal: React components to add reveal animations using the Intersection Observer API and CSS Animations.

Framer Motion

Production-Ready Animation Library for React | Framer Motion
Responsive Framer Motion with Tailwind CSS - YouTube
How to Use Framer Motion to Add Animations and Page Transitions to a Next.js React App - YouTube

React Spring

react-spring hook for animation
pmndrs/react-spring: ✌️ A spring physics based React animation library
stipsan/react-spring-bottom-sheet: Accessible ♿️, Delightful ✨, & Fast 🚀
Hooks in react-spring, a tutorial – Paul Henschel – Medium
React hover animation effect with React Spring

Drag and Drop

Draggin' and Droppin' in React | CSS-Tricks
Mastering Drag & Drop with ReactJS - Datorama Engineering
Build a Drag and Drop layout builder with React and ImmutableJS TypeScript, raw HTML events
How To Use The HTML Drag-And-Drop API In React — Smashing Magazine

dnd kit – a modern drag and drop toolkit for React
clauderic/dnd-kit: The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

react-dropzone
react-dropzone/react-dropzone: Simple HTML5 drag-drop zone with React.js.

atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React 😴inactive
react-beautiful-dnd ⋅ Storybook
Beautiful and Accessible Drag and Drop with react-beautiful-dnd from @alexandereardon on @eggheadio

react-dnd/react-dnd: Drag and Drop for React
React DnD
React DnD Intro for the Redux developer – Medium
Scrabblr — A React game with react-dnd and react-flip-move

Typing

catalinmiron/react-typical: React typing animation in ~400 bytes 🐡 of JavaScript.
jstejada/react-typist: Typing animations with React
BraisC/react-text-typist: React component that simulates human typing on a keyboard.
haowen737/react-typewriter-hook: ⌨️Use react hooks for typing effect easily
typekev/react-mk: A tiny react component which mimics typing

Typed.js - Type your heart out

How to stop your spinner from jumping in React - DEV Community 👩‍💻👨‍💻

React Native

Animations · React Native
Animated · React Native

React Native Reanimated
software-mansion/react-native-reanimated: React Native's Animated library reimplemented

UI frameworks

👎component based frameworks (difficult to customize)
writing custom components and styling with atomic CSS is easy enough nowadays
or use #Headless UI

Design Systems for React Developers | @RisingStack
The Most Popular React UI Component Libraries in 2022 - SitePoint
11 React UI Component Libraries you Should Know in 2019
9 Web Components UI Libraries You Should Know in 2019
Top 7 UI libraries and kits for React - LogRocket Blog
React UI Kits - DEV Community 👩‍💻👨‍💻
React UI Roundup
Best React Admin Dashboard Libraries 2023 | refine

MUI: The React component library you always wanted
Elegant UX in React with Material-UI ← Alligator.io
Develop for the Web - Material Design
Materialize
react-md
kufu/smarthr-ui: React components for creating SmartHR applications. accessibility a11y

Framework7 - Full Featured Framework For Building iOS, Android & Desktop Apps

Tremor – The React library to build dashboards fast
Build a React dashboard with Tremor - LogRocket Blog

React Bootstrap 👎
React Bootstrap with Material Design - Powerful and free UI KIT - Material Design for Bootstrap
reactstrap - React Bootstrap 4 components

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications. - Chakra UI
Saas UI - The React component library for Startups built in Chakra UI

Ant Design - The world's second most popular React UI framework
Ant Design of React - Ant Design

PrimeReact

Sanity UI: A composable, accessible, beautiful React component library

Cloudscape – Cloudscape Design System

Rebass UI components for React

Base Web - Base Web React UI framework
Building a responsive dashboard with Base Web and React - LogRocket Blog

React Suite | React components
Building sensible UI components with React Suite

Blueprint – A React-based UI toolkit for the web

PatternFly 4

Grommet v2 👎Styled components for Reactjs
Belle - Configurable React Components with great UX

Anypoint Components
Atlaskit by Atlassian mostly APL
Shopify Polaris
Base Web - Base Web React Components by Uber

Material Design Color, Flat Colors, Icons, Color Palette | Material UI

Fluent UI - Controls - React
microsoft/fluentui: Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

React Materialize
react-materialize/react-materialize: Material design for react, powered by materializecss

React Desktop | React UI Components for OS X El Capitan and Windows 10

Semantic UI React
Getting Started | Semantic UI

React Flow uses JSON nodes
Using React Flow to plan a React project - LogRocket Blog

Headless UI

You Don’t Need A UI Framework — Smashing Magazine
Unstyled Component Libraries Are A Game Changer - YouTube

Reach UI component-based
reach/reach-ui: The Accessible Foundation for React Apps and Design Systems

React Aria by Adobe, hook-based, component in alpha
adobe/react-spectrum: A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

DCXLibrary / introduction - Page ⋅ Storybook
Introducing the DCX React Library

Primitives – Radix UI more active than Headless UI, component-based
radix-ui/primitives: Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.

Headless UI - Unstyled, fully accessible UI components from Tailwind Labs, a11y, component-based
tailwindlabs/headlessui: Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
@headlessui/react Menu Example - CodeSandbox

Base Web - Base Web React UI framework component/hook-based
uber/baseweb: A React Component library implementing the Base design language

Downshift, select, hook-based
paypal/downshift: 🏎 Primitive to build simple, flexible, WAI-ARIA compliant enhanced input React components
Downshift - Storybook
kentcdodds/downshift-examples: Created with CodeSandbox
react-widgets DropdownList
5 Most Common Dropdown Use Cases Solved with React Downshift ― Scotch

TanStack | High Quality Open-Source Software for Web Developers
TanStack/ranger: ⚛️ Hooks for building range and multi-range sliders in React
TanStack Virtual | React Virtual, Solid Virtual, Svelte Virtual, Vue Virtual

Primitives – Radix UI

Getting Started | restart/ui

React Aria

Reakit

Reakit – Toolkit for building accessible UIs a11y

UI widgets

9 React Styled-Components UI Libraries for 2019 - Bits and Pieces
10 Useful React Components for 2020 - Bits and Pieces
jquense/react-widgets: An à la carte set of polished, extensible, and accessible inputs built for React

JedWatson-react-hammerjs · GitHub

Lapple-react-transitive-number · GitHub
React Color
react-component/slider
React-Waypoint Scrollspy
Flipboard/react-canvas: High performance
RxMarbles: Interactive diagrams of Rx Observables
naisutech/react-tree: Hierarchical tree component for React in Typescript
shoumma/organigram: A JSON based tree structure with drag and drop functionally to re-arrange the tree.
amarofashion/react-credit-cards: Beautiful credit cards for your payment forms

balloob/react-sidebar: A sidebar component for React
react-sticky-box documentation

brimdata/react-arborist: The complete tree view component for React

SortableJS/react-sortablejs: React bindings for SortableJS

Virtual Window:
TanStack Virtual | React Virtual, Solid Virtual, Svelte Virtual, Vue Virtual
react-window reimplementation of react-virtualized, not all the features
React Virtual Window - virtualise anything for a performance boost! - DEV Community
react-virtualized
Performant Lists in React with react-window ← Alligator.io
AddyOsmani.com - Rendering large lists with react-window
Windowing wars: React-virtualized vs. react-window - LogRocket Blog
Creating More Efficient React Views with Windowing - ForwardJS San Francisco - YouTube slides
clauderic/react-tiny-virtual-list: A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!
react-eternal-list
How I Rendered a Massive List in React Without Memory and CPU Issues

Spinners:
React Spinners
How I Created My Own React Spinners Library - DEV Community 👩‍💻👨‍💻
react-spinners-css by joshk · Bit
react-spinners-kit
react-loader-spinner - npm
wdtLoading - Application Loading Screen
fakiolinho/react-loading: React component for loading animations
How to Create a CSS-Only Loader Using One Element
Loaders | UI Ball

modal:
reactjs/react-modal: Accessible modal dialog component for React
Dialog (Modal) — Reach UI
SweetAlert multi-frameworks
sweetalert2/sweetalert2-react-content: Official SweetAlert2 enhancer adding support for React elements as content
Modal | restart/ui

tooltip:
Floating UI - Create tooltips, popovers, dropdowns, and more
Welcome | React Tooltip
ReactTooltip/react-tooltip: React Tooltip Component
https://react-bootstrap.github.io/react-overlays/
tvkhoa/react-tippy: A lightweight tooltip for React. Based on tippy.js and powered by Popper.js 😴inactive

image loader:
glslio/diaporama-react gre/diaporama Diaporama: Examples image/video/content slideshow engine
jide/react-imageblurloader
Aljullu/react-lazy-load-image-component: React Component to lazy load images and components using a HOC to track window scroll position.

editor:
Slate
Let’s build a customizable rich text editor with Slate and React
Quill - Your powerful rich text editor
Getting Started with Rich Text Editors in React | by Noah Blumenstein | Feb, 2022 | Bits and Pieces
Draft.js · Rich Text Editor Framework for React
sstur/react-rte: Pure React rich text WYSIWYG editor based on draft-js.
Editor.js
React Markings - @thejameskyle Markdown <> Component
react-markdown - npm
needim/minibed: It's a mini editable, customizable playground for web
22 Miraculous Tools for React Developers in 2019 | by jsmanifest | Better Programming
react-easy-edit inline edit
giorgosart/react-easy-edit: Inline editing library for React

see wordpress.md#wordpress-gutenberg`

Context Menu:
React ContextMenu
https://react-bootstrap.github.io/react-overlays/api/Dropdown

Date picker:
13 React DatePickers and TimePickers for 2020 | by Jonathan Saring | Bits and Pieces
React Datepicker crafted by HackerOne
Hacker0x01/react-datepicker
YouCanBookMe/react-datetime
quri/react-bootstrap-datetimepicker
react-widgets DateTimePicker
jquense/react-big-calendar: gcal/outlook like calendar component

Calendar:
wojtekmaj/react-calendar: Ultimate calendar for your React app.
react-big-calendar | gcal/outlook like calendar component

Layout:
wmira/react-panel (portal panels)
react-burger-menu
react-animated-burgers - npm
ReactFitText Test Page
React Spaces - allaneagle.com
React-Grid-Layout - Showcase

Accordion:
daviferreira/react-sanfona
React Tabbordion Component Demo

Tabs:
React-Tabs
reactjs/react-tabs: An accessible and easy tab component for ReactJS.

Table/Date Grid:
TanStack Table | React Table, Solid Table, Svelte Table, Vue Table React Table -> Tanstack Tables (multi-frameworks)
5 Years of Building React Table – Tanner Linsley, React Summit 2022 - YouTube Theo's reposnse
React Data Grid · Excel-like data grid component built with React
Griddle - React Grid Component
STRML-react-grid-layout · GitHub
vaheqelyan/react-keyview: React components to display the list, table, and grid, without scrolling, use the keyboard keys to navigate through the data
ag-Grid: Datagrid packed with features that your users need with the performance you expect.
The top React table libraries to use in 2021 - LogRocket Blog

Image Slider

react-responsive-carousel.js.org decent customization, easy to use, can create presentation
leandrowd/react-responsive-carousel: React.js Responsive Carousel (with Swipe)
Build an elegant gallery with React-Responsive-Carousel

nuka-carousel

femioladeji/react-slideshow: A react component for image slideshow supporting slide, fade and zoom

React Pretty Carousel normal/gallery mode, imperitve functions
Jaagrav/react-pretty-carousel: Easily add beautiful carousels to your website in no time!
Create beautiful carousels or Image Sliders on React with this framework - DEV Community

React-carousel powerful transition and customization
brainhubeu/react-carousel: A pure extendable React carousel, powered by Brainhub (craftsmen who ❤️ JS)

Swiper - The Most Modern Mobile Touch Slider
nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions

React Slider Carousel Component - react-awesome-slider powerful transition and customization
rcaferati/react-awesome-slider: React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders. 🖥️ 📱

Swiper React Components
How to build a carousel image slider with Swiper.JS. - YouTube

React Slick Documentation
slick - the last carousel you'll ever need

Tiny Slider 2 | tiny-slider
jechav/tiny-slider-react: wrapper of tiny-slider plugin for react.
test tiny-slider-react - CodeSandbox

Notification

React-toastify | React-Toastify
fkhadra/react-toastify: React notification made easy 🚀 !

Super easy: Custom Toast message manager with React (and TypeScript) | by Dayan Petrow | Medium

Forms

I would like a library that have field error and form error

Learn React.js: Ridiculously Simple Forms
white-river-tl7fs - CodeSandbox without any library

jamesknelson/govern: Component-based state management for JavaScript.
Sensible React Forms, with Govern - James K Nelson
Component-based state management for React - James K Nelson

NewOldMax/react-material-ui-form-validator: Simple validator for forms designed with material-ui components.

Formatting form inputs with Cleave.js and React - LogRocket Blog

Select/Multiselect

The Best React Autocomplete Libraries

React Select
JedWatson/react-select: The Select Component for React.js
Searchable, Async Dropdowns in React Using React-Select ← Alligator.io
CanopyTax/cpr-select
CanopyTax/cpr-multiselect
react-widgets Multiselect

moroshko/react-autosuggest: WAI-ARIA compliant React autosuggest component

ghoshnirmalya/react-search-box: An autocomplete search box built with and for React

Create a Rich Text Box with Autocomplete | Autocomplete | Algolia
So, You Want to Build an @mention Autocomplete Feature? - CSS-Tricks
What Is Autocomplete? | Autocomplete | Algolia

React .focus() - The Startup - Medium

React Hook Form

Home | React Hook Form - Simple React forms validation
Form Builder | React Hook Form - Simple React forms validation
react-hook-form/examples at master · react-hook-form/react-hook-form

What’s new in React Hook Form V7 - LogRocket Blog useForm<FormValues>()
Migrate From V6 to V7 | React Hook Form - Simple React forms validation

Pain-Free Forms with React Hook Form - Nordschool
React Hook Form — An Elegant Solution to Forms in React | by Mahesh Haldar | Bits and Pieces
Build the Next Generation of Forms With React Hooks Forms
Chakra UI and React-Hook-Form –How to Build Beautiful Forms

Create Dynamic Forms in React Using React Hook Forms
SyncfusionExamples/dynamic-forms-in-react-using-react-hook-forms

Controller | React Hook Form - Simple React forms validation Wrapper component for controlled inputs
React Hook Form Field Array Advanced with delete, insert, append, edit - CodeSandbox
Correct way to support multiple checkboxes with same name · Issue #476 · react-hook-form/react-hook-form

React Hook Form vs. Formik: A technical and performance comparison - LogRocket Blog
React Hook Form VS Formik. A comprehensive comparison of the two… | by Nathan Sebhastian | Bits and Pieces

Tanstack Form

TanStack Form | React Form, Solid Form, Svelte Form, Vue Form
TanStack/form: 🤖 Powerful and type-safe form state management for the web. TS/JS, React Form, Solid Form, Svelte Form and Vue Form.

Formik

does have Hook API, but design is still pre-hook

Getting Started | Formik
formium/formik: Build forms in React, without the tears 😭
Tear-Free Forms with React and Formik ← Alligator.io with Yup (Joi-like) schema
An imperative guide to forms in React – LogRocket
The Joy of Forms with React and Formik | Keyhole Software using <Field>
No more tears, handling Forms in React using Formik, part I
Simple React form validation with Formik, Yup and/or Spected
Forms with Formik + TypeScript - fotonTech - Medium
Formik Example - CodeSandbox

😴inactive

Final Form
final-form/final-form: 🏁 Framework agnostic, high performance, subscription-based form state management

formsy/formsy-react: A form input builder and validator for React JS
twisty/formsy-react-components: Bootstrap components for a formsy-react form.

React Final Form
final-form/react-final-form: 🏁 High performance subscription-based form state management for React

Hooked-Form · You will get hooked.
JoviDeCroock/Hooked-Form: Performant 2KB React library to manage your forms

React Formal yup validation, common message for multiple fields (form error)

arqex/react-json JSON editor

Redux Form - Redux Form
erikras/redux-form

Components Repo

11 React UI Component Libraries you Should Know in 2019
11 React UI Component Playgrounds for 2019 - Bits and Pieces
19 Open Source React Component Libraries to use in your next project - David Wells

React Components
React.parts – A catalog of React components
JS.coach
react-component · GitHub
Latest ReactJS Examples
www.reactjsx.com Search reusable React components
brillout/awesome-react-components: Catalog of React Components & Libraries
23 Best React UI Component Libraries And Frameworks
13 Top React Component Libraries for 2020 - Bits and Pieces

Mantine
Using Mantine with React and Next

Share reusable code components as a team · Bit
15 Reasons to Build Your Component Library in Bit.dev
React Component Patterns – gitconnected | Become a Better Developer
How to Achieve Reusability with React Components – WalmartLabs – Medium
How to Write Cleaner React Code
Build a component library with React and TypeScript - LogRocket Blog
Approaches to testing React components - an overview - React Kung Fu
bit.dev
3 Ways to Build Your Own React Component Library - Bits and Pieces
Building a React Component Library — The Right Way | by Eden Ella | Bits and Pieces
How To Share React UI Components Between Projects And Apps
How Do We Really Use Reusable Components? – Bits and Pieces
Building reusable UI components with React Hooks - LogRocket Blog
Creating shareable React widgets - LogRocket Blog

React Cosmos Sandbox for developing and testing UI components in isolation
react-cosmos/react-cosmos: Sandbox for developing and testing UI components in isolation

How I share React components between projects - JavaScript in Plain English - Medium
teambit/bit: Easily share code between projects with your team.
Maximizing Code Reuse in React - Bits and Pieces

Building Reusable React UI Components with styled-components

Components Tutorial

FREE Advanced React.js Patterns | React Training
Best Practices on building a UI component library for your company (David Wells) - FSF 2016 - YouTube Webpack pipeline, PostCSS
Kent C Dodds - Simply React - YouTube
7 tips to publish your React components - arqex

Commonly Used UI Components In React - DEV Community 👩‍💻👨‍💻
How to Build Faster with Reusable UI Components in React
8 Tips for Building Awesome Reusable React Components | by Eden Ella | Bits and Pieces
Quick Front-End Integrations Through Bit Components | by Jonathan Saring | Bits and Pieces

Building React-Select | Jed Watson - YouTube
How to Scale a React Component - Jed Watson at React Conf 2019

Building Timers in React: Stopwatch and Countdown - Peter Durham - Medium

Rinse React
cwlsn/rinse-react: 🚿 Rinse, React, repeat. A boilerplate to build a React component library.
How to Write Your Own Reusable React Component Library

How to Create a Modal in React - DEV Community

Building a Tabs Component with React ← Alligator.io
Global Snackbars in React with Redux, and Material UI
Pure React Modal with Transition Events & Styled Components

Building an Accordion Component with React ← Alligator.io
Build a React Accordion Component from Scratch Using React Hooks
https://react-bootstrap.github.io/components/accordion/
Accordion - Semantic UI React

Fullstack React 🐬: How to Write a Google Maps React Component

Using ReactJS and KendoUI Together

React - how to make left-side animated menu - DEV Community
Hamburger Menu with a Side of React Hooks and Styled Components | CSS-Tricks
React Styled Components — Hooks, Refs, and Security

Simple Image Upload with React - codeburst

How create ⚛️ React Swiper Slider - easy tutorial 👨‍🏫 - DEV Community

How to create email chips in pure React - freeCodeCamp.org - Medium

Implement Tree view component with ReactJS and Styled-Components

How To Build a Color Picker with React - Level Up Coding

React Charts - Simple, immersive & interactive charts for React
TanStack/react-charts: ⚛️ Simple, immersive & interactive charts for React

Render Abstract Syntax Trees with React - DEV Community 👩‍💻👨‍💻
codejamninja/react-ast: render abstract syntax trees with react

Animating with React, Redux, and d3 - A geek with a hat
How to Make a Piechart using React and d3 - A geek with a hat
Tiny React & D3 flamegraph tutorial - A geek with a hat
Zero-cost Way on React & D3. - DEV Community

Building Components

create-react-app/package.json at master · facebook/create-react-app top level linting
Building a Multi-CRA using Lerna and Monorepo - The Startup - Medium Storybook usage, quite complicated setup
Making of a component library for React - By Rollup + Babel
How to create a React component and publish it on NPM Webpack + Babel
Bootstrapping a React library with Parcel Bundler - DEV Community 👩‍💻👨‍💻 Parcel + Babel
CREATE LIBRARY OF REACT COMPONENT - DEV Community 👩‍💻👨‍💻 CRA + Babel
Building a React component as an NPM module - recraftrelic - Medium Babel + CRA test app
5 Ways to Document React Components in 2020 - Bits and Pieces

helloitsjoe/react-hooks-compose: Decouple Hooks from the presentational components that use them Webpack (webpack-simple)
webpack-simple/template at master · vuejs-templates/webpack-simple

Polymorphic Components

Intermediate TypeScript and React Handbook – How to Build Strongly Typed Polymorphic Components
Build strongly typed polymorphic components with React and TypeScript - LogRocket Blog source

Styleguidist

React Styleguidist: isolated React component development environment with a living style guide

Setup a React Component Library using Create React App, React Styleguidist and TypeScript | Codementor

Storybook

Storybook - UI dev environment you'll love to use
Addons | Storybook
Storybook Tutorials
The Storybook Story – Storybook – Medium
Storybook for React
Getting Started with Storybook in React
Creating a React component library using Storybook 6 2021-09
How to Start a React Component Library With Storybook and Create-React-App – CloudSavvy IT 2022-03
A Dive into React Storybook
NextJS, SvelteKit, Remix and the future of Storybook

storybooks/storybook: Interactive UI component dev & test: React, React Native, Vue, Angular, Ember
Component Story Format

How to Create Your Own React Component Library | by Akilesh Rao | Jan, 2022 | JavaScript in Plain English
NPM Tutorial (2021) Part 3 : Create and publish your own React component library. - YouTube

Step by step: How to setup Storybook with Next.js and Tailwind CSS - DEV Community

Component-Driven Development Using Storybook | recallact.com

Using Storybook to develop React components faster - LogRocket Blog
How to use Storybook with React - DEV Community 👩‍💻👨‍💻
Documenting React Components With Storybook - DEV Community 👩‍💻👨‍💻
Reactjs Unit Testing with Storybook + Jest - CloudBoost
How To Build a UI Component with React and Storybook | DigitalOcean

Examples

gumdrops.gumgum.com - Storybook
gumgum/gumdrops: GumGum's React Reusable Component Library

storybook.netlify.com - Storybook

storybook.storefrontui.io - Storybook

newline-sandbox/react-d3-charts: D3 chart visualizations built with React

JSX: curse or blessing

JSX | XML-like syntax extension to ECMAScript

JSX in Depth | React
JSX Looks Like An Abomination — JavaScript Scene — Medium
How I learned to stop worrying and love React
React’s JSX: The Other Side of the Coin — Medium
Hyperscript - the hidden language of React - DEV Community

Learn React By Itself -- no JSX, no Flux, no ES6, no Webpack.
How I learned to stop worrying and love the JSX - James K Nelson
Why you have to use className in React, but not in Preact? - DEV Community

developit/vhtml: Render JSX/Hyperscript to HTML strings, without VDOM 🌈
af/JSnoX

JSX must return a single element (use <div>/<Fragment> to wrap list).

/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function () {
    return <div>{"Hello " + this.props.name}</div>;
  },
});

React.renderComponent(<HelloMessage name="John" />, mountNode);

var HelloMessage = React.createClass({
  render: function () {
    return React.DOM.div({ className: "mystyle" }, "Hello " + this.props.name);
  },
});

React.renderComponent(HelloMessage({ name: "John" }), mountNode);

JSX don't have loop.

var PostComment = require('component/post-comment');

var Posts = React.createClass({
  render: function() {
    // need to create comments array here
    let comments = this.props.post.comments.map(comment =>
      <PostComment key={comment.id}>{comment.body}</PostComment>
    );
    return (
      <div>
        <h1 class="post-title">this.props.post.title</h1>
        <p>this.props.post.body</p>
        <ul class="post-comments">
          {comments}
        </ul>
      </div>;
    );
  }
});

Testing

Testing In React, Part 1: Types & Tools | by Bryn Bennett | JavaScript in Plain English React Testing Library -> Jest -> Enzyme -> Cypress
Become a JavaScript Testing Pro: 14 Resources for Developers - DEV Community 👩‍💻👨‍💻

Testing React applications in 2019 - LogRocket Blog
Revisiting React Testing in 2019 - codeburst
Test Utilities – React
React testing crash course. Test every aspect of your React app to… | by Gábor Soós | Emarsys Craftlab
Unit testing a React component using Jasmine and Webpack - React Video Tutorial #free @eggheadio

react-datetime/datetime-spec.js at master · arqex/react-datetime

jquense/teaspoon: A jQuery like API for testing React elements and rendered components.

Jest + Enzyme

Enzyme is dead as of React 18 as it depends on React internals
use React Testing Library

Enzyme is dead. Now what? - DEV Community
Replacing Enzyme with React Testing Library
Time to say goodbye - Enzyme.js | Piotr Staniów

Jest as the test runner, assertion library, and mocking library. CRA bundles Jest by default.
Enzyme is created by Airbnb, provide additional testing utilities to interact with React components. It must work with a test runner.

Jest | Painless JavaScript Unit Testing by Facebook on top of Jasmine
Jest Preview | Jest Preview

Testing your apps like a boss with React.js and Jest - DEV Community 👩‍💻👨‍💻 ❗!important
Rogelio Guzman - Jest Snapshots and Beyond - React Conf 2017 - YouTube comparing snapshots of rendered UI
Test React Components with Enzyme and Jest from @iamtylerwclark on @eggheadio
Testing React with Jest and Enzyme I - CodeClan - Medium
Example of Moving Towards Integration Testing – codeburst
Testing in React with Jest and Enzyme: An Introduction
Test Driven Development in React with Jest and Enzyme
Start Testing Your JavaScript Code with Jest - DEV Community
Unit Test React Applications With Jest and Enzyme | by Mineki Okada | Better Programming

Jest testing without the noise - DEV Community

npm test -- button.test
npm test -- -t '<testName> OR <testSuiteName>'
.only()

Introduction | Enzyme
airbnb/enzyme: JavaScript Testing utilities for React
Testing React using Enzyme - Findmypast Tech
Tested React: Build and Test a Form using React Context

React Testing Library

React Testing Library | Testing Library
Common mistakes with React Testing Library
Semantic tests with react-testing-library - LogRocket Blog
React Testing Library Common Scenarios | Rafael Quintanilha
React Testing Library – Tutorial with JavaScript Code Examples
React Testing Library Tutorial – How to Write Unit Tests for React Apps
5 Tips to Perfect React Testing Library Queries | by Michael Chang | JavaScript in Plain English
9 React Testing Library Tips and Tricks | by Paige Niedringhaus | Better Programming
An in-depth beginner's guide to testing React applications with React Testing Library
Testing components with Jest and React Testing Library
React Testing Library – Tutorial with JavaScript Code Examples
Testing a simple component with React Testing Library - DEV Community
React Component Testing - DEV Community

React Testing Course for Beginners – Code and Test 3 Apps - YouTube

React.js

Introduction

Starter Kit

Project structure

Commentaries

Why React

On the contrary

React/TypeScript

Minimal React

Internals

Error Boundaries

Renderer

Fiber/Concurrent Rendering

Components

Props passing

Controlled and Uncontrolled Component

Compound Components/Sub-Components/Namespacing

Refs

Portal

Code Splitting/Lazy Loading

App Frameworks/Distros

Refine

Remix

Ultra

React Server Component

Server Side Rendering/Hydration

Suspense

Hook

Internals

useEffect()

useReducer()

Hook Applications

Hook Forms (from scratch)

Data Fetching

React Query

SWR

Reparenting

Resources

Tools

Documentation

Tips and Tricks

Conditional Rendering

#perfmatters

Why re-render

Hook perf

Replacing VDOM

Non-UI Components

Animation

Framer Motion

React Spring

Drag and Drop

Typing

React Native

UI frameworks

Headless UI

Reakit

UI widgets

Image Slider

Notification

Forms

Select/Multiselect

React Hook Form

Tanstack Form

Formik

😴inactive

Components Repo

Components Tutorial

Building Components

Polymorphic Components

Styleguidist

Storybook

Examples

JSX: curse or blessing

Testing

Jest + Enzyme

React Testing Library

`useEffect()`

`useReducer()`