読者です 読者をやめる 読者になる 読者になる

【React入門】 5 state概要

この記事では以下の画面を作成する。

f:id:kosumoro:20160806185619j:plain

https://cosmology233.github.io/sandbox/hatena/2016/08/07/

index.html

こちらと同じ。

kosumemo.hatenablog.com

scripts/script.js

class App extends React.Component {
  render() {
    return (
      <div>
        <AppHeader appName="My App" />
        
        <UsersList />
      </div>
    );
  };
};

class AppHeader extends React.Component {
  render() {
    return (
      <header>
        <h1>This is {this.props.appName}ʼs Header!</h1>
      </header>
    );
  };
};

class UsersList extends React.Component {
  constructor() {
    super();
    
    this.state = {
      "users": [
        {
          "name": "Taro",
          "age": 23
        },
        {
          "name": "Hanako",
          "age": 18
        }
      ]
    };
  };
  
  render() {
    const UserItem = this.state.users.map((user) => {
      return (
        <li>{user.name} ({user.age})</li>
      );
    });
    
    return (
      <ul>
        {UserItem}
      </ul>
    );
  };
};

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

propコンポーネントへ渡す変数だったのに対して、stateコンポーネント内で定義し、使用する変数である。

コンストラクタ内で初期化し、 render 内で使用することができる。