React.jsを使用する環境を整える

2019/3/24 未分類

Facebookとコミュニティによって開発されているJavascriptライブラリReact.jsを使用する環境を整える備忘録。

インストール

npm install -g create-react-app

create-react-app sample-app

sample-appというフォルダが作成される。

npm start

あるいはyarnを使っていたら

yarn start

デフォルトのポートは3000なので
http://localhost:3000
にアクセスすればアプリが表示される。ホットリロードによりファイルを編集して保存したら自動的に反映される。
表示されない場合はfirewallの設定を見直す。

フォルダに使用するポート内容を記述した.envというファイルを作成する。

PORT=4000

環境変数を変えながらやるのは以下の方法

PORT=4000 npm start

http://localhost:4000
にアクセス。nginxによりリバースプロキシしてもよい。firewallの設定も忘れずに。

npm run build

buildフォルダにファイルが作成されるので中身を任意の公開フォルダに移動すればよい。
リンクが相対アドレスの関係でうまくいかない場合はpackage.jsonでhomepageを追加する。

{
  "name": "your-project-name",
  "version": "0.1.0",
  "homepage": "./",
  .
  . 
  .
}