How can i use react-strict-dom

[Abdulmateenchitrali]

Hi how can i use react-strict-dom

[corysimmons]

There's a demo here https://github.com/facebook/react-strict-dom/tree/e738ff04c584b5cddb58a535375d4886f4467e38/apps/examples

You basically just create a fresh Expo project, then npm i react-strict-dom, then instead of using things like <View> and <Text> you use <html.div> and <html.p> which will render the appropriate semantic code for the each platform. It looks very similar to @expo/html-elements.

Instead of all the CSS libs and animation libs, you can just use css.create({ backgroundColor: '#ff0000' }) (with css.keyframes it also seems to support animations 🤯).

Obviously, it's all in super early development and I'm sure the Meta team is just looking for feedback at this stage, so don't use it on a real app.

[zaydek]

If you want to try on web it's actually pretty easy to get started, you just setup Vite like this:

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import styleX from "vite-plugin-stylex";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    styleX({
      importSources: [{
        from: "react-strict-dom",
        as: "css",
      }],
    }),
  ],
});

So you would run npm create vite and initialize React project then install react-strict-dom and vite-plugin-stylex as a developer dependency and setup the config like above.

[j1mie]

Wondering if people are still able to run react-strict-dom using this approach? I'm coming across babel and commonJS issues with a fresh vite project using this config

[nmn]

@j1mie Please create an issue on the StyleX repo with a repro of the issue you're seeing and we will help.