Introduction to React.js Part.2

wtnb_dev

2019年8月30日 06:43

こんにちは、ワタナベ（wtnb_dev）です。

前回の記事の続きです。

Introduction to React.js Part.1

前回は環境構築の一部をやりましたので、今回は実際にReact.jsを使ったコーディングをやっていきます。

初めてのReact.js

まずは定番のHello Worldを、React.jsで実装していきましょう。

Step.1 React.jsのコアパッケージのインストール

最初に、React.jsのコアのパッケージとなる以下の2つをインストールしておきます。

$ yarn add react react-dom

Step.2 index.jsの作成

Hello Worldと出力するReactプログラムを書いていきます。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));

ReactDOM.renderの第一引数には、画面に出力したいタグを指定します。HTMLのように見えますが、HTMLではありません。

React.jsでは、JSXと呼ばれる構文（HTMLによく似ているもの）を用いて、画面要素を構成していきます。

ReactDOM.renderの第二引数には、JSXの出力先となるHTML上の要素を指定します。

Step.3 index.htmlの作成

次に、実際にブラウザに表示するindex.htmlを作成します。

前回の記事で作成したものに、index.jsを読み込むscriptタグを追加します。

src/index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Sample Page</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>

bodyタグ内には、idが"root"のdivタグを記載しています。

これが、ReactDOM.renderの第二引数で指定したタグ要素となり、このdivタグ内に、ReactDOM.renderの第一引数に指定したJSXが出力されます。

これで、React.jsで作成されたJavaScriptファイルと、実際にブラウザに表示するHTMLファイルとの関連付けができました。

Step.4 動作確認

それでは、HTMLファイルとJavaScriptファイルができましたので、index.htmlを実際にブラウザで開いて確認してみましょう。

index.htmlをWebブラウザにドラッグ&ドロップして開いてみます。

何も出力されないかと思います。

ブラウザの開発者ツールを開いてみましょう。コンソールタブに以下のようなメッセージが出力されています。（Chromeの場合）

Uncaught SyntaxError: Unexpected identifier index.js:1

index.jsでシンタックスエラー（構文解析エラー）が発生しています。

これは、React.jsで記載されたJavaScriptファイルが、そのままではブラウザで表示できないことを意味しています。

これを解消するためには、トランスパイラと呼ばれる技術を用います。

トランスパイラは、ある言語を別の言語に変換する機能を持ちます。

これは、例えば最新仕様のECMAScriptで記載されたJavaScriptファイルを、最新仕様に対応していないWebブラウザで動かしたい場合に、「最新仕様のECMAScript」→「ブラウザが対応している仕様のECMAScript」に変換するような用途に使われます。

React.jsの場合も同様に、React.jsで記載されたJavaScriptを、Webブラウザで動かせるJavaScriptに変換することで、シンタックスエラーを解消することができます。

次回はトランスパイラを導入し、ブラウザ上でHello Worldが出力されるようにしてみます。

まとめ

・React.jsを使うには、コアのパッケージとなる「react」「react-dom」をインストールする
・React.jsでは、JSXと呼ばれる、HTMLによく似た構文で画面要素を作成する
・JSXで記載された要素をブラウザに出力するには、ReactDOM.renderを用いて、JSXと出力先のHTML要素を関連付ける
・React.jsで記載されたプログラムはそのままではブラウザ上で動かず、トランスパイラを用いる必要がある

この記事が気に入ったらサポートをしてみませんか？