Help us understand the problem. What is going on with this article?

始めよう React(基礎編)! Part 1 - React とは

More than 1 year has passed since last update.

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

本章は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など

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

ShowJs
Web関連の会社で勤めております。 営業から転身してきた身で、出来るだけ分かりやすく説明して行きます! 台湾出身なので、変な表現がございましたら、ぜひ教えてください! 何卒よろしくお願いします!!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away