0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

とりあえず React + TypeScript で適当なサンプルページを作りたい ②

Last updated at Posted at 2021-03-15

前回

今回やること

  • 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

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

どうやら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 のようなサーバ立ち上げのコマンドも不要だ。
    実装の挙動だけを簡単に確認したい場合はこれでもいい気がしてきた。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?