LoginSignup
5

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-09-21

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5