Technology

[React] HTML1枚で、JSXを使ってReactをブラウザに表示させる

Reactを使って、画面に文字を表示させてみる。


Reactで画面に表示させる方法は二種類

どうやらReactで画面に表示させるには、二種類の方法があるらしい。

  • CDNリンクを使用してReactを使用する
  • npmでローカルにReactをインストールして使用する

現段階、とにかく最小限の規模で動かして見たかったので、CDNリンクを使用してReactを使うことにした。


用意するのはHTMLファイル一枚だけ

CDNリンクを使う場合は、特に何もインストールする必要はなし。

HTMLファイルだけ用意すればOK。


CDNリンクをHTMLの<head>タグに埋め込む

こちらのチュートリアルに、リンクが貼ってある。

https://ja.reactjs.org/docs/cdn-links.html

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>


これをHTMLのheadに埋め込む。

<!DOCTYPE html>
<html>
 <head>
  <title>ページのタイトル</title>
  <meta charset="UTF-8">
 <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
 <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
 </head>
 <body>
   <h1>Hello mountain</h1>
 </body>
</html>


JSXを使うための準備

Reactでは、JSX(HTMLタグをJavascriptのスクリプトに直接記述できる仕組み)を利用することができる。

なんでJSXを使うのかは置いておいて、使うために、下記のリンクも<head>タグに埋め込む。

こちらのウェブサイトに載っている。

https://ja.reactjs.org/docs/add-react-to-a-website.html

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


JSXを記述する

以下を記述する。

<head>の中身は、reactとJSXを使うためのリンクがある。

また、JSXを使う時は、<script type="text/babel"></script>のタグも必要になる。

三点準備できてるか注意する。

  1. CDNリンク二つが<head>にあるか
  2. JSX用のリンク一つが<head>にあるか
  3. <script type="text/babel"></script>のタグが用意されてるか。

以下、実際に書いてみる。

<!DOCTYPE html>
<html>
 <head>
  <title>react</title>
  <meta charset="UTF-8">
  <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 </head>
 <body>
   <h1>React Test</h1>
   <div class="mountain-name">...</div>

   <!-- JSXを使うためのscriptタグ -->
   <script type="text/babel">
  <!-- 上のクラス名をここに入れる -->
   let dom = document.querySelector('.mountain-name');

   //ブラウザに表示させるためのJSX
   let element = (
     <div>
        <h1>Hello mountain</h1>
     </div>
   );
   ReactDOM.render(element, dom);

   </script>
 </body>
</html>


結果として、上のmountain-nameクラスの「...」の部分が、「Hello mountain」と表示されるようになる。


<script type="text/babel">の利用は、シンプルなデモの作成向き

Reactのドキュメントをみると、この <script type="text/babel">を利用した方法は、JSXを手軽に試す時には良いが、本番環境には向かないとのこと。

この方法は学習やシンプルなデモの作成にはいいですが、これをそのまま使うとウェブサイトは重くなってしまい、本番環境には向きません。次のレベルに進む準備ができたら、先ほど追加した<script>タグと type="text/babel" 属性は削除してしまいましょう。そして次のセクションに進み、JSX プリプロセッサを設定して <script> タグを自動変換するようにしましょう。

https://ja.reactjs.org/docs/add-react-to-a-website.html

とりあえず、Reactを動かすファーストステップとしての方法をまとめた。

-Technology