React | 環境構築方法

2023年12月21日2024年9月12日

Reactとは，コンポーネンツをベースとしたユーザーインターフェイスを構築するためのフリーのフロントエンドJavaScriptライブラリーであり，Meta社によって開発された．

Reactは，Next.jsのようなフレームワークを利用してシングルページやモバイルもしくはサーバーレンダーアプリケーションの開発に利用することができる．

以下ページにてReactを学ぶことができる．

実施環境

OS: Windows11

以下URLより，自分のOSに合うNode.jsをインストールする．

VS Codeなどのエディターを開き，ターミナルで，"node -v", “npm -v"を各々実行するとバージョンが出力される．以下のように出力されればNode.jsのインストールは成功となる．

$ node -v
v20.10.0

$ npm -v
10.2.4

PCのデスクトップなどにディレクトリを作成し，エディターで開く．"my-app"という名前のプロジェクトを作成したければ，以下コマンドを実行する．

npx create-react-app my-app

実行後，プロジェクトが作成され，ディレクトリ構造は以下のようになる．

my-app/
|-- src/
|-- public/
|-- package-lock.json
|-- package.json
|-- README.md

以下コマンドを実行し，"my-app"ディレクトリに移動する．

cd my-app

以下コマンドを実行すると，development serverが開始する．

npm start

ブラウザが開き，以下画面が表示されれば成功となる．

以上