Manual Setup

ReactJust is designed to work with minimal setup and zero configuration. Follow the steps below to set it up in your project.

Installation

Install React and ReactJust packages:

npmpnpmBun

bash

$ npm install [email protected] [email protected] react-just

bash

$ pnpm add [email protected] [email protected] react-just

bash

$ bun add [email protected] [email protected] react-just

React 19.1.x recommended

The underlying APIs for React Server Components are not yet stable. The React team warns that these APIs may change between minor versions.

ReactJust has been tested with React 19.1 and should work with any patch version (19.1.x). Compatibility with future versions is not guaranteed.

Why is react-just not a dev dependency?

ReactJust is used in your production code. Even if you don’t directly import react-just in your source files, it’s required by the code generated.

Install Vite as dev dependency:

npmpnpmBun

bash

$ npm install -D vite@6

bash

$ pnpm add -D vite@6

bash

$ bun add -D vite@6

Vite 6 recommended

ReactJust relies on Vite's experimental Environments API introduced in Vite 6. Upcoming major versions (Vite 7) may introduce breaking changes to this API.

TypeScript Configuration (Optional)

If you want to use TypeScript, you can start with the following base configuration:

tsconfig.json

json

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "module": "esnext",
    "jsx": "preserve"
  }
}

Configure Vite

Create a Vite config file that uses the ReactJust plugin:

vite.config.jsvite.config.ts

import { defineConfig } from "vite";
import react from "react-just/vite";

export default defineConfig({
  plugins: [react()],
});

import { defineConfig } from "vite";
import react from "react-just/vite";

export default defineConfig({
  plugins: [react()],
});

Add an App Entry

Create a the app entry component. It must be exported as default and return at least the html and body tags.

src/index.jsxsrc/index.tsx

jsx

/**
 * @param {import('react-just/server').AppEntryProps} props
 */
export default function App() {
  return (
    <html>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>
  );
}

tsx

import { AppEntryProps } from "react-just/server";

export default function App(props: AppEntryProps) {
  return (
    <html>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>
  );
}

Development Server

Start the development server with the vite command. For convenience, add the following script to your package.json:

package.json

json

{
  "scripts": {
    "dev": "vite"
  }
}

Then start the development server with:

npmpnpmBun

bash

$ npm run dev

bash

$ pnpm run dev

bash

$ bun run dev

Manual Setup ​

Installation ​

TypeScript Configuration (Optional) ​

Configure Vite ​

Add an App Entry ​

Development Server ​

Manual Setup

Installation

TypeScript Configuration (Optional)

Configure Vite

Add an App Entry

Development Server