🫥

【React】勉強をしているので諸々メモ

2023/04/26に公開

そもそもReactとは

JavaScriptのライブラリです。
Reactはフレームワークではありません。
UI(ユーザーインターフェース)の作成に特化したライブラリです。

開発環境構築

Node.js

JavaScriptを動かすためにNode.jsを導入しましょう。
入れたら念の為

node -v

でnode.jsがインストールされているか確認しましょう。

補足

Node.jsは、パッケージコマンドのほかにオリジナルのコマンドが作れます。
package.jsonでいじれば

Create React App

Node.jsをインストールし終えたら

npx create-react-app test-app
cd test-app
npm start


localhost:3000(人によっては違う)が起動されてると思うので
これで開発環境構築完了です。

補足

- npm(node package manager)

npmはNode.jsのNodeパッケージ管理ツールのことです。
npm initで作成できる package.jsonに書いてある
パッケージの管理をnpmで行います。

npmコマンドを利用することでインターネット上のリポジトリから
Nodeパッケージをインストールしたり、
パッケージのバージョン管理をするというのが主なお仕事です。

パッケージ:設定ファイルや、実行ファイルが集まったもの

Node.jsをインストールすると一緒にnpmもインストールされるようになっています。

- yarn

npmと同じでNodeパッケージ管理ツールです。
package.jsonが使えます。
yarnのほうがnpmよりも高速で簡素です。

- npx(node package executer)

Nodeパッケージ実行ツールのことです。

npmとの主な違いは、npmでインストールされていないNodeパッケージでも
自動的に探してくれます。
package.jsonに記載がないパッケージでも勝手にインストールして
実行してくれます。

Discussion