# React Three Fiber — Declarative 3D Graphics for React
> A React renderer for Three.js that lets you build interactive 3D scenes using familiar JSX component patterns.
## Install
Save in your project root:
# React Three Fiber — Declarative 3D Graphics for React
## Quick Use
```bash
npm install three @react-three/fiber @react-three/drei
```
```jsx
import { Canvas } from '@react-three/fiber'
export default function App() {
return
}
```
## Introduction
React Three Fiber (R3F) is a React renderer for Three.js that turns the imperative WebGL API into a declarative component tree. It enables React developers to build 3D scenes, games, and data visualizations using the same patterns they already know.
## What React Three Fiber Does
- Renders Three.js scenes as React component trees with JSX
- Manages the render loop, resizing, and disposal automatically
- Supports React features like Suspense, refs, and hooks in 3D
- Integrates with the Drei helper library for cameras, controls, and loaders
- Works with React Spring and other animation libraries out of the box
## Architecture Overview
R3F implements a custom React reconciler that maps JSX elements to Three.js objects. When you write ``, the reconciler creates a `THREE.Mesh` instance and attaches it to the scene graph. State updates trigger efficient re-renders without recreating the WebGL context, keeping performance close to hand-written Three.js code.
## Self-Hosting & Configuration
- Install via npm alongside the three.js peer dependency
- Drop a `