Reactを勉強してみる。
youtubeに1時間で終わるReact入門があった。
Reactのインストール
npx create-react-app react-tutorial-youtubeコマンドは、新しいReactアプリケーションのテンプレートコードを指定したディレクトリ内にダウンロードするためのコマンドである。指定したディレクトリが存在しない場合、新しいディレクトリが作成される。このコマンドを使用することで、create-react-appをグローバルインストール/ローカルインストールする必要はない。
create-react-appはReactアプリケーションのテンプレートコードを指定したディレクトリ内にダウンロードするためだけのコマンドであるからだ。
ようは、指定したディレクトリ内に指定したディレクトリ内に新しいReactプロジェクトのためのテンプレートコードがダウンロードされたら良いということになる。
このため、「create-react-app」自体をインストールする必要がない。
こういうときは「npx」コマンドを使う。
従来のnpmコマンドではインストールしたパッケージを直接実行することができない。しかし、npxを使用することでインストールせずにパッケージを一時的に実行することができる。
結論として、Reactアプリを作成するときのコマンドが「npx create-react-app react-tutorial-youtube」であると覚えること。
「create-react-app」をグローバルインストール(ローカルインストールは不可)して、「create-react-app」コマンドを実行する必要があるけど、「npx create-react-app react-tutorial-youtube」コマンドを実行することで「create-react-app」をグローバルインストールする必要がない
C:\node\test0819>npx create-react-app react-tutorial-youtube
Creating a new React app in C:\node\test0819\react-tutorial-youtube.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1439 packages in 10m
241 packages are looking for funding
run `npm fund` for details
Initialized a git repository.
Installing template dependencies using npm...
added 69 packages, and changed 1 package in 49s
245 packages are looking for funding
run `npm fund` for details
Removing template package using npm...
removed 1 package, and audited 1508 packages in 18s
245 packages are looking for funding
run `npm fund` for details
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Created git commit.
Success! Created react-tutorial-youtube at C:\node\test0819\react-tutorial-youtube
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd react-tutorial-youtube
npm start
Happy hacking!
VSCodeで「npm start」コマンドを実行したらエラーが出たため、次のようにした。
VSCodeを終了させて、「管理者として実行」する。
次のようにSet-ExecutionPolicy RemoteSignedをした後に「npm start」したらエラーが出なくなった。
PS C:\node\test0819\react-tutorial-youtube> Set-ExecutionPolicy RemoteSigned
PS C:\node\test0819\react-tutorial-youtube> npm start
Compiled successfully!
You can now view react-tutorial-youtube in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.2.143:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Reactの概要
Reactはフレームワークではなくライブラリである。厳密には、Reactはユーザーインターフェース(UI)の構築に特化したJavaScriptのライブラリである。よく知られているjQueryもライブラリである。
Reactは、コンポーネントベースのアーキテクチャを提供し、UIを小さな部品に分割することで開発を効率的に行うことができる。Reactの主な特徴は、仮想DOM(Virtual DOM)の使用、コンポーネントの再利用性、そして状態管理など。
windows10(64bit)にReactをインストールする前にはNode.jsをインストールしておく必要がある。
これは、Reactがnpmレジストリに存在しており、Reactのインストールに必要なパッケージや依存関係をインストールするためにNode.jsが必要だからである。
Reactのnpmレジストリのページは以下のURLになる。
react – npm (npmjs.com) ExternalLink
コンポーネントとは何か?
コンポーネントは、Reactのコンポーネントは、アプリケーションを構成する部品である。UIの一部を表し、再利用可能な部品として機能する。コンポーネントは独立して定義され、プロパティ(props)を受け取ってデータを表示し、状態(state)を管理することがでる。コンポーネントは階層的に組み合わせることで複雑なUIを作成し、保守性と再利用性を高める。
追記2024年3月17日
【React入門】完全初心者OK！１から簡単なTodoアプリを作ってReactの１歩を踏み出してみよう ~Reactチュートリアル~ (youtube.com)について
1通り動画講座みて学習した。あとは動画の解説の細かいとこを勉強しよ。
追記2024年3月24日
今、復習しているけどinputタグにreadOnlyを消しても警告でないけど、なんでだ？
先週readOnly入れる前って警告出たっけ？覚えていないな。
そもそもinputタグにreadOnlyはhtmlでは不要だよな。
今度調べよ。