【React】基本をまとめてみた

世界中で人気のあるJavaScriptのライブラリ「React(リアクト)」についてまとめておきます。

1.Reactの公式ホームページ
2.Reactの基本
3.React developer tools
4.開発の準備
 4-1.Reactライブラリの呼出し
5.プログラム作成
 5-1.文字列を出力するプログラム1
 5-2.文字列を出力するプログラム2
 5-3.CSSを表示するプログラム
 5-4.箱クリック時メッセージを出力するプログラム

1.Reactの公式ホームページ

https://reactjs.org/

2.Reactの基本

  • Facebookが中心に開発したJavaScriptライブラリ
  • Reactで書く「JSX」は<p>タグや<h1>タグ、<div>タグなどHTMLとほとんど同じように記述することができる
  • 部品単位で開発していくことで拡張性の高いプログラムを組むことができる

3.React developer tools

React開発で便利なChromeの拡張機能を入れる方法を解説します。

(1)chromeにて「React developer tools」と入力し、検索します。

(2)赤枠「React Developer Tools – Chrome ウェブストア」をクリックする。

(3)「Chromeに追加」をクリックする。(下記URLはhttps://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?ctx=DEblog20052011&hl=ja

(4)「拡張機能を追加」をクリックする。

(5)「同期を有効にする」をクリックする。

(6)下記のようになれば有効化されています。

(7)下記赤枠をクリックする。

(8)下記赤枠「拡張機能を管理」をクリックする。

(9)赤枠「詳細」をクリックする。

(10)赤枠「ファイルのURLへのアクセスを許可する」をオンにする。

4.開発の準備

4-1.Reactライブラリの呼出し

(1)「Docs」⇒「INSTALLATION」⇒「Try React」をクリックする。

(2)「download this HTML file」をクリックする。

(3)下記赤枠をコピーする。

(4)開発中のプログラムに貼り付ける。(htmlファイル)
下記赤文字青文字紫文字の3つです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>React</title>
  <link rel="stylesheet" href="css/styles.css">
https://unpkg.com/react@16/umd/react.development.js
https://unpkg.com/react-dom@16/umd/react-dom.development.js
https://unpkg.com/@babel/standalone/babel.min.js
</head>
<body>
  <script type="text/babel">
  </script>
</body>
</html>

赤文字はReactの本体青文字はReactの結果をブラウザに反映させていくためのライブラリ紫文字はJSXやJavaScriptの新しい文法を使うためのBabelというライブラリになります。紫の文は、「本番環境では使用しないでください」と書いてあるので、本番環境では貼り付けない様にしましょう。

5.プログラム作成

「5.プログラム作成」では、bodyタグの中身のみ記載します。headタグの中身やhtmlタグに関しては、上記「4-1.Reactライブラリの呼出し」の(4)を参照してください。

5-1.文字列を出力するプログラム1

<body>
  <!-- "root"にReactで作成した部品を描画する -->
  <div id="root"></div>
  <script type="text/babel">
    (() => {
      // [第一引数]描画したいUI
      // [第二引数]そのUIをどこに描画するか
      ReactDOM.render(
        <p>Hello!</p>,
        document.getElementById('root')
      );
    })()
  </script>
</body>

ReactDOM.render()の第一引数に指定する「描画するUI」は、要素1つにする必要があります。上記ではp要素1つですが、「<p>田中</p><p>山本</p>」のように要素を2つ以上にするとエラーになります。要素を2つ以上にしたい場合は、それらを囲む親要素div要素などを追加します。

<div>
  <p>田中</p>
  <p>山本</p>
</div>

また、閉じタグがないタグを含める場合は、閉じてあげる必要があります。

<div>
  <p>田中</p>
  <hr />
  <p>山本</p>
</div>

5-2.文字列を出力するプログラム2

<body>
  <!-- "root"にReactで作成した部品を描画する -->
  <div id="root"></div>
  <script type="text/babel">
    (() => {
      const name = 'kashimura';
      // [第一引数]描画したいUI
      // [第二引数]そのUIをどこに描画するか
      ReactDOM.render(
        <p>Good morning! {name.toUpperCase()}</p>,
        document.getElementById('root')
      );
    })()
  </script>
</body>

上記赤文字 {name.toUpperCase()} のように、JavaScriptを出力する際は波括弧を使用します。

5-3.CSSを表示するプログラム

index.html

<body>
  <!-- "root"にReactで作成した部品を描画する -->
  <div id="root"></div>
  <script type="text/babel">
    (() => {
      // [第一引数]描画したいUI
      // [第二引数]そのUIをどこに描画するか
      ReactDOM.render(
        <div className="box"></div>,
        document.getElementById('root')
      );
    })()
  </script>
</body>

styles.css

.box {
  width: 200px;
  height: 300px;
  background-color: #387;
}

上記はCSSを使用しなくても以下のように書けます。

index.html

<body>
  <!-- "root"にReactで作成した部品を描画する -->
  <div id="root"></div>
  <script type="text/babel">
    (() => {
      // [第一引数]描画したいUI
      // [第二引数]そのUIをどこに描画するか
      ReactDOM.render(
        <div style={{width:200, height:300px,
         backgroundColor;#387}}></div>,
        document.getElementById('root')
      );
    })()
  </script>
</body>

5-4.箱クリック時メッセージを出力するプログラム

index.html

<body>
  <div id="root"></div>
  <script type="text/babel">
    (() => {

      function showMessage() {
        alert('箱がクリックされました');
      }

      ReactDOM.render(
        <div style={{width:200 height:300
         backgroundColor:'#387'}}
        onClick={showMessage}></div>,
        document.getElementById('root')
      );
    })()
  </script>
</body>

上記のようにJavaScriptイベント「OnClick」は、赤文字のように追加します。関数名は波括弧で囲む必要があります。

誰かの参考になれば幸いです。

2 Comments »

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中