owned this note
owned this note
Published
Linked with GitHub
# 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
```
![](https://i.imgur.com/4kQBI98.jpg)
4. Hello,React!を表示してみる
5. デフォルトで入ってる`src`ディレクトリの中身は今回使わないので削除
準備完了╰(*´︶`*)╯♡
<br>
# Step2 - index.js と Components を作成する
src ディレクトリの中に`index.js` ファイルを作る
index.js
```javascript=
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
```javascript=
import React from 'react';
class App extends React.Component {
render() {
return(
<div>Hello, React</div>
);
}
}
export default App;
```
index.js に追加、変更する
```javascript=
import App from './components/App';
```
`<div>hoge</div>` を `<App />` に変更する
<br>
# Step3 - Todoの見た目を作っていく
App.js - returnの中身書き換え
```javascript=
<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
```javascript=
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 をインポートする
```javascript=
import Form from './Form';
{/* Form コンポーネント を書き換える */}
<Form />
```
これで最初に作った見た目と変わらないか確認!
変わってなければ、コンポーネント化成功( ̄^ ̄)ゞ
3. Form を動的なものにする
Form.js
```javascript=
// class Form extends React.Component { の下に追加
constructor(props) {
super(props)
// this.state の中には初期値が入る
this.state = {
input: ""
};
}
```
4. form タグの中身を書き換える
Form.js
```javascript=
<form>
<input
type="text"
value={this.state.input}
onChange={this.handleChange}
/>
<button>追加</button>
</form>
```
handleChange メソッドの追加
```javascript=
handleChange = e => {
this.setState({ input: e.currentTarget.value })
};
```
動的な Form コンポーネントになりました!
<br>
## Todo コンポーネントの作成
1. `Components`の中にTodo.js ファイルを作る
Todo.js
```javascript=
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
```javascript=
<React.Fragment>
犬の散歩
<button>編集</button>
<button>削除</button>
</React.Fragment>
```
※`React.Fragment` タグで囲うのを忘れずに!
3. TodoにPropsを渡す
App.js
```javascript=
<li>
<Todo id={0} text="犬の散歩" />
</li>
```
4. Todo.js で Props を反映させる
render() { の下に追加する
```javascript=
const { text } = this.props
```
5. "犬の散歩" を `{text}` に変更する
中かっこ→{}で囲うのは、JSX内でJSを使いたい時に{}使用すると反映される
6. 残り2つのTodoもJSに変えましょう!
App.js
```javascript=
<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
```javascript=
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 を消して以下を追加する
```javascript=
this.setState({input: ""});
```
これで、追加を押すとformの中身が消えるようになったよ٩( 'ω' )و
3. App.js で state を作る
App.js 以下のコードを追加
```javascript=
constructor(props) {
super(props)
// stateの定義
this.state = {
todos: [] //todosの初期値の中身は空っぽ
};
}
```
`<ul>` の中のコードを以下に変更する
```javascript=
{this.state.todos.map(({ id, text }) => {
return (
<li key={id}>
<Todo text={text} />
</li>
);
})}
```
変数の宣言をする
`let currentId = 0;`
handleSubmitメソッドを作る
```javascript=
handleSubmit = text => {
const newTodo = {
id: currentId,
text,
};
const newTodos = [...this.state.todos, newTodo]
this.setState({ todos: newTodos });
currentId++;
}
```
form に onSubmit イベントを作り、handleSubmitメソッドをわたす
```javascript=
onSubmit={this.handleSubmit}
```
Form.js内のhandleSubmitメソッドでpropsを渡す
```javascript=
this.props.onSubmit(this.state.input);
```
Todoの追加ができるようになりました!わーい( ´ ▽ ` )ノ
<br>
# Step5 - Todo を削除する機能の実装
1. Todo.js で `handleClickDelete` メソッドを作る
```javascript=
handleClickDelete = () => {
const { onDelete, id } = this.props;
onDelete(id)
}
```
2. onClickイベントの作成
<button //ここにonClickイベントを追加>削除</button>
```javascript=
onClick={this.handleClickDelete}
```
3. App.js に props を渡す
Todo コンポーネントに以下のprops を追加する
```javascript=
id={id}
onDelete={this.handleClickDelete}
```
4. `handleClickDelete` メソッドを作る
```javascript=
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 の中に以下を追加する。
```javascript=
editing: false
```
初期値はfalse
2. 編集専用のコンポーネントを作る
components ディレクトリの中で `EditTodo.js` コンポーネントを作る
EditTodo.js - 以下をコピペする
```javascript=
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>` の中身を書き換える
```javascript=
{ editing ? (
<EditTodo text={text} />
) : (
<Todo
id={id}
text={text}
onDelete={this.handleClickDelete}
/>
)}
```
4. 編集ボタンの中に onClickイベントを作る
`onClick={this.handleClickEdit}`
handleClickEdit メソッドの作成
```javascript=
handleClickEdit = () => {
const { onChange, id, editing} = this.props
onChange(id, "editing", !editing);
}
```
5. App.js
App.js
```javascript=
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
```javascript=
constructor(props) {
super(props)
this.state = {
text: props.text
};
}
```
7. return の中を書き換える
```javascript=
<div>
<input
type="text"
value={this.state.text}
onChange={this.handleChange}
/>
</div>
```
8. handleChange メソッドの作成
```javascript=
handleChange = e => {
this.setState({ text: e.currentTarget.value})
}
```
9. 更新ボタンの作成
`<button onClick={this.handleSubmit}>更新</button>`
```javascript=
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}
```
メソッドの作成
```javascript=
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 });
};
```
完成しましたー!!!!!!
お疲れ様でした╰(*´︶`*)╯♡