Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@rh_

初めてのReact.jsでTodoアプリ実装してみた

参考

細かい事はこちらに何もかも書いてあります

初めてのReact.jsでTodoアプリ実装してみた

ブラウザ

スクリーンショット 2017-04-22 19.48.46.png

実装

コピペで動きます

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>


8
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
8
Help us understand the problem. What is going on with this article?