[React] なんもわからん
あざらし初めてReactを触るので、基本～～～業務で使った技術まで幅広くメモしていく
※途中まで別場所にまとめていたものをコピペしています
あざらしReactってなに
React とは、Facebook 社が開発した Web サイト上の UI パーツを構築するための JavaScript ライブラリ
Web の3大ライブラリのひとつ（らしい）
⇒React、Vue、Angular
だけども、React 自体はフレームワークでなく、あくまでもUIを構築するだけのライブラリ
⇒ React をつかって開発されたフレームワークが Next.js
っょみ
- コーディングコストが少ない
- 開発規模が大きくなっても管理しやすい
- React ができればマルチプラットフォーム開発にも役立つ（一回挫折した）
参考にした
あざらし今回一緒につかっていく仲間ﾀﾁ
Node.js
サーバーサイドでJavaScriptを使うためのプラットフォーム
これがないとはじまらないのでインスコしておこう
TypeScript
React の開発言語は JavaScript と TypeScript から選べる
今回は勉強もかねて Typescript SWC を選択する
※事前に npm install -g typescript をしてインストールしておこう
Vite
プロジェクト作成、ビルドなどなどに使うツールで超高速
≒ Create React App
ESLint
JavaScript や TypeScript などの静的解析ツールのこと
単純な構文エラーやプロジェクト固有のコーディング規約を定義することができる
Prettier
コードを整形してくれる強い味方（VSCodeにもある）
あざらしViteで新規プロジェクトを生成する
npm create vite@latest
で、あとは対話形式でプロジェクトを作成できる
めちゃ早。体感、Visual Studio を使って C# 立ち上げる時の2分の1以下くらい！
cd {プロジェクト名}
npm install
npm run dev
で初期画面を実行できる。もう早い。はろーわーるどぅ
あざらしプロジェクト構成
ファイル名／フォルダ名 | 内容
--------------- | -------------------------------
node_modules | インスコしたパッケージが入っている。あまりいじることはない
src | ソースの本体
.gitignore | git にうｐしないわよリスト
index.html | 初期画面、タイトルなど
package.json | vite のバージョン、パッケージ情報など
vite.config.js | プロジェクトの設定ファイル。プラグインや外部ファイルなどの設定
※今回は TypeScript なので拡張子は js ではなく ts
あざらしきになるライブラリ
material-ui
React で一番使われているであろうライブラリ
これさえあればすぐに整った UI ができちゃう！？
インスコ方法
npm install @mui/material @emotion/react @emotion/styled
テンプレートがいっぱいある！！？？！天才では？？これでもうよくない？？