Create React App（TypeScript）でアプリを起動して Material UI ちょこっと触るまで

概略

React は公式のドキュメントが充実しているので, アプリを初期構築するのも比較的容易かと思いますが, 最近触る機会があったので, せっかくなのでアプリ立ち上げと Material UI 使ってみるまでまとめてみました。

React アプリを作成する

アプリを新規作成して初期起動までです。実施環境の Node.js は 2021/01/07 時点で推奨版の 14.15.4 を利用中です。nodenv とかで入れてます。

Create React App を実行する

公式の Doc を辿ると比較的素直に, 新しい React アプリを作るのページにたどり着きます。
書かれているがままに, create-react-app したいところなのですが, TypeScript を利用する場合はこちらの TypeScript 用のページの内容が大事です。

create-react-app する際に TypeScript の指定をしてあげる感じになります。（以下, my-app の箇所は好きなアプリ用の名前を指定してあげてください）

npx create-react-app my-app --template typescript

公式ページでも以下記載がある通りですが, 使用しているのは np"x" です。

最初の行の npx は打ち間違いではありません — これは npm 5.2 から利用できるパッケージランナーツールです。

npx の利点としては, 今までグローバルにインストールして（npm i -g create-react-app）, create（npm create-react-app my-app）してたりしたとしたときに, npx 使うと, グローバルを汚さず（npx 実行時 create-react-app がなければ一時的にインストールされる感じでその後消えるので）良い感じに作業できるところですかね。（細かいところは↑のリンクで）

実行結果前半を拾うとこんな感じです。react-scripts with cra-template-typescript が示す通り TypeScript 用でインストールが走っているかと思います。

% npx create-react-app my-app --template typescript 
npx: 67個のパッケージを2.71秒でインストールしました。

Creating a new React app in /your-path/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...

アプリの起動

create-reactt-app 時の最後の方に, いろいろメッセージがでてますので, それを確認すると,

Success! Created my-app at /your-path/my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

作ったアプリが create-react-app を叩いたディレクトリ下にできているのでメッセージにしたがって以下を実行します。

% cd my-app
% npm start

すると http://localhost:3000/ に誘導されてちょっと待つと, 最初の画面が描画されます。

テスト実行とか, Build とか↑のインストール後のメッセージに書かれているのでご参照くださいという感じです。

Material UI を使う

初期画面だと特にこう見栄えを変えるものもあまりないのですが, Material UI をいれてみます。React と同じく公式のドキュメントが豊富なので公式に従っていきます。

Material UI をいれる

公式の Getting Started を参照し, まず先ほど作ったアプリで Material UI をインストールします。

% cd my-app
% npm install @material-ui/core

package.json の dependencies に @material-ui/core が追加されたかと思います。（ちなみに, 僕のインストール時の Material UI は v4.11.2 でした）
いったんこれで使い始められるので, 公式の Getting Started の Font とかのあたりは必要に応じて読んで取り込んでください。

使ってみる

公式の Usage のサンプルで, Material UI の Button をいれてみます。
と言っても簡単で, 先ほど作ったアプリの App.tsx（my-app/src/App.tsx）に以下内容①・②を追加します。わかりやすさのためかなり雑な位置に Button をいれています。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Button from '@material-ui/core/Button'; // ① 追加

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        {/* ② 追加（以下三行） */}
        <Button variant="contained" color="primary">
          Hello World
        </Button>
      </header>
    </div>
  );
}

export default App;

npm start を継続している状態なら保存すれば http://localhost:3000/ で描画されるかと思います（してなければ npm start ください）
以下な感じで, 良い感じにデザインがあたったボタンが出てくるかと思います。（背景が暗いので影などがわかりづらいですが）

ということで使い方ですが, @material-ui/core などから必要な部品を import して, TSX の中で通常の HTML 要素のように書くだけ, という感じです。便利ですね。

Button 以外の使える部品とか指定できる属性とかいろいろな情報は公式デモと公式 API ドキュメントを参照ください。
@material-ui/icons とかもインストールして使うと, ゴミ箱アイコンとか使えておすすめです。

簡単ですがこのあたりで。次はもう少し実践的なものをかければよいなーというところです。