React 入門 (#2) ～Babel＆JSX～

１，Babelとは

ES6以降のスクリプトを、ES2015基準のスクリプトにトランスパイルする機能です。

下記のタグをheadタグに記述すれば準備完了です。

index.html

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Babelリンク

２，JSXを使う理由

Reactはマークアップとロジックを両方含む疎結合の「コンポーネント」という単位で構成されます。
「コンポーネント」は、次回説明します。
そこで活躍するのが、JSX（「JavaScript XML」の略）です。
Reactのコンポーネント内で、マークアップ言語を記述するためのXML風の構文です。

３、ソースコードを記述

前回からの続きになります。
まず、index.htmlの準備です。

index.jsに移動して記述します。

**toUpperCase()**は、すべて大文字にするメソッドです。

４，ブラウザ表示

リストが登場していますね。

次回は、

コンポーネントについて扱っていきます。
次回はここへ