1. KeitaMoromizato

    Posted

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