導入には create-react-app を使います。 react の環境をすぐに用意してくれるライブラリで、面倒な build の設定などをしてくれた状態で、すぐにアプリを開発することができます。
$ npx create-react-app react-redux-todo-tutorial
実行が完了したら、以下のコマンドを打ちます
$ cd react-redux-todo-tutorial
$ npm start
すると、ブラウザが起動して Welcome to React の文言が見えます。
src/App.js を開いて、Welcome to React の文言を変更します。
変更した文言は、すぐさまブラウザにも反映されます。
App.js を以下のように書き換えます
import React, { Component } from 'react';
class App extends Component {
constructor(props){
super(props);
this.state = {
doneFlag: false
}
}
done = () => {
this.setState({ doneFlag: true })
}
render() {
return (
<div>
{this.state.doneFlag ? <del>any todo</del> : <span>any todo</span>}
<button onClick={()=>{ this.done() }}>Done</button>
</div>
);
}
}
export default App;
React Developer Tools を使って、React をデバッグしよう。 google chrome のこのエクステンションを使うと、React のデバッグがしやすくなります。
React Developper Tools を有効にすれば、chrome の開発者画面のタブに「React」という項目が現れます。 このタブの中では渡って来ているデータなどを確認したり state などを手元で変更できます。
