前回の話
Material UIの構築ができるように。
という喜びもつかの間、脆弱性だゾ～って何かが赤く光ってました。
ということで、昨日の手順だと脆弱性に関するエラーが出るので改めてドキュメントを見ていくことに
Material UI Introduction
Material UI is an open-source React component library that implements Google's Material Design.
→Reactの構築が必要。
React再構築 - create-next-app
npx create-next-app@latest
project named - > gtasktool
typescript -> no
ESLint -> yes
Tailwind CSS -> no
src/ directory -> yes
App Router -> no
import alias -> no
こちらに詳しく記載されていましたのでシェアします！
found 0 vulnerabilities
Initialized a git repository.
Success! Created gtasktool
とりあえず、create-next-appを実行する手順で、脆弱性によるエラーはなくなったようです。
作成後はこのような状態
Material UIを入れる
npm install @mui/material @emotion/react @emotion/styled
added 80 packages, and audited 393 packages in 12s
138 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
npm install @fontsource/roboto
added 1 package, and audited 394 packages in 3s
138 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
こちらも脆弱性は問題なさそう。
起動する
先にnpm run buildを実行、次にnpm startを実行
できました～！
動かしながらデバッグするためにはnpm startではなく、npm run devを使用してください
参考記事：
Material UIが動くかの確認
index.jsにこれを上書きします
import * as React from 'react';
import Button from '@mui/material/Button';
export default function ButtonUsage() {
return <Button variant="contained">Hello world</Button>;
}
う、うーん・・・まあよしとしましょう・・・？
とりあえず公式の手順通りに進めることができ、さらにボタンいっこ置けました。
デザインはおおまかにこうしたいというのがありますので、それに向けてコードをいじっていこうかと思います。
ここまでご覧頂いてありがとうございました
エルシアでした。ではまた～