61471


React.jsでアロー関数を使って表記リストを表示しようとしています。  
参考書『React.js & Next.js超入門』に掲載されていたプログラムで  
[Webでサンプルコードのダウンロードができる](https://www.shuwasystem.co.jp/support/7980html/5692.html)ようなのですが、zipファイルの解凍でエラーが出て見れない状態です。

**問題**  
①React.js部分は、Javaスクリプトなので、以下の記事を参考にすると`{//
}`のコメントアウトが使えるはずですが、実行中のコードではコメントとして認識されません。

参考記事:  
[React JSX コメントを書きたい！ -
かもメモ](https://chaika.hatenablog.com/entry/2019/04/01/123000)

② Webブラウザでは以下のように表示されるはずですが、現行のコードを実行したところ「wait...」と表示されます。  
ブラウザの更新やGoogleChrome以外でも、確認しましたが表示が変わりません。  
`<div id ="root">wait...</div>`の部分のデフォルトのままということでしょうか。

表示したいもの

[code]

    React
    Google
    *Googleの検索サイトです
    [※Googleに移動][3 http://google.com]
    
[/code]

現在表示されるもの

[code]

    React
    wait...
    
[/code]

③Reactの表記について

ダブルクォート`" "`とシングルクォート`' '`の使い分けが、以下のコードでは`color:
'white',`以下がシングルになっているのですが、どのような決まりなのでしょうか。  
ここはCSSでしょうか。

[code]

            const dfn = {
            fontSize: "20pt",
            padding: "10px",
        }
            const dt = {
            fontSize: "16pt",
            color: 'white',
            backgroundColor: '#006',
            padding: '10px',
        }
    
[/code]

コード

[code]

    <!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>
    
[/code]

**コメントアウトにならない件について**  
Sublime Textを使っており、以下のようにコメントアウトが効きません。  
[![画像の説明をここに入力](https://i.stack.imgur.com/hoKpI.png)](https://i.stack.imgur.com/hoKpI.png)


CC BY-SA 4.0
2019-12-16T04:59:44.557
61470
2020-11-10T10:01:21.150
2020-11-10T10:01:21.150
32986
question
javascript reactjs typescript react-jsx next.js
React.jsでコメントアウトができずアロー関数を使った表示ができない


Webサンプルですが、私の方でダウンロードしましたが、問題なく解凍できました。  
OS、解凍ソフトは何をお使いですか？  
React JSX コメントを書きたい！ - かもメモを見ますと、// も使えるが{ }の閉じタグの前に改行が必要。と書いてあります。

[code]

    {// 一行コメント
    }
    
[/code]

改行がないと、最後の}もコメントアウトされてエラーになる

[code]

    {// 一行コメント}
    
[/code]

下記のは改行がないようですが、実際のコードにも改行はないのでしょうか？

[code]

    {//JSXで<dl>タグが用意されている}
    
[/code]


CC BY-SA 4.0
2019-12-16T05:33:55.377
61471
2019-12-16T05:33:55.377
24490
61470
answer