Reactを始めたい人へ。

この記事は下記のような人に役に立てるように書いていければと思います。

• これからReact学びたい！けど何から初めて良いかわからない
• モダンフロントってどこか苦手なレガシー思考な人
• Reactに書かれている記事は見たけど、よくわからない部分が多い
• 開発環境とか整えるのが面倒

これから勉強したい人、今勉強しているけどつまずいてモチベーション上がらない人の助けになればと思います。

僕はまずチュートリアルから開始しました。
Reactチュートリアル

コンポーネント

データが変更されるとReactは再レンダリングします。

class List extends React.Component {
  render() {
    return (
      <div className="list">
        <h1>List for {this.props.name}</h1>
        <ul>
          <li>hoge</li>
          <li>hoge2</li>
          <li>hoge3</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <List name="Test" />

上記コードのListはReactコンポーネントクラス、Reactコンポーネント型と呼びます。
コンポーネントはPropsと呼ばれるパラメーターを受け取り、renderメソッドで表示するビューの階層構造を返します。

renderについて

renderは軽量な記述形式であるReact要素を返します。
それを簡単に記述できるのが『JSX』と呼ばれる構文です。
renderの中で定義された下記のコードは

<div className="list">
  <h1>List for {this.props.name}</h1>
  <ul>
    <li>hoge</li>
    <li>hoge2</li>
    <li>hoge3</li>
  </ul>
</div>

ビルドすると以下のコードに変換される。

return React.createElement('div', {className: 'list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

コンポーネントまとめ

単純なコンポーネントを組み合わせることで複雑なUIを再現するというのが一般的な実装です。