仕事を進める上でReact.jsについて教える機会が増えてきました。
React.jsがなんなのかは、各自ググっていただくとして、基本的なところで
何をどうやったらReact.jsでサービスが実装できるのか？
という点について理解できるよう、チュートリアルを作っていきたいと思います。
#前提
・ES5ベースで実装。
・npmを利用して必要なライブラリを追加。
・JSXのコンパイルはreactifyで行う。
・サーバサイドはnode.jsで実装
・DBはpostgreSQL(Herokuにデプロイするため)
上記、各単語は必要になった時点で触れていきますが、よくわからなければ調べてください。
※React.jsの技術情報を調べていると、よくES6ベースで書かれたソースをよく見るのですが、現状はブラウザ自体が一部しか対応してなかったり、知識レベルがバラバラな複数の技術者とチームで開発するということもあって、現時点ではES5ベースで実装するのが現実的かなと。
#準備
###node.jsのインストール
・実装に必要なライブラリは、jsのライブラリを管理しているnpmモジュールを利用して作業フォルダ以下にインストールします。React.jsもnpmでインストールします。
npmはnode.jsで実行されるモジュールのため、
node.jsを下記からダウンロードしてインストールしておく必要があります。
https://nodejs.org/en/download/
node.jsのインストールが終わったら、
さっそく、React.jsをnpmとやらでインストールします。
が、
インストールの前段階として、
npmで何かのライブラリをインストールするためには、
作業フォルダ直下にpackage.jsonというファイルを作成しておく必要があります。
DOS窓もしくはターミナルを起動し、
作業フォルダで、下記のコマンドを実行します。
cd {作業ディレクトリ}
npm init
下記のようにいろいろ質問されるので、デフォルト値（()内で表示されているもの）でよければそのままEnterで進めます。
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See 'npm help json' for definitive documentation on these fields
and exactly what they do.
Use 'npm install <pkg> --save' afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (tutorial)
最後に、この内容でpackage.jsonを作成するよ？と聞かれますので、良ければ「yes」とタイプします。
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to {作業ディレクトリ}/package.json:
{
"name": "tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)
作業ディレクトリにpackage.jsonが作成されているはずです。
###React.jsをインストール
前準備が長くなりましたが、下記のコマンドでReact.jsをインストールします。
npm install react --save
--saveオプションをつけると、package.jsonのdependenciesにreactが追記されます。
テスト用ライブラリなど本番環境では不要なライブラリをインストールする場合は、--save-devとして、devDependenciesに追記されるようにします。
これでReact.jsのソースが書けるようになりました。
次回から早速ソースを書いてみましょう。