React用いてブラウザにHello Woldが表示できない

前提

※かなり初心者です…。
Reactのチュートリアルを始めようと思いHello Wold!を出力するということにチャレンジしてます。
https://ja.reactjs.org/docs/hello-world.html

ローカルPC上にあるhtmlファイルやJSファイルにコピーペーストしてブラウザで開くと構文エラーが出てしまいます。

test.jsの2行目でエラーになってるのですが、web開発自体初めて過ぎて何が正解かさっぱりわからないです。
宜しくお願い致します。

発生している問題・エラーメッセージ

Uncaught SyntaxError: Unexpected token '<' (at test.js:2:13)

該当のソースコード

html
1<div id="root"></div>
2
3<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
4<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
5
6<script src="test.js"></script>

javascript(test.js)
1const root = ReactDOM.createRoot(document.getElementById("root"));
2root.render(<h1>Hello, world!</h1>);

補足情報

ブラウザ：google chrome
React ver18

回答1件

ベストアンサー

公式のチュートリアルが不親切すぎるんです…。

不具合の理由

普通のJavaScriptって、root.render(<h1>Hello, world!</h1>);みたいに、直接HTMLタグをかいたらエラー起こりますよね？だからいつもは文字列としてタグを書いてますよね。
- 例 '<h1>いつもの</h1>'
test.jsはただのJavaScriptファイルなので、通常通りエラーになります。

対策

その書き方ができるのはJSXというファイル形式です。
- test.js → test.jsxと、拡張子を変更しましょう。
そうするとブラウザがJSXを理解できずエラーになってしまいます。
- ReactのCDNの下に、JSXを→JSに変換してくれるBabelのCDNを読み込みましょう。
- そしてscriptタグでJSXファイルを読み込む際はtype="text/babel"にします。

html
1<div id="root"></div>
2
3<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
4<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
5<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
6
7<script src="test.jsx" type="text/babel"></script>

投稿2022/11/01 19:03

編集2022/11/01 19:05

Cocode

総合スコア2307

回答へのコメント

chay

2022/11/02 04:53

全ての点と点が繋がった気がしました。感動です。 jsxもふんわりとした言葉でしか説明がなく、babelも「新しいコードを古いコードに変換するもの」などの説明しかなく結局なんのための物かを把握できないままでした。要はjavascript側（JSX側）でHTML要素を扱えるJSXという技術？を使い、そのままではブラウザが読み込めない（新しい書き方だから）からBabelで古い書き方に変換するというのが今の書き方だったりするんですね！チュートリアルにあるcodePenではBabelで変換しなくても読めるから動くし、jsで作られている物をJSXとしても認識できるが為に沢山省略してるんですね。開発環境のところで躓いていると思ってましたが解決できて良かったのと、ちゃんとした理解が得られた気がして嬉しいです。ありがとうございます！

chay

2022/11/10 09:15 編集

その後Babelとはコンパイル（厳密にはトランスパイル）するためのコンパイラであることや、JSXの書き方に対応できてるブラウザが少ない事などを知り、React（JSX）を使うならBabelの環境構築から始めないといけないのかと思い込んでいました。最終的な着地地点としては、BabelやNode.jsのインストールをしない方向で考えていましたので、「オンラインBabelコンパイラ」なるものを使って、都度都度コンパイルして動作確認、開発作業を行っていこうと思います！ ※自分と同じ初学者がいるかもしれないので、不要な情報かもですが一応自分の開発していく環境をMEMOしておきます。（異論はあるかもしれませんが何でもかんでもインストールしたくない自分用のやり方です）基本のファイル構成は以下の３つ index.html test.jsx test.js ・test.jsxファイルにjsx形式の記述をしていきます。・Babelオンラインコンパイラを使ってコンパイルする https://babeljs.io/repl ・test.jsにコピー＆ペーストする・test.jsを読み込んでいるhtml側でちゃんと反映されてるか確認する基本の流れはこんな感じでやっていこうと思います。自分のような趣味の範囲でするレベルならこれで問題ないと思いますが、業務レベルでReact、JSXを触っていくならBabelのインストールは必須な気がしました。（現場からは以上です）