React学習 基礎

#Reactとは
Facebookが開発、OSSとして公開しているライブラリ。
GitHubリポジトリはfacebook/reactにある。

Reactでは、ボタンやテキストボックスなどの汎用的なComponentに分け、それを組み合わせることでアプリケーションを構築していきます。
これにより、独自のUIパーツやウィジェットを、手軽に再利用できるようになりました。

そして、Reactの特徴として描画(Render)を行うことによって、Virtual DOMという仮想的なDOMを構築します。
直接DOM操作するのではなく、プログラム的に仮のDOMを構築してそれを操作することで、軽くて高速な処理ができるようになっています。

#JSX
Reactでは、HTMLのタグを直接JavaScriptのスクリプトに記述する仕組みを持っています。これをJSXといいます。
Reactを使う上でJSXの利用は必須というわけではありませんが、JSXを利用することでより自然にReactライブラリが使えるようになります。
また、埋め込まれた値をレンダリングする前に、エスケープしてくれるので、インジェクション攻撃を防ぐ事も可能です。

JSX

const e = <h1 id="greeting">Hello, World!</h1>

JSXを使わない場合

const e = React.createElement('h1', {id: 'greeting'}, 'Hello, World!')

JSXはJavaScriptのシンタックスシュガーであり、簡易的でより自然にReactの操作が可能となる。

##JSXを記述する際の注意

JSXでエラーになる例

function getDOM() {
  return
  <div><p>JSXテスト</p></div>
}

この場合はJSXの範囲を丸括弧で括る必要がある。

丸括弧で括る

function getDOM() {
  return (
  <div><p>JSXテスト</p></div>
  )
}

また、JSXでは複数のHTMLタグを並べて記載することはできない。
必ず、一つのDOM要素に全て含む必要がある。

JSXでエラーになる例

function getDOM() {
  return (
    <div><p>JSXテスト1</p></div>
    <div><p>JSXテスト2</p></div>
  )
}

一つのDOM要素に含める

function getDOM() {
  return (
    <div>
      <p>JSXテスト1</p>
      <p>JSXテスト2</p>
    </div>
  )
}

##JSXでstyleを指定する方法
JSXでstyle属性に文字列を指定することはできないため、CSSのスタイルをオブジェクトのプロパティに指定したものを与える必要がある。

style属性にオブジェクトを与える

const obj = {prop1:value1, prop2:value2, prop3:value3 ... }
const dom = <div style={obj}> ... </div>