始めよう React（基礎編）！ Part 1 - React とは

5785 ワード
JavaScript babel 初心者 React 初心者向け JavaScript テキストリンク

これから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など

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

Java web開発でMyBatisを使用してデータベースに挿入してプライマリ・キーを返す方法の紹介
C++多態性虚関数、抽象クラス(一)