はじめに
JavaScriptでWebアプリ開発する際のフレームワーク__React__を勉強し始めたので忘れないように記録する。
今回はReactでWeb上でHello World!と表示させる手順ついて記録する。
間違っているところがありましたらご指摘していただけると幸いです。
事前準備
[React公式サイト][link-1]
[link-1]:(https://ja.reactjs.org/)
Chromeの拡張機能
Chromeでreact developer toolsと調べるか下記のURLから拡張機能を追加しておく。
React Developer Tools
さらにReact Developer Toolsの拡張機能の設定でファイルの URL へのアクセスを許可するをONにする必要がある。
開発
React読み込み
[公式サイト][link-1]からDoc→Getting Started→Web上で試せるオンラインエディタの__このHTMLファイル__を開きheadタグ内のScriptタグ2つを自身のhtmlファイルのhead内へコピペする。
[公式サイト][link-1]からDoc→既存のウェブサイトにReacrを追加する→JSXを手軽に試してみるのScriptタグを自身のhtmlファイルのhead内へコピペする。
または、下記の3つのコードをコピペする。
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
下記のScriptタグは本番環境では使用しないでください。
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
1番目がReact本体のScriptタグ、2番目がReactの結果をブラウザのDOMに反映させるためのScriptタグ、3番目がJSXなどの
やJavaScriptの新しい文法を使うためのBAbelというライブラリのScriptタグである。
自分のScriptコードを書くための準備
scriptタグはReactの読み込みで出てきたBabelを使って変換していくので、type属性を付ける。
ローカルファイルでの開発は自身のscriptを別ファイルにするとエラーになる
<script type="text/babel"></script>
Hello World!と表示させる
現在のhtmlファイル内のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>React Practice</title>
<link rel="stylesheet" href="css/styles.css">
<!-- react読み込み -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
</script>
</body>
</html>
Reactを使ってUIを表示させる。
まず、UIを表示させるための領域を生成する。
JavaScriptで部品を判別するためにidを付け、idはrootとする。
<body>
<!-- UI表示のためのdiv -->
<div id="root"></div>
<script type="text/babel">
</script>
</body>
</html>
このdivにReactで作った部品を描画させる。
即時関数で囲いたいのでアロー関数式を記述する。
<script type="text/babel">
(() => {
})();
</script>
ReactDOM.renderとし、第一引数に描画したいUIをJSXという記法で書く。
<script type="text/babel">
(() => {
ReactDOM.render(
<h1>Hello World!</h1>,
);
})();
</script>
第二引数にはUIをどこに描画するかを指定する。
今回はidがrootの場所に描画する。
<script type="text/babel">
(() => {
ReactDOM.render(
<h1>Hello World!</h1>,
document.getElementByID('root')
);
})();
</script>
現在のhtmlファイル内のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>React Practice</title>
<link rel="stylesheet" href="css/styles.css">
<!-- react読み込み -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
(() => {
ReactDOM.render(
<h1>Hello World!</h1>,
document.getElementByID('root')
);
})();
</script>
</body>
</html>
ここまでのファイルをWeb上で表示させるとHello World!と表示される。
これで開発環境が整えられた。
参考