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>のタグも必要になる。
三点準備できてるか注意する。
- CDNリンク二つが<head>にあるか
- JSX用のリンク一つが<head>にあるか
- <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を動かすファーストステップとしての方法をまとめた。
