Reactチュートリアルをやっていってみるその3

これは

Reactチュートリアルをやっていく記事です。

参考

ja.reactjs.org

チュートリアル：React の導入

概要

Reactは宣言型で効率的かつ柔軟なJavaScriptライブラリ。
UIをコンポーネントという独立した部品として扱うことで簡単に作ることができるようにしている。

まずはReact.Componentから。

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

ShoppingListはReactのコンポーネントのクラスあるいはReactコンポーネントの型。
コンポーネントはpropsパラメータを受け取り、renderメソッドから表示するビューの階層構造を返す。

renderではReact要素と呼ばれる軽量な記述形式を返す。
React開発者は"JSX"と呼ばれる構文を使用している。

~

の部分はコンパイル後にReact.createElement('div')に変換される。

JSXではJavaScriptのほぼ全ての機能を利用することができる。

今日はここまで。