# Integrate with React
React and Pibbl can share an application, but they do not share elements,
renderers, hooks, or a JSX runtime. The React host owns the native Canvas; Pibbl
owns only its mount on that Canvas.
One `.tsx` file has one JSX runtime. Keep the scene and host in separate files.
The `.pibbl.tsx` suffix is a convention that makes the boundary obvious.
A component returned by `defineThreeLayer()` belongs in the Pibbl scene file and
uses the same `@pibbl/core` JSX runtime; ordinary Three objects are created with
the normal Three API and do not introduce another JSX runtime.
## Pibbl scene file
```tsx
/** @jsxImportSource @pibbl/core */
import { Rectangle, Text, type PibblNode } from "@pibbl/core";
export interface PosterProps {
title: string;
}
export function Poster({ title }: PosterProps): PibblNode {
return (
<>
{title}
);
}
```
## React host file
```tsx
import { useEffect, useRef } from "react";
import { pibbl, createElement as createPibblElement } from "@pibbl/core";
import { Poster } from "./Poster.pibbl";
export function PosterCanvas() {
const canvasRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const controller = pibbl(
canvas,
createPibblElement(Poster, { title: "Pibbl inside React" }),
);
return () => controller.dispose();
}, []);
return ;
}
```
The React file keeps React's JSX runtime. Its minority Pibbl tree is constructed
explicitly with an aliased `createElement`; the Pibbl component itself is not
called directly. React cleanup disposes the stable Pibbl controller before the
host Canvas is discarded. Pibbl does not render or replace the `