React入門（2）render関数の使い方〜Hello worldの作成

• このページで使用するサンプルの詳細はGitHubにあります。
• Reactの環境設定方法は React入門（1）環境設定 を参照ください。

Reactの開発環境を構築すると、開発用のサーバーが使えるようになっています。

importとexport

import はES6でmoduleを読み込みのために標準化されたものです。importは別ファイルに記述した関数や変数、またはClassなどを読み込むために使います。

exportと詳細なimportの使い方

別ファイルに記述した関数や変数、またはClassなどを他のファイルからimportできるようにするため、出力する側で変数、関数、クラスの前に export を付ける決まりになっています。

読み込む側で、import {名前} from ‘ファイル名’ と記述することにより、別ファイルに記述した関数や変数、またはClass名を記述するだけで使用することができるようになります。また、ファイル名は拡張子をつけないことです。

ポイント：Reactを使う上で最低限必要なモジュールのインポートは「react」のインポートです。
「react」のインポートはsrcフォルダ内の全てのJavaScriptファイルに記述します。

import React from 'react'

ポイント：「render()」関数を使う場合は必ず「react-dom」インポートが必要です。

import ReactDOM from 'react-dom'

render()の読み込みは次のようにします。

ReactDOM.render()

さらに次のように記述することで、より簡単にrender()関数を呼び出すことができます。

import { render } from 'react-dom'

render()は関数名だけ記述すれば良くなります。

render()

ReactのsampleではReactDOM.render()の記述とrender()の記述どちらも良く出てきますが、これはimportの書き方が違うだけのことです。好きな方を使えば良いです。

styleシートの読み込み

CSSスタイルシートは通常の静的なページと同様にCSSファイルを別途作成して読み込みます。
ただし、CSSファイルの読み込みは通常の静的なHTMLと違いlink要素ではなく import文でJavaScriptファイルに読み込みます。
これはReactの仕組みというよりもWebpackを使うことでスタイルシートをバンドルしているものです。
webpack4の導入方法（2）スタイルシートのバンドル

CSS読み込みの例

import './index.css';

src/index.cssファイルをエディタで開き、body要素に「background-color: yellow;」の指定を追加します。
ブラウザに表示された「Welcome to React」のページの背景色が即座に黄色に変わります。
そして、ブラウザの検証画面からHTMLコードを確認してみると、head要素の中にstyle要素が作られて、JavaScript経由で記述したCSSの内容がエンベッド形式で記述されていることを発見できるはずです。

render関数の使い方

Reactを理解する上で、まず覚えることはrender関数です。
「create-react-app test」で環境構築した場合、render()関数は「src/index.js」に記述します。

もしも「Hello world」表示だけする非常にシンプルなアプリケーションを作成する場合は、全て「src/index.js」に記述すればよいでしょうが、複雑なアプリケーションにする場合は、後述するコンポーネント部分などは別ファイルにしてimportで呼び出すことになります。

render関数はJavaScript内に記述した仮想DOMを現実のDOMとして書き出してくれる魔法のような関数です。
使い方は簡単ですから、まず暗記してしまいましょう。

「render()」関数の記述方法

render関数を使うにはreact-domモジュールが必要です。必ずreact-domをimportしておきます。

render関数は引数を2つとります。第1引数が書き出したい内容、第2引数が書き出す場所の指定です。

render関数の例

import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));

さて、通常書き出す内容は「Hello,world』のように単純で短い内容ではありません。
もっと複雑で長い文章になる場合がほとんどでしょう。

そのため、記述がしやすいようにJSXというトランスパイルする仕組みができました。それはJavaScriptに、あたかもHTMLをそのまま記述する手軽さです。

JSXについて

HTMLコーダーにとっても、JavaScriptを書くプログラマーにとっても、不思議な記述方法が下記の記述です。
尚、JSX形式の記述をトランスパイルするのはBabelを使っています。
また、BabelはES6をJavaScriptに変換することもできます。

const element = <h1>Hello, world!</h1>;

このとっても不思議な記述方法が、JSXと呼ばれるものです。基本的にはJavaScriptの構文拡張でHTML要素をクオテーション無しで直接記述しています。
JavaScriptがベースになっていますので、通常のJavaScript、例えば変数や関数など今までどおりの文法で記述できます。

JSXの使い方

簡単なサンプルを見てください。
＊ここからのサンプルの詳細はGitHubのhelloブランチにあります。

const name = 'world';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

「const」はES6で使用可能になった変数の宣言方法です。「const」は変数を再代入することができません。また、同じ名前の変数を再宣言することもできません。そのため、一般的に定数の宣言として使われます。

上のサンプルの例では、通常どおりの方法でJavaScriptの変数をconstで宣言しています。そしてJSX内でJavaScriptの変数を読み込む場合は中括弧で囲んで使用します。

JSXの注意点

• タグの中に記述する属性値は全て文字列となります。数値や論理値を使いたい場合はJavaScriptつまり{}で記述します。
• 属性名のなかでHTMLと違う記述が必要なものがあります。classはclassNameと書きます。またforはhtmlForとします。属性名が2つの単語でできているものはキャメルケースを使います。（date-,aria-は除く）
• style属性の値はJavaScriptつまり{}で記述します。

1. React入門（1）環境設定
2. React入門（2）render関数の使い方〜Hello worldの作成
3. React入門（3）関数型コンポーネントの作成
4. React入門（4）classコンポーネントの作成