React.jsでアロー関数を使って表記リストを表示しようとしています。
参考書『React.js & Next.js超入門』に掲載されていたプログラムで
Webでサンプルコードのダウンロードができるようなのですが、zipファイルの解凍でエラーが出て見れない状態です。
問題
①React.js部分は、Javaスクリプトなので、以下の記事を参考にすると{// }
のコメントアウトが使えるはずですが、実行中のコードではコメントとして認識されません。
参考記事:
React JSX コメントを書きたい! - かもメモ
② Webブラウザでは以下のように表示されるはずですが、現行のコードを実行したところ「wait...」と表示されます。
ブラウザの更新やGoogleChrome以外でも、確認しましたが表示が変わりません。
<div id ="root">wait...</div>
の部分のデフォルトのままということでしょうか。
表示したいもの
React
Google
*Googleの検索サイトです
[※Googleに移動][3 http://google.com]
現在表示されるもの
React
wait...
③Reactの表記について
ダブルクォート" "
とシングルクォート' '
の使い分けが、以下のコードではcolor: 'white',
以下がシングルになっているのですが、どのような決まりなのでしょうか。
ここはCSSでしょうか。
const dfn = {
fontSize: "20pt",
padding: "10px",
}
const dt = {
fontSize: "16pt",
color: 'white',
backgroundColor: '#006',
padding: '10px',
}
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="URF-8" />
<title>React</title>
<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>
</head>
<body>
<h1>React</h1>
<div id ="root">wait...</div>
<!-- Webブラウザで表示するとdataの内容を元に「記述リスト」を作成 -->
<script type="text/babel">
let dom = document.querySelector('#root');
const dfn = {
fontSize: "20pt",
padding: "10px",
}
const dt = {
fontSize: "16pt",
color: 'white',
backgroundColor: '#006',
padding: '10px',
}
const dd={
color: 'black';,
padding: '10px',
}
let data = {
url: 'http://google.com',
title:'Google',
caption: '*Googleの検索サイトです'
};
{//JSXで<dl>タグが用意されている}
<!--JSXで<dl>タグが用意されている-->
let el = (
<div>
{(()=>
<dl>
<dt style={dt}><dfn style={dfn}>
{data.title}
</dfn></dt>
<dd style={dd}>
<a href={data.url}>※{data.title}に移動</a>
</dd>
</dl>
)()}
</div>
);
ReactDOM.render(el, dom);
</script>
</body>
</html>