React + Material UIの環境構築

フロントエンドアプリをReact + Material UIで作成する際の環境構築をします。

前提情報

実施時期

2023年3月
現在時点での公式Docを読みながら進めます。

筆者の知識レベル

フロント触るのは3年ぶり2回目

環境構築

実際に環境構築していきます。

1. node.jsのインストール

npmが使えなくては生きていけないので、
Node.js公式ページからインストールします。

執筆時点では18.15.0 (同梱 npm 9.5.0)でした。

インストールしたらnpmコマンドが使えることを確認

C:\Workspace>npm -v
9.5.0

2. Reactアプリのひな形を作成

今回はnpxを使用し、Reactアプリのひな形を作成します。
typescriptを使いたいので、"--template typescript"オプションを追加します。

npx create-react-app <プロジェクト名> --template typescript

3. Material UIのインストール

Material-UI公式ドキュメントを参考に、Material-UIをインストールします。

npm install @mui/material @emotion/react @emotion/styled

※グループ名がmaterial-uiからmuiに変わっている！！時の流れを感じました。
私もこの3年の間にいろいろありました。

4. 動作確認

React + Material-UIが使えているかを確認します。

4-1. App.tsの編集

デフォルトのApp.tsに、Material-UI由来のボタンを追加してみます。

App.js

//~~~省略~~~

//import文の追加
import Button from '@mui/material/Button'; 

function App() {
  return (
    <div className="App">
      <header className="App-header">
        //ボタンの追加
        <Button variant="contained">Hello World</Button>
        
///~~~省略~~~

4-2. アプリの起動

"npm start"を用いて、アプリを起動します。

npm start

4-3. ブラウザでの確認

ブラウザでhttp://localhost:3000/へアクセスし、ボタンが追加されているか確認します。
以下の画像のように、Reactのロゴマークの上に"HELLO WORLD"のボタンが表示されていれば成功です。おつかれさまでした。

参考ページ

Node.js公式ページ
 Material-UI公式ドキュメント