[react:day1] Reactをはじめます＆デバッグ環境も

環境

os: mac
editor: vs code

動機

react nativeを使いたい。ならまずはreactから手を出すか！

reactアプリのgeneratorをinstall

# generatorをinstall(facebook製だよ)
npm install -g create-react-app

# installが終わったらreactアプリをgenerete. my-appという名前のアプリ
create-react-app my-app

my-appディレクトリが作成されているので移動 & server起動

cd my-app

# server start
npm start

tips

npm startはpackage.jsonの scripts startを呼び出している

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.0"
  },
  "scripts": {
    "start": "react-scripts start", # ⇦これを呼び出している
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

サーバーが立ち上がればこの画面が表示される

Hello, world

index.jsを以下のように書き換える

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

var element = React.createElement('h1', { className: 'greeting'}, 'Hello, world')
ReactDOM.render(element, document.getElementById('root'));
registerServiceWorker();

saveすると画面が変わる

vs codeでデバッグできるように設定ファイルを作成する

こんな感じでデバッグできるようになる