ReactX

Appearance

Get Started ​

sh
npm install reactx@alpha
sh
yarn add reactx@alpha
sh
pnpm add reactx@alpha

Configure observation plugin:

ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import reactx from "reactx/babel-plugin";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [reactx()],
      },
    }),
  ],
});
ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import reactx from "reactx/swc-plugin";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react({
      plugins: [reactx()],
    }),
  ],
});

INFO

You can exclude certain paths from being transformed by the plugin using the exclude option:

ts
export default defineConfig({
  plugins: [
    react({
      plugins: [reactx({ exclude: ["src/ui-components"] })],
    }),
  ],
});

Devtools ​

Run the ReactX devtools with npx reactx. This will start an Electron app that you can connect to.

When you create the reactive bridge to React, you can configure development mode by:

ts
// This connects to the default port of the Devtools
const state = reactive(new State(), true);

// Define a custom host and port for the Devtools
const state = reactive(new State(), "localhost:4041");