ReactとAngular2の使い方やコードの違いを状態管理、CSS適用、単体テストで比較する：モダンなフロントエンド開発者になるためのSPA超入門（終）（1/3 ページ）

import React, { Component } from 'react';
//コンポーネントを読み込み
import Add from './Add';
import TodoList from './TodoList';
import '../styles/index.css';
 
class App extends Component {
  constructor(props) {
    super(props);
    // 関数のバインド
    this.addTodo = this.addTodo.bind(this);
    this.checkTodo = this.checkTodo.bind(this);	
    // stateの初期化
    this.state = {todos: []};
  }
 
  // 追加アクション
  addTodo(text) {
    const { todos } = this.state;
    this.setState(
      {
        todos: [...todos, { id: todos.length, text: text, isChecked: false }]
      }
    );
  }
 
  // チェックアクション
  checkTodo(id) {
    const todos = [...this.state.todos];
    todos.forEach((todo) => {
      if (todo.id === id) {
        todo.isChecked = !todo.isChecked;
      }
    });
    this.setState(
      { todos: todos }
    );
  }
 
  render() {
    const { todos } = this.state;
    // AddコンポーネントとTodoListコンポーネントの配置
    return (
      <div className="App">
        <Add addTodo={this.addTodo} />
        <TodoList todos={todos} checkTodo={this.checkTodo} />
      </div>
    );
  }
}
export default App;

  constructor(props) {
    super(props);
    // 関数のバインド
    this.addTodo = this.addTodo.bind(this);
    this.checkTodo = this.checkTodo.bind(this);	
    // stateの初期化
    this.state = {todos: []};
  }

  addTodo(text) {
    const { todos } = this.state;
    this.setState(
      {
        todos: [...todos, { id: todos.length, text: text, isChecked: false}]
      }
    );
  }

  render() {
    const { todos } = this.state;
    // AddコンポーネントとTodoListコンポーネントの配置
    return (
      <div className="App">
        <Add addTodo={this.addTodo} />
        <TodoList todos={todos} checkTodo={this.checkTodo} />
      </div>
    );
  }

import React, { Component } from 'react';
import '../styles/add.css';
 
class Add extends Component {
  render() {
    const { addTodo } = this.props;
    return (
      <div className="add">
        <h2 className="title">TODOサンプルアプリケーション</h2>
        <input
          type="text"
          className="inputBox"
          placeholder="TODOを入力"
          ref={(ref) => this.inputBox = ref}
        />
        <input
          type="button"
          className="addBtn"
          value="登録"
          onClick={() => {
            addTodo(this.inputBox.value);
            this.inputBox.value = '';
          }}
        />
      </div>
    );
  }
}
 
export default Add;