React¶
Webブラウザ上で動作するJavaScriptアプリケーション開発時に、シングルページで動的に変化するUIを作成するライブラリの一つがReactです。
JavaScript上でHTMLに近い記述を行うJSX構文が特徴的です。
さっと一巡り¶
hello-world¶
プロジェクトの雛形の生成¶
事前準備として、開発マシン上に Node.js とプログラミングツール（VSCode、WebStormなど）を入れておきます。
その上で、Vite（ビート）と呼ぶツールで雛形を生成します。（少し前のドキュメントでは、Create React Appを使う記述が主流でしたが、Create React Appが2022年で開発停止となりました）
work % npm create vite@latest hello-world -- --template=react-ts
Need to install the following packages:
create-vite@5.4.0
Ok to proceed? (y) y
> npx
> create-vite hello-world --template=react-ts
Scaffolding project in /Users/TTakahashi/study/web/react.js/hello-world...
Done. Now run:
cd hello-world
npm install
npm run dev
npm notice
npm notice New minor version of npm available! 10.7.0 -> 10.8.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.2
npm notice To update run: npm install -g npm@10.8.2
npm notice
生成後、ディレクトリに入って パッケージ群をインストールします。
work % cd hello-world
hello-world % npm install
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
added 213 packages, and audited 214 packages in 15s
41 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
雛形のアプリケーションを実行します。¶
hello-world % rpm run dev
VITE v5.3.4 ready in 812 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
画面に、アプリケーションのURLが表示されるので、Webブラウザでアクセスします。
アプリケーションのディレクトリ構成¶
hello-world +-- README.md +-- index.html +-- node-modules/ | +-- ...（多数のパッケージのディレクトリが生成） +-- package-lock.json +-- package.json +-- public/ +-- src/ +-- tsconfig.app.json +-- tsconfig.json +-- tsconfig.node.json +-- vite.config.ts
index.htmlの主要部は次です。
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
- <body>要素の直下に、id="root"とした要素が定義され、スクリプトとして、src.main.tsxが読み込まれる記載となっています。
srcディレクトリの下は
src +- App.css +- App.tsx +- assets/ +- index.css +- main.tsx +- vite-env.d.ts