サイトマップ サイト内検索 まとめ

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

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

お断り

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

使ってみる

  1. CodesandBox の Web ページを開く

    https://codesandbox.io/

  2. 「Create a Sandbox, it's free」をクリック
    利用条件等は，利用者で確認すること．
  3. 「Create a Sandbox」をクリック
  4. 「React (create-react-app)」をクリック
  5. rsuite を追加する
    1. まず，「Add Dependency」をクリック
    2. 検索ボタンをクリック
    3. 「rsuite」を検索し，追加する
    4. 「RSUITE Hello World (3.0)」を選ぶ
    5. 画面が変わるので確認する
  6. エディタに次のプログラムを入れたときの実行結果は次の通り．
  7. Python プログラムの実行

    Python プログラムの実行

    Python 開発環境（Jupyter Qt Console, Jupyter ノートブック (Jupyter Notebook), Jupyter Lab, Nteract, Spyder, PyCharm, PyScripterなど）も便利である．

    Python のまとめ: 別ページ »にまとめ 

    python

    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);

    実行結果