react.md

title
React

React

Official React docs are great. LocatorJS extension is useful. fresh looks interesting. Exploring using Svelte/Solid currently as they have better performance.

OSS React apps

• Frontend Clean Architecture - React + TypeScript app built using clean architecture principles.
• Linear.app clone - Uses React and Tailwind CSS.
• MacOS in React (Code)
• DDDForum.com - Hacker news-inspired forum app built with TypeScript & DDD from solidbook.io.
• Fakeflix - Unofficial Netflix clone.
• UI port of Windows 11
• Design Editor - Canva Clone Design Editor using React and Fabric.js.
• Proton Mail Web clients
• Saas UI - The frontend stack for SaaS companies, build with Chakra UI.
• Big Sir - macOS built with React and XState.
• Bookshelf - React - Express - SQLite app
• Apple Music on iOS using React and Framer Motion (Tweet)
• Artsy

Templates

• Bulletproof React - Simple, scalable, and powerful architecture for building production ready React applications.
• Reactless.ts - Preact/TypeScript/TailwindCSS/HeadlessUI/Vite.
• 100ms 2.0 Sample React App

Notes

• Immediate mode simply means you specify what to redraw on every frame, there is no caching unless you specify it. And you basically redraw whenever some state changes (in a game this is going to be at frame rate).
  • In React, when some state changes, you respecify the DOM for components whose state has changed, but asynchronously the library determines how to make the DOM update more efficient on the next frame redraw.
• Retained-mode means you modify the scene graph (aka DOM) using imperative statements, it is difficult to keep your UI in sync with your models. With immediate-mode, you simply create a function f(m) over your model m to render it on each frame rate (which also often involves imperative instructions affecting the frame buffer, but the buffer can be cleared on each frame so who cares).
  • Retained-mode caches by default (often in opaque ways), which was the whole point (only re-render parts of the scene that have changed). You can roll your own caching for immediate mode, usually via some kind of invalidation scheme (use image for a node if nothing changed for this component, otherwise call that node's re-render method). On the other side, projects like React takes the retained-mode DOM and make it look more like an immediate-mode abstraction without sacrificing so much performance.
• The core premise for React is that UIs are simply a projection of data into a different form of data.
• A React component is simply a JavaScript function that takes an object of arbitrary inputs known as props and returns React elements describing what should be rendered on the UI.
• Stateless components don't have this, just have props.
• Is Concurrent Mode just a workaround for “virtual DOM diffing” overhead? Some people got that impression. Let me clarify why we’re working on it.
• In order to write a very performant app there's only one golden rule: Make sure that your components are only re-rendered when necessary, and make sure that each render is fast
• Best use React in strict mode.
• Imagine this exists at the top level of your code: setInterval(render, 100). Don’t do anything in render that you wouldn’t do in this function. Should be clear why you wouldn’t mutate or allocate resources that need cleanup.
• Preact is so fast on the speedometer benchmark that the jit never kicks in
• Real use case for server rendering portions of an app: you have a perf sensitive page and need to render something that requires a business logic library that pulls in a huge dependency graph. Server render solves that.
• JSX has a syntax to support generics.
• Make your React app feel faster: use the onMouseDown event handler instead of onClick. Only do it for non destructive things (like tabs).
• React unfortunately doesn’t have runtime fast paths that the compiler can generate fast code for.

Links

• React as a UI Runtime (2019) (HN)
• React is Changing How We Think, Again (2019)
• React RFCs
• A practical understanding of Flux
• Advanced React Component Patterns
• Introduction to The Beginner's Guide to ReactJS
• React - Basic Theoretical Concepts
• Didact - DIY guide to build your own React.
• ReactiFlux Learning
• Tom Occhino and Jordan Walke first presenting React
• My struggle to learn react (HN)
• Stop writing code - Sunil Pai (2018) - Great talk.
• The Present Future of User Interface Development
• React from Zero - Simple (99% ES2015 less) tutorial for React.
• React is just JavaScript (2018)
• React Developer Roadmap
• Defining Component APIs in React
• Rogue.js - Nearly invisible framework for creating server-rendered React applications.
• Diagram of modern React lifecycle methods (2018)
• React Fundamentals
  • Advanced React
• Algebraic Effects, Fibers, Coroutines . . . Oh My! - Brandon Dail (2018)
• Understanding React and reimplementing it from scratch Part 1: Views
• React (without the buzzwords) course
• Conditional Rendering with React: The Complete Guide
• React Events Live Cheatsheet
• Complete guide to default props in React
• A deep dive into children in React
• Introduction to React Book
• React Today and Tomorrow and 90% Cleaner React (2018)
• Concurrent Rendering in React - Andrew Clark and Brian Vaughn (2018)
• Intro to debugging ReactJS applications
• Evergreen - React UI Framework by Segment.
• React Demystified (2014)
• Inside Fiber: in-depth overview of the new reconciliation algorithm in React (2018)
• Why Do We Write super(props)? (2018)
• How Does React Tell a Class from a Function? (2018)
• How Does setState Know What to Do? (2018)
• My Wishlist for Hot Reloading (2018)
• Navi - Batteries-included router for React.
• Re-implement react fiber (2019) - Self-study project help understand how react work.
• Michael Jackson - Never Write Another HoC (2017)
• React-axe - Accessibility auditing for React.js applications.
• Awesome React - Collection of awesome things regarding React ecosystem.
• Grommet - React-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package.
• Application that will help you learn React fundamentals (HN)
• Progressive react - Want to make your React site more performant? Here's a quick checklist.
• Scheduling in React (2019)
• Writing Resilient Components (2019)
• React Fiber Architecture - Description of React's new core algorithm, React Fiber.
• Router5 - Flexible and powerful universal routing solution.
• Unstated Next - 200 bytes to never think about React state management libraries ever again.
• React Europe (2019)
• Security and Data in React - Richard Threlkeld (2019)
• Best practices for building a large scale react application (2019)
• Easy peasy state for React
• SMOOSHCAST: React Fiber Deep Dive with Dan Abramov (2019)
• Fresh Concurrent React - Fresh links about the coming concurrent react revolution.
• Fusion.js - Modern framework for fast, powerful React apps.
• React Live - Production-focused playground for live editing React code.
• React/Redux Links
• TypeScript React Cheat Sheet - List of TypeScript types generated from the declaration files for react, react-dom, react-native and other libraries.
• Why is React doing this? by Sebastian Markbåge (2019)
• React Patterns
• Understanding React Components and State (2019)
• Announcing Ionic React (2019)
• Divjoy - React codebase generator.
• React Concurrent Mode (HN)
• React Conf 2019
• zustand - Small, fast and scalable bearbones state-management solution.
• Learn React Courses
• Building a Custom React Renderer | Sophie Alpert (2019) (Code)
• Thoughts on Suspense for data fetching (2019)
• Simplifying React component testing (2019)
• Reatom - Declarative and reactive state manager, designed for both simple and complex applications.
• Tried & True Tips from 25 React Experts to Make You More Productive (2019)
• Build your own React (2019) (HN) (Code)
• What is the most impressive React-based site you've seen? (2019)
• Blocks UI - JSX-based page builder for creating beautiful websites without writing code. (Code)
• WTF is Up with Refs? (2019)
• Can you feel the Suspense?! (2019) (HN)
• Authentication in React Applications (2019)
• Minimal Images from Unsplash - Project was bootstrapped with Create React App.
• CodeLift - "No Code" GUI for your existing React code.
• My top React techtalks of 2019
• React Christmas
• suspense-cache - Cache utility to create resources for React suspense.
• Snowpack with React: An awesome way to build web applications (2020)
• What I've Learned About Testing React Apps (2020)
• Proton Native - React environment for cross platform desktop apps.
• Make Impossible States Impossible
• Jira Clone in React - Simplified Jira clone built with React/Babel (Client), and Node/TypeScript (API). Auto formatted with Prettier, tested with Cypress. (HN)
• iPod.js - iPod Classic built using React Hooks, TypeScript, & GraphQL. (Web) (HN)
• Undux - Simple & typesafe alternative to Flux and Redux.
• Concurrent Mode issues
• React Diff Viewer - Simple and beautiful text diff viewer made with Diff and React. (Code)
• Advanced memoization and effects in React (2020)
• React in patterns - Free book that talks about design patterns/techniques used while developing with React. (Code)
• Awesome list of React Renderer
• What is the React Scheduler? (2020)
• 33 line React (HN)
• Vidact - Compiler that converts React-compatible codes to VanillaJS with no Virtual DOM.
• Under the hood: React - Entire React code base explanation by visual block schemes (Stack version). (Code)
• Opinionated React: State Management (2020)
• static-react - Exploration of a Reason React API that tracks the shape of render trees at the type system level.
• Visly - Build React components visually. (Article) (GitHub) (Release announcement)
• Let's recreate the Spotify UI in React (2020)
• Women of React - Online conference where women take the (virtual) stage, but everyone is welcome to attend and participate. (Women of React 2020)
• When does React re-render components? (HN)
• What I wish I knew about React (2020) (HN)
• Remix - Build Better Websites. (Why I Love Remix) (Awesome)
• Remix Preview #1 (2020)
• 5 Layers of State Management in React Applications (2020)
• Throttling Subscription Events in React with Generators (2020)
• Complete Guide to React Rendering Behavior (2020) (Reddit)
• React 2025 course - Build and deploy a modern Jamstack application using the most popular open-source software. (Intro video) (Code) (Videos) (Discord) (Code)
• React Bits - Compilation of React Patterns, techniques, tips and tricks.
• React Security - Learn how to properly secure your React app for the real world.
• A visual guide to React Mental models (2020) (HN)
• What are your must have React tools in 2020?
• The rise of React (2020) (HN)
• storybook-addon-react-docgen - Storybook addon to display react docgen info.
• Rendering to iFrames in React (2018)
• React Testing Library - Simple and complete React DOM testing utilities that encourage good testing practices. (How to use React Testing Library (2020)) (Common mistakes with React Testing Library) (React Testing Library Recipes)
• rehype-react - Plugin to transform to React.
• React Deep Dive book (2020)
• Tuomas Artman: Real-time sync for web apps (2020)
• Ярослав Лосев – React Reconciler: как написать собственный рендерер (2020) (Code)
• New, experimental frontend for React inspired by SwiftUI
• Plasmic - Visual UI builder for React. (Article)
• Glossary of React Terms
• Frustrated by Formik? Here's a simpler way to do forms in React (2020)
• Ink 3 - Build CLI apps with React (2020)
• Comparing reactivity models - React vs Vue vs Svelte vs MobX vs Solid (2020)
• My Tech Stack (2020 Edition with Next.js, Tailwind, MongoDB, Jest, and more!)
• Opinionated Guide to React
• UIKit's UIViews in JavaScript, Part 1: Why? (2020)
• Experimental React Single File Components (Tweet)
• Records & Tuples for React, way more than immutability (2020)
• Managing React State course
• A tale of webpage speed, or throwing away React (2020) (HN)
• React is becoming a black box (HN)
• Rewriting Facebook's "Recoil" React library from scratch in 100 lines (2020)
• react-nil - Allows you to bring Reacts high-level component abstraction to Node, or wherever you need it.
• What do you use to handle state with React? (2020)
• New JSX Transform (2020) (HN)
• My State Management Mistake (2020)
• Epic React course (Code) (Advanced React Patterns) (React Performance) (Notes) (Things learned) (Tips and Tricks)
• react-performance-testing - Library to test runtime performance in React.
• Developing React Global State Library With Atom Abstraction (2020)
• How to Measure Performance in JavaScript Applications (2020)
• Animating React with React Transition Group (2020)
• Maho - Framework for building server-rendered or static websites, powered by React and esbuild.
• The Rules of React
• React Summit - Biggest React Conference Worldwide.
• vite-plugin-react - Provides React Fast Refresh support for Vite.
• Stop using isLoading booleans
• Building a Pannable, Zoomable Canvas in React (2020)
• Getting Started with Storybook: How to Develop React Components Without an App (2020)
• Will this React global state work in Concurrent Mode?
• A Semantics for the Essence of React (2020)
• React for Design - React Course for Designers. (Code)
• Algebraic Effects for React Developers (2020) (HN)
• Memoization and React (2020)
• Building a Graphics Rendering Loop with React and TypeScript (2019)
• Concurrent React Notes
• Rockpack - Simple solution for creating React Application with Server Side Rendering, bundling, linting, testing, logging, localizing within 5 minutes.
• React hover animation effect with React Spring (2020)
• Advanced React Security Patterns - Learn how to Secure your React Apps for the Real World.
• react-ssr-prepass - Custom partial React SSR renderer for prefetching and suspense.
• What React refs really are (2020) (Lobsters)
• Brahmos - Supercharged JavaScript library to build user interfaces with modern React API and native templates.
• Preact - Fast 3kb React Alternative with the Same API, Components and Virtual DOM. (Code) (HN) (Prefresh - Fast-refresh for Preact) (Web Code)
• Zero-Bundle-Size React Server Components (2020) (Code) (HN) (Tweet) (Tweet 2) (Tweet 3)
• React Server Components Demo with Prisma
• Sosse - Composable toolkit for (p)react full-stack node web servers.
• react-worker-components - React Worker Components simplify using Web Workers.
• React Dev Inspector - Click react component then jump to component's source code in your local IDE.
• React Interview Questions & Answers
• "Just Use Props": An opinionated guide to React and XState (2021) (Tweet)
• react-merge-refs - React utility to merge refs.
• Why React Context Is Not “State Management”(and Why It Doesn't Replace Redux) (2021)
• issr - Easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.
• Why Did You Render? (2020)
• Tao of React - Software Design, Architecture & Best Practices (2021)
• React Training - React Corporate Workshops, Training, and Consulting. (GitHub)
• React, Tailwind, Airtable: is this the best MVP stack for your project? (2021)
• Interactive React - Course about making React applications interactive. (Tweet)
• Fundamentals of SSR in React (2021)
• React State: A simple and easy to follow breakdown (2021)
• preact/preset-vite - Preset for using Preact with the vite bundler.
• Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) (2021)
• What made React's context click for you?
• Building a Modern React App from Scratch in 2021
• The Perils of Rehydration: An Eye-Opening Realization about Gatsby and React (HN)
• SimpleR State - Simplest app state management for React. (HN)
• Testing React - Testing utilities that allow you to reuse your Storybook stories in your React unit tests.
• Atomos - Open source Chrome developer tool for Recoil.
• react-schemaorg - Type-checked Schema.org JSON-LD for React.
• Practical React Query Blog Posts
• jsx-dom - Use JSX to create DOM elements.
• Issues with using React to build web apps (2021)
• React Suspense is Killing Me (2021)
• jsx-runtime - Extremely lightweight JSX runtime (<2KB) to write JSX without React in TypeScript or JavaScript.
• react-docgen-typescript - Simple parser for react properties defined in typescript instead of propTypes.
• Best way to internationalize React site (2021)
• State Machines: Should this be a state, or in context? (2021) (Tweet)
• preact-render-to-string - Render JSX and Preact components to an HTML string.
• API Design for a React Tree Table (2021)
• Vite Typescript React 17 SSR (Web)
• React without JSX (2021)
• How to manage global state with XState and React (2021)
• Improve the Performance of your React Forms
• How To Add Prettier and ESLint Automation to a React Codebase (2021)
• React Status - Weekly roundup of the latest React and React Native links and tutorials.
• Remastered - Full-stack approach to React development. (Web)
• React 18 Working Group (HN) (Lobsters)
• New Suspense SSR Architecture in React 18 (2021)
• Intermediate React.js Coding Interview (ft. Clément Mihailescu) (2021)
• Utopia - Visual design tool for React, with code as the source of truth. (HN) (Code)
• Real world example: adding startTransition for slow renders (2021)
• Fresh - Preact, but super edgy. Web framework that lets you build projects very fast, highly dynamic, and without the need of a build step.
• Headless React (HN)
• React without webpack: fast path to a working app from scratch (2021)
• Mini React implementation made for fun and practice
• React's UI State Model vs Vanilla JavaScript DOM State — A Beginner's Introduction (2021) (HN)
• React Children And Iteration Methods (2021)
• A Visual Guide to React Rendering (2021) (HN)
• React render tracker - Tool to discover performance issues related to unintended re-renders.
• Tips for structuring React apps (2021)
• Alt + Click on rendered JSX to open it's source code in VSCode
• Как Реакт рендерит компоненты в общих чертах (2021)
• Niue - Tiny shared state and event library for React.
• Fragmented Store - Tiny (~500 B), easy and simple library to manage your (P)React state.
• Effector React Slots
• 7 Lessons to Outlive React (2021)
• React Philosophies - Things I think about when I write React code.
• Why We Memo All the Things (2020)
• Performance Optimization in React applications (2021)
• How to prepare for React 18 concurrent mode (2021)
• React & TypeScript: use generics to improve your types (2021)
• React Render Tutorial - YouTube (2020)
• A Visual Guide to React Rendering - Cheat Sheet (2021)
• How to Detect Slow Renders in React? (2021)
• React Docs Beta (HN)
• How I'd build a react framework today (2021)
• Using Composition in React to Avoid "Prop Drilling" (2019)
• I hate passing props but don't need Redux. Which tool should I use? (2021)
• React Holiday - Celebrate React 18 beta with 18 lessons delivered to your inbox.
• react-chicane - Simple and safe router for React and TypeScript.
• Coding Interview with Dan Abramov (2021)
• React-JUCE - Write cross-platform native apps with React.js and JUCE.
• Server Components Working Group
• React Conf 2021 - YouTube
• ReactEurope 2021
• Migrate a Client-Side Application to React 18 Beta
• React Conf 2021 Recap
• Modern API data-fetching methods in React (2021)
• Ask HN: Should I even bother with React? (2022)
• This Week In React Newsletter (Code)
• System Design React Code Examples
• Advice in setting up React project (2022)
• ASAP - Opinionated application server for React Single Page Applications.
• 800 slides on various React topics (Reddit)
• Delightful React file/directory structure (2022) (HN)
• Continuous Integration Pipelines with GitHub Actions for (React) Developers (2022)
• Preemptive Memoization In React Is Probably Not Evil (Yet) (2022) (Reddit)
• React Trends: Interview with React Query creator Tanner Linsley (2022)
• RFC: Intent to Ship React 18 (HN)
• React v18.0 (2022) (HN) (Tweet)
• React Advanced Useful Tricks (2022)
• Preferred way to handle success, loading states in React (2022)
• Handle logic at the right place in React (2022)
• React 18 Streaming. Made fully-fledged & easy.
• What would you change about React? (2022)
• Streaming Server Side Render in React 18 (HN)
• Aspect - Visual IDE for React. (HN) (HN)