CodeSandbox で React Suite を動かしてみる

【概要】

CodeSandbox は、Web 開発の機能を持つオンライン開発環境（ブラウザ上で動く開発環境）である。このページでは、CodeSandbox 上で React のプロジェクトを作り、UI コンポーネント集 React Suite（npm パッケージ名 rsuite、v6 系）のボタンを表示して動かす手順を示す。利用条件は、利用者で確認すること。

特定の商用製品を推奨・広報するものではなく、使用感などの評価を行うものでもない。操作手順を記述している。

【目次】

【関連する外部ページ】

CodeSandbox: https://codesandbox.io/
React Suite（公式）: https://www.rsuitejs.com/

CodeSandbox で React Suite を動かす

  1. CodeSandbox の Web ページを開く。

    https://codesandbox.io/

  2. 「Create a Sandbox」をクリックする。利用条件は、利用者で確認すること。
  3. 「Create a Sandbox」をクリックする。
  4. 「React (create-react-app)」をクリックする。
  5. rsuite を追加する。
    1. 「Add Dependency」をクリックする。
    2. 検索ボタンをクリックする。
    3. 「rsuite」を検索し、追加する。
  6. エディタの index.js を、次のプログラムに置き換える。React Suite v6 では、コンポーネントのスタイルを表示するために rsuite の CSS の読み込み（import 'rsuite/dist/rsuite.css';）が必要である。また、React 18 では描画に createRoot を用いる。 
    import React from "react";
import { createRoot } from "react-dom/client";
import { Button } from "rsuite";
import "rsuite/dist/rsuite.css";

const styles = {
  padding: 20,
  textAlign: "center"
};

const App = () => (
  <div style={styles}>
    <Button>Hello World</Button>
  </div>
);

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(<App />);

    実行結果は次のとおり。