編集

React Strict DOMが公開

#React #StyleX #React Native

Meta が React Strict DOM（RSD）を公開しました。これは Web およびネイティブ用のスタイル付き React コンポーネントの開発の改善および標準化を目的とした React DOM と StyleX の実験的な統合とのことです。

https://github.com/facebook/react-strict-dom

React Native for Web は React Native の API を Web 上で補完しようするものでしたが、RSD は Web API を React Native に組み込んでいこうとする試みです。

既にかなりの機能が実装されています。

https://github.com/facebook/react-strict-dom/blob/main/packages/react-strict-dom/COMPATIBILITY.md

jsx
import { css, html } from "react-strict-dom";

const styles = css.create({
  container: { borderTopWidth: 1 },
  h1: { padding: 10, backgroundColor: "#eee" },
  content: { padding: 10 },
});

export default function Example(props) {
  const { title, children } = props;
  return (
    <html.div style={styles.container}>
      <html.h1 style={styles.h1}>{title}</html.h1>
      <html.div style={styles.content}>{children}</html.div>
    </html.div>
  );
}
編集