これからReactについて、書いていく予定です。
毎週１〜２回投稿する予定になります！
興味がある方是非ご覧下さい！

本章はReactの基礎を紹介して行きます。
よろしくお願いします。

#Reactとは
ReactはJavaScriptで構築したJavaScriptのライブラリーの一種です。
Facebook社が2013年で開発にしたライブラリーで、
Twitter, Airbnb, Uberなどの大手企業で採用されております。

#Reactの考え方
・コンポーネント指向
　ページは色んなパーツ（コンポーネント）で構成しています。
　一つ一つのコンポーネントを組合わせてWebApplicationを作ります。
　一つのコンポーネントが変化すると、そのコンポーネントだけがレンダリングして
　他の部分は変わらないままです。(一番シンプルな影響として、UXがよくなります)

#Reactができること
　1.WebApplication
　2.Android と IOS の APP
　　（React Native：　Reactの書き方でAndroidとIOSを同時に作れます。)

#Reactの書き方（JSX）
　簡単にイメージすると言うと、
　Scriptタグ内またはJSファイル内でHTMLを書くことです。
　こちらでは、簡単にJSXを理解する程度で大丈夫です。　

sample.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="app"></div>
<!-- ↓ （ここからはJSX）　Script内でHtmlを書ける　-->

　<!-- ↓　babelでReactに適用できるJSの書き方に変換されます。　　-->
  <script type="text/babel">
    // htmlをレンダリング
    ReactDOM.render(
      <h1>hello world</h1>,
      document.getElementById("app")
    )
  </script>

<!-- ↑ （ここまではJSX）　　-->

<!-- ↓ （ここからは通常のHTMLの書き方　JavaScriptをImport）　　-->

  <!-- ↓ HTMLファイルなので、イメージしやすい為に今回はこの形でReactを引用します。　-->
  <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
　<!-- ↓ babelはReactの書き方を変換する為のライブラリーになります。（主にJavaScriptの書き方の変換で使う）　　-->
　<!-- 今回紹介するのはReactなので割愛します。　-->
  <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</body>
</html>

　上記のコードをHtmlを打ち込めば、ブラウザでHello Worldが見えます。

・実際にbabelはどんな動きしたのは見てみましょ。
　https://babeljs.io/
　babelのホームページにアクセスして、上部のTry it outをクリック
　左側のreactをチェックを入れて、先ほどのJSXコードを貼り付けてください。

sample.html

    ReactDOM.render(
      <h1>hello world</h1>,
      document.getElementById("app")
    )

　JSコードに変換
　↓↓↓↓↓↓↓↓

ReactDOM.render(React.createElement(
  "h1",
  null,
  "hello world"
), document.getElementById("app"));

　この様なイメージになります。

#最後に
今回のReactの簡単な紹介はここまでです。
このシリーズはReactの基本知識を紹介して行く予定になります。
例えば：
・WebPackでReactの環境構築
・React-router
・Create-react-appなど

興味がある方は是非読んでください。