HTMLファイル上でHello React!が表示できません。

前書きと内容

初めて投稿をさせて頂きます。HoroHoro0316という者です。
自分なりにプログラミング学習をしていたのですが、躓いてしまったため今回の投稿をしたいと思います。

HTML上にてReact.jsを用いてHello React!を表示するところで、以下のエラーメッセージが発生しました。
※ 下記はindex.htmlをXAMMP（localhost）上で開き、Googleデベロッパーツールの表示になります。

このような感じで、Uncaught SyntaxErrorと表示されてしまっています。

Uncaught SyntaxErrorについて

自分なりにネットで調べてみたのですが、よくあるケースは文法ミスとのことでした。

自分なりに小一時間ほど書いたコードを見直したり、他の原因がないかを追究してみたりしました。
しかし、原因を特定することができず今に至っています。

該当のソースコード

まず初めに、ファイル内の構造はこんな感じになっています。

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>React test</title>
7    <link rel="stylesheet" type="text/css" href="./css/reset.css">
8    <link rel="stylesheet" type="text/css" href="./css/style.css">
9    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
10    <!-- react -->
11    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
12    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
13    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
14    <script type="module" src="./js/main.js"></script>
15</head>
16<body>
17
18<div class="main">
19    <div id="root"></div>
20</div>
21
22</body>
23</html>

main.js

JS
1import React from 'react';
2import ReactDOM from 'react-dom';
3import Hello from './components/hello';
4
5const target = document.querySelector('root');
6ReactDOM.render(<Hello/>, target);

hello.js

JS
1import React from 'react';
2
3class Hello extends React.Component {
4  render() {
5    return (
6      <div>
7        <h1>Hello World</h1>
8        <p>一緒にReactを学びましょう！</p>
9      </div>
10    );
11  }
12}
13
14export default Hello;

単純にindex.htmlから外部JSを読み込んで、React.jsの表示できないかな…と思った次第です。

余談ですが

外部JSを読み込まないで、index.html内でscriptタグを用いて記載した際には、
問題なく、Hello React!は表示されていました。

html
1  <body>
2    <div id="root"></div>
3
4    <script type="text/babel">
5      ReactDOM.render(
6        <h1>Hello, React!</h1>,
7        document.getElementById('root')
8      );
9    </script>
10  </body>

該当箇所のみですが、こんな感じで記述していた場合です。

最後に

いざ学ぶかと思ったら、まさかこんな段階で躓いてしまうとは思ってもみませんでした。

お手数をおかけいたしますが、ご回答の方、よろしくお願いいたします。

m.ts10806

2020/03/16 04:08

XammpではなくXAMPPです。また、phpMyAdminは今回どのように関係するのでしょうか？

HoroHoro0316

2020/03/16 04:26

誤字とタグの方を修正いたしました。前述のは間違いです。ご指摘ありがとうございます。

行動規範の内容に同意します

回答2件

このような感じで、Uncaught SyntaxErrorと表示されてしまっています。

はい、<Hello />といったJSXは、JavaScriptの文法に含まれていません。実行するには変換が必要です。

ブラウザで実行した方はtype="text/babel"となっていますが、これに加えてブラウザ内で動くBabelのコンパイラを入れることで、変換して実行可能となっています。

投稿2020/03/16 04:07

maisumakun

総合スコア146063

HoroHoro0316

2020/03/16 07:31

回答ありがとうございます。まだ色々と分からないことはありますが、とりあえずJSファイルに含まれたJSXが原因なのは分かりました。ちょっと調べながら色々とやってみようと思います。

行動規範の内容に同意します

ベストアンサー

ではどうすれば良いのか？と言う話ですが、node.js というブラウザとは切り離して JavaScript を動かす環境を入れて、その上で webpack などのモジュールバンドラー（JavaScript + JSX で書かれた複数のソースファイルを、ブラウザでそのまま実行できる一つの JavaScript ファイルを生成するためのツール群）を使って開発するのが一般的です。
参考: React.jsの始め方
参考: Create React Appを少し遠回りしてはじめよう

投稿2020/03/16 04:45