React インストールからブラウザ表示まで

Reactのインストール

こんばんは！
今日はReactの開発をする時にさくっとパッケージインストールしていく流れと、npmだったりpackage.jsonといった前提知識もざっくり書いていきます！

前提知識

まず、Reactのインストールの前にNode.jsとnpmを用意する必要があります。
■Node.js
Node.jsは、JavaScriptのプログラムを実行する環境のこと。
この環境を使って、Reactのプログラムを作っていきます。

■npm
npmは、Node Package Managerの略称
Node.jsで作られたパッケージ管理ツールになる。
まずはそのパッケージを管理するための場所が必要になります。
その場所がpackage.jsonにあたります。

■package.json
package.jsonとは、そのアプリケーションで使いたいパッケージのバージョンだったり依存関係などを管理してくれるツール。
package.jsonファイルは、Reactインストール時に自動生成されます。

Node.jsとnpmの用意

Node.jsは少し手順が多いのでこちらを参照。

npmのインストール

$ npm --version

// もし６より下の場合は、npmを最新版をインストールしましょう。
$ npm install npm -g

create-react-appのインストール

次にReactアプリの雛形を自動生成できるcreate-react-appをインストールし、先ほどつけたプロジェクトの中に雛形を作成していきます。
ファイルやディレクトリも雛形の形で作成されているので、環境構築がとても楽になります。

// 雛形をインストール
npm install -g create-react-app

プロジェクトを作成

// 雛形のプロジェクトを作成
create-react-app ProjectName

// ディレクトリへ移動
cd ProjectName

npmサーバの起動

以下のコマンドを入力することで、npmサーバが起動し、Reactのプログラムをブラウザ表示させてくれます。

npm start

ブラウザでlocalhostにてアクセス

http://localhost:3000
このURLに飛ぶと先ほどインストールしたReactアプリの雛形のページが表示されます。