Skip to content

Installation

Template Installation

Start from a template for JavaScript or TypeScript. Replace my-project with your desired directory name.

JavaScript

bash
$ npx degit almadoro/react-just/templates/node-js my-project
bash
$ pnpx degit almadoro/react-just/templates/node-js my-project
bash
$ bunx degit almadoro/react-just/templates/node-js my-project

TypeScript

bash
$ npx degit almadoro/react-just/templates/node-ts my-project
bash
$ pnpx degit almadoro/react-just/templates/node-ts my-project
bash
$ bunx degit almadoro/react-just/templates/node-ts my-project

Manual Installation

Follow the steps below to manually install React Just in your project.

Packages Installation

Install React packages:

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.

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

Install Vite and React Just as dev dependencies:

bash
$ npm install -D vite@7 react-just
bash
$ pnpm add -D vite@7 react-just
bash
$ bun add -D vite@7 react-just

TypeScript Configuration (Optional)

For a minimal TypeScript setup, use the following configuration:

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

Vite Configuration

Create a Vite config file that uses the React Just plugin:

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

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

Minimal App Component

For a working project, you need to add an App Component. Add a minimal version.

tsx
import { AppProps } from "react-just";

export default function App(props: AppProps) {
  return (
    <html>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>
  );
}
jsx
/**
 * @param {import('react-just').AppProps} props
 */
export default function App(props) {
  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:

bash
$ npm run dev
bash
$ pnpm dev
bash
$ bun dev

Released under the MIT License.