1. KeitaMoromizato

    No comment

    KeitaMoromizato
Changes in body
Source | HTML | Preview
@@ -1,145 +1,163 @@
## コンポーネントの特徴
* 親子関係
* 状態を持つ
---
## 親子関係
コンポーネントは、親子関係になっている。
例) Page => Header => LoginButton
-```
+```Header.js
class Header extends Component {
render() {
return (
<div>
<LoginButton></LoginButton>
</div>
);
}
}
```
---
## 状態を持つ
コンポーネントは、自身の状態でDOMを書き換える
-```
+```LoginButton.js
class LoginButton extends Component {
render() {
const msg = this.state.loggeIn ? "ログアウト" : "ログイン";
return (
<div>{ msg }</div>
);
}
}
```
---
## React.jsでは
* **props**:親から渡される情報
* **state**:自Componentの状態
親から初期状態として**props**を渡し、**state**で自身の状態を管理する。
---
## Case1
親から渡された**props**で、振る舞いを変える。
例) 共通の振る舞いをするボタンで、表示するテキストを変えたい
-```
+```Button.js
class Button extends Component {
render() {
return (
<div>{ this.props.text }</div>
);
}
}
```
+```parent.js
+class Page extends Component {
+ render() {
+ return (
+ <LoginButton text="try Login" />
+ );
+ }
+}
+```
+
---
## Case2
イベントを受け、自身の**state**を変更する。
例) ボタンがクリックされたら、表示を変える
-```
+```Count.js
class Button extends Component {
add() {
this.setState({ count: this.state.count + 1 } );
}
render() {
return (
<div>
{ this.props.count }
<button onClick={ () => this.add() } />
</div>
);
}
}
```
---
## Case3
親から受け取った**props**を**state**の初期値とする。
-```
-class Button extends Component {
+```CountButton.js
+class CountButton extends Component {
constructor(props) {
this.state = { count: props.defaultCount };
}
render() {
return (
<div>
{ this.props.count }
<button onClick={ () => this.add() } />
</div>
);
}
}
```
+```parent.js
+class Parent extends Component {
+ render() {
+ return <CountButton defaultCount={5} />
+ );
+}
+```
+
---
# 「コンポーネントを作る」とは
---
## 1. そのページの中で、どこをコンポーネントにするか決める
「サイドバー」があって、その中に「カード」があって、...
---
## 2. コンポーネントへのInput(props)を決める
* どこが共通化できるのか(コンポーネントのJSXにベタ書き)
* どこが汎化できるのか(親からpropsを渡す)
---
## 3. そのコンポーネントの状態(state)を考える
そのコンポーネントが、どういう状態を持つかを考える
例) フォローボタン
* フォロー済み/未フォロー