開発環境構築の必要なし！思い立ったら1分で React + Material-UI を使う手順
お久しぶりです、むろです。 最近仕事で React 案件が増えてきたので、コードでプロトタイプを作る時にあると嬉しいライブラリの Material UI を使ってみることにしました。 というわけで、使うまでの手順をまとめます。
codesandbox と Material-UI を使う
npmとかよくわからない…いちから勉強する時間ない…けどちょっとだけ React を書いてみたい(Material-UI 使ってみたい)…という、 めんどくさがりなんだけど好奇心は旺盛な、私とあなたのための情報です。
codesandbox とは
オンラインで使える開発環境(サンドボックス)です。
Material-UI とは
Googleのデザインガイドライン(マテリアルデザイン)にそったデザインコンポーネントが揃ったライブラリです。 Material-UI
これを使うだけでマテリアルデザインなUIが簡単に実装できてしまいます！ 丸美屋の麻婆豆腐の素みたいなやつです。
codesandboxの使い方
Sandbox(react)を作成する
右上のナビ Creat sandbox → React
(Topページ左下のボタンがReactなら、そこから作成でも。テキストが Anguler になっている場合だと Anguler の Sandbox を作ることになるので注意です)
Sandbox で Material UI を使えるようにする
左下の Dependencies → Add Dependencie を押下。
出てきたポップアップに material-ui を入力して、出てきた @material-ui/core を選択する。
これでMaterial UI を使えるようになりました！
表示してみる
index.js を、Material UI の Usage にならって書き換える
(真ん中の列にコード、左側の列にブラウザでの表示がでます)
簡単ですが、以上です！ あとは ドキュメントを参考にしながら色を変えたり大きさを変えたりして楽しみましょう٩( 'ω' )و
