0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

React で Todo アプリ(追加機能のみ)_作ってみた。

Posted at

React Todo-List App ![O#do Kg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091486/44da7956-8175-b49e-494f-fd0710ad68cd.png)

ReactDom とはreactに埋め込んだコードをHTMLに変換するもの JSX はJavaScript の中にHTMLみたいなものを描くことができる記法 Functional component 関数の形で書いていく ものでReactの方針で決まった。 古い書き方がClass component

Todoアプリの作成

・App.jsに記述したformをコンポーネントごとに切り分け

・src/components/Form.js Formコンポーネント作成(Todo入力部分)

・src/components/Todo.js Todoコンポーネント作成(Todoアイテム表示部分)

・App.jsでTodoを追加できるようにする

■用語

stateとprops、constructor

・constructorはclassをインスタンス化した時に最初に呼ばれる処理 1番最初に処理したいものを記述する ・stateはアプリケーションの中で保存される値 jsでデータを保存しておくための箱の事

class Form extends React Component {.png

onChange

イベントを表すpropsにはon[Event]という名前、onChangeでフォーム全体の入力値変更を検知

handlexx

イベントを処理するメソッドにはhandle[Event]という名前、イベントが発生した時に実行する関数イベントハンドラ  ![return (.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091486/66452f39-ffa1-544c-87fc-7fab1295869a.png) 

setState

stateに反映、この場合はstateのinputを指定、stateの更新 e : イベントの変数の事、イベントが渡されてくる (jsで管理されてるので、React Developer Tools で値を確認出来る) 何か送信する処理(onSubmitなど)で、preventDefault をしないとホストリクエストが起きてしまい、画面が切り替わってします。 ![handleChange = (e) = {.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091486/449f1166-a9f6-ff7a-c1e8-e0e15077e3a9.png) 

props : Reactのコンポーネントに渡す値、コンポーネントの再利用
const { text 1 = this. props;.png

配列todosのstateを作成
constructor(props) 25.png


Mapっていう配列を回すやつがある。配列を回して1つ1つのを表示していく。
配列で新しい要素を生成するときはkeyっている識別子をつけてあげなきゃいけない。Reactが管理するため。

setState を使ってstateを更新する。
constructor(props) 25.png

state配列のidとtextを取り出して、1つずつ表示
{this.state.todos.map (({ id, text }) = (.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?