はじめに

Fullstack React: 30 Days of React の意訳です。

ちょいちょい読んでるのでせっかくなので訳そうと思った次第。飽きるまで続きます。かなり意訳です。

Day1 - What is React?

ぼく自身はjQueryおじさんで、あんまりJSまわりへの理解も深くないのでなんか間違っていたら指摘よろしくです。

本編

Day1ではReactでなんであるかを説明した。Day2では、Reactエコシステムの一部、ES6とJSXを見ていくよ。

JSX/ES5/ES6 WTF??!

Reactのことをネットで調べてるとJSXとかES5,ES6とかって用語出てきて、なんじゃこりゃってなると思います。

ES5というのは、ECMAScriptのバージョン5(2009年)です。いわゆる"通常のJavaScript"。ほとんどのブラウザでサポートされてます。

ES6はJavaScriptの新しいバージョン（2015年）で、いろんな機能や構文が追加されてます。 ES6は、主要なブラウザすべてでほぼ完全にサポートされてますが、毎度の如くIEの一部のバージョンでサポートされてなかったりします（IE11はES6をサポートしてないが、マーケットシェアが11%ある）。

ES6ではいろいろ便利な機能が追加されてますが、これらをより多くのブラウザで使えるようにするには次のことをしないといけません。

ES6 => ES5 への変換
ES6の機能がブラウザ側に実装されてないときに、代わりに同じ動きをする機能を追加する（ include a shim or polyfill）

この30 Days of Reactの書かれているコードは簡単にES5に変換できます。ES6を使う場合はまずはじめにその機能を説明してから、その機能を使うから安心してね

すでに見たように、すべてのReactコンポーネントはrenderメソッドを持ちます。JSX（JavaScript eXtension）はHTMLライクにJavaScriptをかけるようにしてくれるReactの拡張です。

以前はJavaScript内にHTMLを書き込むのはダメなこととされてましたが、機能とビューをあわせることでビューに対して見通しのよいコードが書けるようになりました

H1要素をレンダリングするReactコンポーネントを例に見てみましょう。JSXでは、HTMLのように要素を書くことができる。

class HelloWorld extends React.Component {
  render() {
    return (
      <h1 className='large'>Hello World</h1>
    );
  }
}

HelloWorldコンポーネントの render（） 関数はHTMLを返すように見えますが、実際に返すのはJSXになります。 JSXは実行時に次のような通常のJavaScriptに変換される（要はJSXを使わないでReactを使おうとする以下のように書かないといけない）。

class HelloWorld extends React.Component {
  render() {
    return (
      React.createElement(
        'h1',
        {className: 'large'},
        'Hello World'
      )
    );
  }
}

JSXはHTMLのように見えますが、実際は React.createElement（） をわかりやすくするためのものです。実際に出力されるHTMLは以下のようになります。

<h1 class='large'>Hello World</h1>

ところで最初のextendsはES6の構文です。オブジェクト指向っぽい書き方ができるようになっていた、ES5では次のように変換されます。var HelloWorld = function() {} Object.extends(HelloWorld, React.Component) HelloWorld.prototype.render = function() {}

JSXはJavascriptなのでclassやnewのような予約語を使えません。

ReactではclassNameとアトリビュートがあります（H1のクラス名を指定するのに使ってるやつ）。他にforはhtmlForを使います（forが予約語のため）。

React.createElement() を使うことで、JSXを使わないピュアなJavaScriptだけで記述することもできますが、以下の例のようにネストを表現できないので、JSXを使うほうが良いと思います。

<div>
  <img src="profile.jpg" alt="Profile photo" />
  <h1>Welcome back Ari</h1>
</div>

これをJSX抜きで書こうとすると以下のようになる。

React.createElement("div", null, 
  React.createElement("img", {src: "profile.jpg", alt: "Profile photo"}),
  React.createElement("h1", null, "Welcome back Ari")
);

JSXを理解したのでDay3では最初のReactコンポーネントを作ってみます。

30 Days of React を意訳していく Day2 - What is JSX?

はじめに

本編

JSX/ES5/ES6 WTF??!