Reactを触ってみる。propsとstateのサンプルコード

Reactを触ってみる

興味本位でReactを触ってみようと思ったので、
Reactについてのメモ書きです。

propsの利用について

App.js

import React from 'react';

const App = () => {
  return (
    <div>
      <User name={"Taro"} age={10}/>
      <User name={"Hanako"} age={20}/>
    </div>
  )
}

const User = (taro) => {
  return <div>Hi! I am {taro.name}, and {taro.age} years old!</div>
}

export default App;

上記のコードを実行すると、ブラウザ上で以下のように表示されます。

Hi! I am Taro, and 10 years old!
Hi! I am Hanako, and 20 years old!

defaultProps

propsに初期値を設定します。
例えば以下のように配列を使って表示させる場合に、defaultpropsを利用することができます。

App.js

import React from 'react';

const App = () => {
  const profiles = [
    { name: "Taro", age: 10 },
    { name: "Hanako", age: 20},
    { name: "guest" }
  ]
  return (
    <div>
      {
        profiles.map((profile, index) => {
          return <User name= {profile.name} age= {profile.age} key={index} />
        })
      }
    </div>
  )
}

const User = (user) => {
  return <div>Hi! I am {user.name}, and {user.age} years old!</div>
}

User.defaultProps = {
  age: 0 
}

export default App;

ブラウザ上では以下のように表示される。

Hi! I am Taro, and 10 years old!
Hi! I am Hanako, and 20 years old!
Hi! I am guest, and 0 years old!

コード上ではageのところを定義しなかったが、コード下部のUser.defaultProprで
ageの初期値を定義しているため、guestさんの年齢が0歳に設定された。

stateについて

直訳どおり、状態のこと。
以下のようなカウント画面を作成し、+1ボタンを連打すると、stateの状態が更新され続けます。

App.js

import React, { Component } from 'react';

const App = () => (<Counter></Counter>) 

class Counter extends Component {
  constructor(props) {
    super(props)
    this.state = { count:0 }
  }

  clickPlusButton = () => {
    this.setState( { count: this.state.count + 1 })
  }

  render() {
    return (
      <React.Fragment>
        <div>count: { this.state.count }</div>
        <button onClick={this.clickPlusButton}>+1</button>
      </React.Fragment>

    )
  }
}

export default App;

stateの状態はChromeの拡張機能のReact Developer Toolなどで確認することができます。