トップページ -> インストール,設定,利用 -> Web サーバ演習,Web フレームワーク -> Codesand Box で React Suite を動かしてみる
[サイトマップへ], [サイト内検索へ]

Codesand Box で React Suite を動かしてみる

Codesand Box は Web 開発の機能を持つ,オンライン開発環境.利用条件は利用者で確認すること.

お断り

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

使ってみる

  1. CodesandBox の Web ページを開く

    https://codesandbox.io/

  2. Create a Sandbox, it's free」をクリック
    利用条件は利用者で確認すること.

    [image]
  3. Create a Sandbox」をクリック

    [image]
  4. React (create-react-app)」をクリック

    [image]
  5. rsuite を追加する
    1. まず,「Add Dependency」をクリック

      [image]
    2. 検索ボタンをクリック

      [image]
    3. rsuite」を検索し,追加する

      [image]
    4. RSUITE Hello World (3.0)」を選ぶ

      [image]
    5. 画面が変わるので確認する

      [image]
  6. エディタに次のプログラムを入れたときの実行結果は次の通り.

    プログラム

    import React from "react";
    import ReactDOM from "react-dom";
    import { Button } from "rsuite";
    
    const styles = {
      padding: 20,
      textAlign: "center"
    };
    
    const App = () => (
      <div style={styles}>
        <Button>Hello World</Button>
      </div>
    );
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);
    

    実行結果

    [image]

本サイトは金子邦彦研究室のWebページです.サイトマップは,サイトマップのページをご覧下さい. 本サイト内の検索は,サイト内検索のページをご利用下さい.

問い合わせ先: 金子邦彦(かねこ くにひこ) [image]