React | 環境構築方法

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

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

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

React

実施環境

OS: Windows11

環境構築方法

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

Node.js | Downloads

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

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

以上