React入門

  • このエントリーをはてなブックマークに追加

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を作成し、保守性と再利用性を高める。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*