# xdankit/react architecture

> Architecture diagram of the GitHub repository xdankit/react, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/xdankit/react
- Repository: https://github.com/xdankit/react

## Overview

React is a JavaScript library for building declarative, component-based user interfaces. The principal workflow is an application defining components with the React API, then asking a renderer to update a host environment; the repository also supports server rendering and React Native. Separate branches cover React Server Components and DevTools. The README establishes the product workflow and rendering targets; source-index references and excerpts support only some internal links, so other architectural connections are marked unverified rather than treated as inspected calls.

Main entry points: [`packages/react-reconciler/src`](https://github.com/xdankit/react/tree/main/packages/react-reconciler/src) (Reconciliation), [`packages/react-dom`](https://github.com/xdankit/react/tree/main/packages/react-dom) (DOM Renderer), [`packages/react/src/React.js`](https://github.com/xdankit/react/blob/main/packages/react/src/React.js) (React API), [`packages/react-native-renderer`](https://github.com/xdankit/react/tree/main/packages/react-native-renderer) (Native Renderer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_core["React Core"]
  node_react["React API<br/>[React.js]"]
  node_reconciler["Reconciliation"]
  node_scheduler["Scheduling"]
end

subgraph group_render["Renderers"]
  node_dom["DOM Renderer"]
  node_native["Native Renderer"]
  node_art["ART Renderer<br/>[ReactART.js]"]
end

subgraph group_server["Server Rendering"]
  node_serverrender["Server Rendering"]
end

subgraph group_flight["Server Components"]
  node_flightclient["Flight Client"]
  node_flightreply["Action Serialization"]
  node_flightserver["Flight Server"]
end

subgraph group_tools["Developer Tools"]
  node_devtools["DevTools Frontend"]
  node_devbackend["DevTools Backend"]
  node_extension["Browser Extension<br/>[backendManager.js]"]
  node_lint["Hooks Lint Rules"]
end

node_developer(("Application Developer"))
node_browser(("Browser UI"))
node_nativehost(("Native UI"))
node_serveroutput["HTML Output"]
node_transport["Flight Transport"]

node_developer -->|"defines components"| node_react
node_developer -->|"mounts application"| node_dom
node_react -.->|"provides elements"| node_reconciler
node_reconciler -.->|"schedules updates"| node_scheduler
node_reconciler -.->|"dispatches rendering"| node_dom
node_reconciler -.->|"dispatches rendering"| node_native
node_reconciler -.->|"dispatches rendering"| node_art
node_dom -->|"updates UI"| node_browser
node_native -->|"renders UI"| node_nativehost
node_developer -->|"requests rendering"| node_serverrender
node_serverrender -->|"produces markup"| node_serveroutput
node_developer -.->|"uses client APIs"| node_flightclient
node_flightclient -.->|"reads stream"| node_transport
node_flightreply -.->|"serializes actions"| node_transport
node_flightserver -.->|"emits stream"| node_transport
node_extension -->|"activates backend"| node_devbackend
node_devbackend -.->|"sends bridge data"| node_devtools
node_developer -.->|"checks hook usage"| node_lint

click node_react "https://github.com/xdankit/react/blob/main/packages/react/src/React.js"
click node_reconciler "https://github.com/xdankit/react/tree/main/packages/react-reconciler/src"
click node_scheduler "https://github.com/xdankit/react/tree/main/packages/scheduler"
click node_dom "https://github.com/xdankit/react/tree/main/packages/react-dom"
click node_native "https://github.com/xdankit/react/tree/main/packages/react-native-renderer"
click node_art "https://github.com/xdankit/react/blob/main/packages/react-art/src/ReactART.js"
click node_serverrender "https://github.com/xdankit/react/tree/main/packages/react-dom/src/server"
click node_flightclient "https://github.com/xdankit/react/blob/main/packages/react-client/src/ReactFlightClient.js"
click node_flightreply "https://github.com/xdankit/react/blob/main/packages/react-client/src/ReactFlightReplyClient.js"
click node_flightserver "https://github.com/xdankit/react/blob/main/packages/react-server-dom-esm/src/ReactFlightDOMServerNode.js"
click node_devtools "https://github.com/xdankit/react/tree/main/packages/react-devtools-shared/src/devtools"
click node_devbackend "https://github.com/xdankit/react/tree/main/packages/react-devtools-shared/src/backend"
click node_extension "https://github.com/xdankit/react/blob/main/packages/react-devtools-extensions/src/backendManager.js"
click node_lint "https://github.com/xdankit/react/tree/main/packages/eslint-plugin-react-hooks/src"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_react,node_reconciler,node_scheduler,node_browser,node_nativehost toneBlue
class node_dom,node_native,node_art toneAmber
class node_serverrender toneMint
class node_flightclient,node_flightreply,node_flightserver toneRose
class node_devtools,node_devbackend,node_extension,node_lint,node_developer,node_serveroutput,node_transport toneIndigo
```

## Components

### React Core

- [React API](https://github.com/xdankit/react/blob/main/packages/react/src/React.js): `packages/react/src/React.js`
- [Reconciliation](https://github.com/xdankit/react/tree/main/packages/react-reconciler/src): `packages/react-reconciler/src`
- [Scheduling](https://github.com/xdankit/react/tree/main/packages/scheduler): `packages/scheduler`

### Renderers

- [DOM Renderer](https://github.com/xdankit/react/tree/main/packages/react-dom): `packages/react-dom`
- [Native Renderer](https://github.com/xdankit/react/tree/main/packages/react-native-renderer): `packages/react-native-renderer`
- [ART Renderer](https://github.com/xdankit/react/blob/main/packages/react-art/src/ReactART.js): `packages/react-art/src/ReactART.js`

### Server Rendering

- [Server Rendering](https://github.com/xdankit/react/tree/main/packages/react-dom/src/server): `packages/react-dom/src/server`

### Server Components

- [Flight Client](https://github.com/xdankit/react/blob/main/packages/react-client/src/ReactFlightClient.js): `packages/react-client/src/ReactFlightClient.js`
- [Action Serialization](https://github.com/xdankit/react/blob/main/packages/react-client/src/ReactFlightReplyClient.js): `packages/react-client/src/ReactFlightReplyClient.js`
- [Flight Server](https://github.com/xdankit/react/blob/main/packages/react-server-dom-esm/src/ReactFlightDOMServerNode.js): `packages/react-server-dom-esm/src/ReactFlightDOMServerNode.js`

### Developer Tools

- [DevTools Frontend](https://github.com/xdankit/react/tree/main/packages/react-devtools-shared/src/devtools): `packages/react-devtools-shared/src/devtools`
- [DevTools Backend](https://github.com/xdankit/react/tree/main/packages/react-devtools-shared/src/backend): `packages/react-devtools-shared/src/backend`
- [Browser Extension](https://github.com/xdankit/react/blob/main/packages/react-devtools-extensions/src/backendManager.js): `packages/react-devtools-extensions/src/backendManager.js`
- [Hooks Lint Rules](https://github.com/xdankit/react/tree/main/packages/eslint-plugin-react-hooks/src): `packages/eslint-plugin-react-hooks/src`

### Other components

- **Application Developer**
- **Browser UI**
- **Native UI**
- **HTML Output**
- **Flight Transport**

## Connections

- Application Developer → React API: defines components (evidence: `README.md`)
- Application Developer → DOM Renderer: mounts application (evidence: `README.md`)
- React API → Reconciliation: provides elements
- Reconciliation → Scheduling: schedules updates
- Reconciliation → DOM Renderer: dispatches rendering
- Reconciliation → Native Renderer: dispatches rendering
- Reconciliation → ART Renderer: dispatches rendering
- DOM Renderer → Browser UI: updates UI (evidence: `README.md`)
- Native Renderer → Native UI: renders UI (evidence: `README.md`)
- Application Developer → Server Rendering: requests rendering (evidence: `README.md`)
- Server Rendering → HTML Output: produces markup
- Application Developer → Flight Client: uses client APIs
- Flight Client → Flight Transport: reads stream
- Action Serialization → Flight Transport: serializes actions
- Flight Server → Flight Transport: emits stream
- Browser Extension → DevTools Backend: activates backend (evidence: `packages/react-devtools-extensions/src/backendManager.js`)
- DevTools Backend → DevTools Frontend: sends bridge data
- Application Developer → Hooks Lint Rules: checks hook usage