React

Official React docs are great. LocatorJS extension is useful. fresh & Plasmic look interesting.

Currently trying to use Solid for all my web apps and static sites as it has 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.
React devs: if your app logic is super simple and only requires fetching + displaying data (CRUD), the only state management you really need is React Query + maybe useState. Consider state management libraries when the logic gets more exciting than that.
Selective Hydration in React: It’s hydrating parent before child, but we initially skip hydrating all the Suspense nodes outside the direct parent path. Then immediately come back to hydrate the rest (non-blocking), again prioritizing parent path of what you interacted with.

React

OSS React apps​

Templates​

Notes​

Links​

OSS React apps

Templates

Notes

Links