# React勉強会@Lagoon

# introduction
### この勉強会の対象者

---

- React初心者、初めて触ってみる方
- Reactに興味がある方
- ProgateでJavaScriptコースクリアした方
- JavaScriptの基本がわかってる方（class,import,export,アロー関数etc..）
<br>

### 今回作成するTODO APPの仕様

---
- Todoを作れる
- Todoを一覧表示できる
- Todoを削除できる
- Todoを編集できる
<br>

# Step1 - Set Up

1. プロジェクト作成

npx create-react-app react-todo-practice

2. ディレクトリ移動

cd react-todo-practice

3. サーバ起動

npm start


4. Hello,React!を表示してみる

5. デフォルトで入ってる`src`ディレクトリの中身は今回使わないので削除

準備完了╰(*´︶`*)╯♡
<br>

# Step2 - index.js と Components を作成する
src ディレクトリの中に`index.js` ファイルを作る

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<div>hoge</div>, document.getElementById('root'));

* ReactDOMとはReactで作った要素をHTMLに変換して埋め込んでくれるもの
* index.htmlの中の`<div id="root"></div>`の中に埋め込まれる
* Appをインポートして第一引数で読みこませる

src ディレクトリの中に`components`ディレクトリを作成し、その中に`App.js`ファイルを作る

App.js

import React from 'react';

class App extends React.Component {
  render() {
    return(
      <div>Hello, React</div>
      );
    }
  }
export default App;

index.js に追加、変更する

import App from './components/App';

`<div>hoge</div>` を `<App />` に変更する

<br>

# Step3 - Todoの見た目を作っていく

App.js - returnの中身書き換え

<React.Fragment>
    <h1>TODO APP</h1>
    {/* Form コンポーネント */}
    <form>
      <input type="text" />
      <button>追加</button>
    </form>
    
    {/* Todo コンポーネント */}
    <ul>
      <li>
        {/* ここから下を command + X でカットする */}
          犬の散歩
        <button>編集</button>
        <button>削除</button>
        {/* ここまで */}
      </li>

      <li>
        {/* ここから下を削除する */}
          JavaScriptの勉強
        <button>編集</button>
        <button>削除</button>
        {/* ここまで */}
      </li>

      <li>
        {/* ここから下を削除する */}
          腹筋する
        <button>編集</button>
        <button>削除</button>
        {/* ここまで */}
      </li>
    </ul>
</React.Fragment>

<br>

# step4 - 各機能をコンポーネント化していく
## Form コンポーネントの作成

1. `Components`の中にForm.js ファイルを作る

Form.js

import React from 'react';

class Form extends React.Component {
  render() {
    return (
      <form>
        <input type="text" />
        <button>追加</button>
      </form>
    );
  }
}

export default Form;

2. App.js　- Form.js をインポートする

 import Form from './Form';

 {/* Form コンポーネント を書き換える */} 
 <Form />

これで最初に作った見た目と変わらないか確認！
変わってなければ、コンポーネント化成功(￣^￣)ゞ

3. Form を動的なものにする

Form.js

// class Form extends React.Component { の下に追加

constructor(props) {
    super(props)
    // this.state の中には初期値が入る
    this.state = {
      input: ""
    };
  }

4. form タグの中身を書き換える

Form.js

<form>
    <input
      type="text"
      value={this.state.input}
      onChange={this.handleChange}
    />
    <button>追加</button>
</form>

handleChange メソッドの追加

handleChange = e => {
    this.setState({ input: e.currentTarget.value })
  };

動的な Form コンポーネントになりました！
<br>

## Todo コンポーネントの作成

1. `Components`の中にTodo.js ファイルを作る

Todo.js

import React from 'react';

class Todo extends React.Component {
  render() {
    return (

//     ここにJSXを書く

    );
  }
}

export default Todo;

App.js でインポートする

import Todo from './Todo';

2. return の中に App.jsから command + X したコードを貼る

Todo.js

<React.Fragment>
      犬の散歩
      <button>編集</button>
      <button>削除</button>
</React.Fragment>

※`React.Fragment` タグで囲うのを忘れずに！

3. TodoにPropsを渡す

App.js

 <li>
  <Todo id={0} text="犬の散歩" />
 </li> 

4. Todo.js で Props を反映させる

render() { の下に追加する

const { text } = this.props

5. "犬の散歩" を `{text}` に変更する

中かっこ→{}で囲うのは、JSX内でJSを使いたい時に{}使用すると反映される

6. 残り２つのTodoもJSに変えましょう！

App.js

<ul>
  <li>
    <Todo id={0} text="犬の散歩" />
  </li>

  <li>
    <Todo id={0} text="JavaScriptの勉強する" /> 
  </li>

  <li>
    <Todo id={0} text="腹筋する" />
  </li>
</ul>

こんな感じでコンポーネントの再利用ができます！
では、これを動的なものに変えていきましょう(￣^￣)ゞ
<br>

## Todo を追加する実装

1. form タグに onSubmitイベントを指定する

Form.js

onSubmit={this.handleSubmit}


// handleSubmit メソッドを作る
handleSubmit = e => {
    e.preventDefault()
    if (!this.state.input) return;
    console.log(this.state.input)    
};

input の中身を console.log で見てみよう！

`e.preventDefault()` とはPostリクエストが起きてページ遷移しないためにするもの

2. state の変更

Form.js

console.log を消して以下を追加する

this.setState({input: ""});

これで、追加を押すとformの中身が消えるようになったよ٩( 'ω' )و

3. App.js で state を作る

App.js　以下のコードを追加

constructor(props) {
    super(props)
//   stateの定義
    this.state = {
      todos: [] //todosの初期値の中身は空っぽ
    };
  }

`<ul>` の中のコードを以下に変更する

{this.state.todos.map(({ id, text }) => {
    return (
      <li key={id}>
        <Todo text={text} />
      </li>
    );
  })}

変数の宣言をする
`let currentId = 0;`

handleSubmitメソッドを作る

handleSubmit = text => {
  const newTodo = {
    id: currentId,
    text,
  };
  const newTodos = [...this.state.todos, newTodo]
  this.setState({ todos: newTodos });
  currentId++;
}

form に onSubmit イベントを作り、handleSubmitメソッドをわたす

onSubmit={this.handleSubmit}

Form.js内のhandleSubmitメソッドでpropsを渡す

this.props.onSubmit(this.state.input);

Todoの追加ができるようになりました！わーい( ´ ▽ ` )ノ
<br>

# Step5 - Todo を削除する機能の実装

1. Todo.js で `handleClickDelete` メソッドを作る

handleClickDelete = () => {
    const { onDelete, id } = this.props;
    onDelete(id)
  }

2. onClickイベントの作成

<button //ここにonClickイベントを追加>削除</button>

onClick={this.handleClickDelete}

3. App.js に props を渡す

Todo コンポーネントに以下のprops を追加する

id={id}     
onDelete={this.handleClickDelete}

4. `handleClickDelete`　メソッドを作る

handleClickDelete = id => {
      const newTodos = this.state.todos.filter(todo => todo.id !== id)
      this.setState({ todos: newTodos });
    };

Todo を削除できるようになったよ！わーい╰(*´︶`*)╯
<br>

# Step6 - Todo を編集する機能の実装

1. Todo を作成する属性の中に `editing` を追加する

App.js - handleSubmitメソッドのnewTodo の中に以下を追加する。

editing: false

初期値はfalse

2. 編集専用のコンポーネントを作る

components ディレクトリの中で `EditTodo.js` コンポーネントを作る

EditTodo.js - 以下をコピペする

import React from 'react';

class EditTodo extends React.Component {
  render() {
    return (
      <div>hoge</div>
    );
  }
}

export default EditTodo;

App.js でインポートする

`import EditTodo from './EditTodo';`

3. Todo コンポーネントに `editing` を渡す

map メソッドの引数に

`<li>` の中身を書き換える

{ editing ? (
    <EditTodo text={text} />
      ) : (
        <Todo 
          id={id}
          text={text}
          onDelete={this.handleClickDelete}
        />
  )}

4. 編集ボタンの中に onClickイベントを作る

`onClick={this.handleClickEdit}`

handleClickEdit メソッドの作成

handleClickEdit = () => {
    const { onChange, id, editing} = this.props
    onChange(id, "editing", !editing);
  }

5. App.js

App.js

handleClickEdit = (id, key, value) => {
      const newTodos = this.state.todos.map(todo => {
        if (todo.id === id) {
          return {
            ...todo,
            [key]: value
          };
        }
  
        return todo;
    });
  
      this.setState({ todos: newTodos });
    };

6. EditTodo.js に state を持たせる

EditTodo.js

constructor(props) {
    super(props)

    this.state = {
      text: props.text
    };
  }

7. return の中を書き換える

<div>
      <input
        type="text"
        value={this.state.text}
        onChange={this.handleChange}
      />
    </div>

8. handleChange メソッドの作成

handleChange = e => {
    this.setState({ text: e.currentTarget.value})
  }

9. 更新ボタンの作成

`<button onClick={this.handleSubmit}>更新</button>`

handleSubmit = () => {
    const { onSubmit, id } = this.props;
    if (!this.props.text) return;
    onSubmit(id, this.state.text);
  };

10. App.js の EditTodo に props を渡す

id={id}
onSubmit={this.handleUpdateTodoText}

メソッドの作成

handleUpdateTodoText = (id, text) => {
      const newTodos = this.state.todos.map(todo => {
        if (todo.id === id) {
          return {
            ...todo,
            text,
            editing: false
          };
        }
  
        return todo;
      });
  
      this.setState({ todos: newTodos });
    };

完成しましたー！！！！！！
お疲れ様でした╰(*´︶`*)╯♡