React 開発環境構築

モダンUIに親しみたい。ということでReactを触る。
目標の構成はこんな感じ。

インストール

React開発環境をWindowsで構築するため、以下を導入する。

  • Node.js
  • React
  • bootstrap
  • axios

2017/05/14 修正。公式のインストール手順を記載。
Getting Started – React

  1. node.js公式からインストーラをダウンロード
  2. node.jsをインストール
  3. node --version
  4. npm --version
  5. npm install -g create-react-app
  6. create-react-app my-app
  7. cd my-app
  8. npm install axios
  9. npm start

6番目の手順完了に数分かかる。

動作確認

ブラウザより「localhost:3000」に接続する。

フォルダ構成

my-appのフォルダ構成は以下のようになった。

my-app
│  .gitignore
│  package.json
│  README.md  
├─node_modules
│  └─(Node.jsのモジュール群。割愛)
├─public
│      favicon.ico
│      index.html
└─src
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg

bootstrap

bootstrapはCDN利用。(もちろんファイルをDLして配置してもよい)
Redirecting…

2017/05/14 旧手順削除。