前回

今回やること

React + Boot Strap でなにがしかの実装を行う。
React + Boot Strap によるグリッドシステムの実装を行う（次回に譲るかも）。

補足：
軽く調べるとレイアウトの配置はグリッドシステムというものを使うそうだ。別の技術もあり得るだろうが、今回は一通り走ることが大目標なので、これを採用する。Boot Strap という聞いたことのある名前の技術がReactにグリッドシステムを提供しているようなのでこれをターゲットに実装する。

今回やらないこと

特になし

開発

React BootStrap の公式ページのGet Start に従っていく。

React Boot Strap のパッケージをインストール

npm install react-bootstrap bootstrap

アプリのソースを以下のように実装。

App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { LanguageServiceMode } from 'typescript';
import { Button } from 'react-bootstrap';

function App() {
  return (
    <div>
      <h1>this is sample</h1>
      <Button>this is sample <button type="submit"></button></Button>
    </div>
  );
}

export default App;

ローカルサーバの立ち上げを実施。

npm start

以下のようなページが表示された。

どうやらReact Boot Strap はUIコンポーネントも提供しているらしい。かなり色々できそうだが本丸はグリッドシステムなので、そこを重点的に調べる。グリッドシステムに関しては次回に譲る。

その他

グリッドシステムを調べる過程で面白そうなものを見つけた。別の機会に調べたい。
https://github.com/react-grid-layout/react-grid-layout
React の公式から辿って知ったのだがCodeSandboxというWebサービスがある。
https://codesandbox.io/
node.js のIDE環境で、作成したReactアプリを簡易にホストしてくれるらしい。
開発環境を構築する手間が省けるし、npm start のようなサーバ立ち上げのコマンドも不要だ。
実装の挙動だけを簡単に確認したい場合はこれでもいい気がしてきた。