参考
ブラウザ
実装
コピペで動きます
index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="ja">
<head>
<!-- 参考記事 https://www.kirupa.com/react/simple_todo_app_react.htm -->
<!-- タイトルを決める -->
<title>リアクトでtodoリストを作ろう！!</title>
<!-- スクリプトを読み込む -->
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<style>
body {
padding: 50px;
background-color: #66CCFF;
font-family: sans-serif;
}
.todoListMain .header input {
padding: 10px;
font-size: 16px;
border: 2px solid #FFF;
}
.todoListMain .header button {
padding: 10px;
font-size: 16px;
margin: 10px;
background-color: #0066FF;
color: #FFF;
border: 2px solid #0066FF;
}
.todoListMain .header button:hover {
background-color: #003399;
border: 2px solid #003399;
cursor: pointer;
}
.todoListMain .theList {
list-style: none;
padding-left: 0;
width: 255px;
}
.todoListMain .theList li {
color: #333;
background-color: rgba(255,255,255,.5);
padding: 15px;
margin-bottom: 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<!-- div要素を定義する -->
<div id="container">
</div>
<!-- スクリプトを埋め込む
バベルを使う -->
<script type="text/babel">
// divid#containerに対してリアクトを作用させるよという事を決める
var destination = document.querySelector("#container");
var TodoItems = React.createClass({
render: function() {
//todoEntriesという変数を追加し、渡されたエントリpropの値をTodoListコンポーネントのthis.state.items値に基づいて格納します。甘い！さて、私たちのtodoEntries変数は、それぞれがタスクとキーを格納するオブジェクトの束を含む配列を格納します。残りの部分は、データを表示するために使用されるHTML要素を作成することだけです。
var todoEntries = this.props.entries;
//マップ関数を使用してtodoEntries内のすべてのアイテムを繰り返し処理し、createTasks関数を呼び出して各エントリのリスト要素を作成します。
//これらのリスト要素は動的に作成されるため、以前に作成したポイントを繰り返し表示するには、キー属性を指定し、それぞれに固有の値を与えることで、Reactがそれらを追跡できるようにする必要があります。最初にタスクを保存したときに、この問題のこの部分をすでに解決しました。
function createTasks(item) {
return <li key={item.key}>{item.text}</li>
}
var listItems = todoEntries.map(createTasks);
//list要素のこのコレクションは、listItems変数/配列によって完全に処理され、格納されます。この時点で残っているのは、配列内のリスト要素から画面上にレンダリングされた要素をリストすることだけです。これを達成するには、次の強調表示された行を追加してください：
return (
<ul className="theList">
{listItems}
</ul>
);
}
});
var TodoList = React.createClass({
getInitialState: function() {
//getInitialStateはコンポーネントがレンダリングされる前に呼び出される
//ライフサイクルメソッドを指定しています。
//このメソッドの内部では、itemsという空の配列を作成し、
//このコンポーネント内のどこからでもthis.state.itemsを介してアクセスできます。
return {
// 配列を返す
//todoListが画面に描画されている状態です
//その状態で、todoListは空っぽの配列を返しています
items: []
};
},
addItem: function(e) {
//<form onSubmit={this.addItem}>が見張ってる関数
// まず、状態オブジェクトのitemsプロパティへの参照を格納するitemArrayという配列を作成します。
var itemArray = this.state.items;
//この配列を取得したら、入力要素から最近提出されたテキスト入力を追加します：
itemArray.push(
//console.log("要素を配列に追加！")
{
text: this._inputElement.value,
key: Date.now()
}
);
this.setState({
items: itemArray
});
//サブミットしたらテキストを空白にする
this._inputElement.value = "";
//preventDefaultメソッドは、デフォルトのonSubmitイベントをオーバーライドするようにします。これを行う理由は少しわかりにくいですが、次のことを確認することです：フォームを送信するときにやりたいことは、addItemメソッドを呼び出すことです。デフォルトの動作を停止しなかった場合、フォームを送信するときに、アプリケーションは必要に応じてaddItemを正しく呼び出します。また、ブラウザのデフォルトのPOST動作がトリガされます。これは間違いありません。 onSubmitイベントがデフォルトの動作を行わないようにすることで、ページを更新する不要なPOSTアクションのような不要な副作用なしにaddItemメソッドを呼び出すことができます。
e.preventDefault();
//サブミットするたびに起動する
console.log("発火！！！！");
console.log(itemArray);
},
render: function() {
return (
<div className="todoListMain">
<div className="header">
<form onSubmit={this.addItem}>
<input ref={(a) => this._inputElement = a}
placeholder="todoリストを作ろう！">
</input>
<button type="submit">追加！</button>
</form>
</div>
<TodoItems entries={this.state.items}/>
</div>
);
}
});
ReactDOM.render(
<div>
<TodoList/>
</div>,
// さっき指定した変数を返す的な
destination
);
</script>
</body>
</html>