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"のボタンが表示されていれば成功です。おつかれさまでした。
