Q&A
React のコードは JavaScript の中に直接 <h1> などのタグが書かれてますが、これは JSX と呼ばれるもので、ブラウザでは直接実行はできず、補足情報の記事のように JavaScript に変換する操作が必要になります。
前提
ReactでWebサイト作りたいなと思い環境構築をしていたところ、
以下のエラーメッセージが出ました。
SyntaxError: Unexpected token '<'
実現したいこと
- エラーを解決させてブラウザでHello World!!を出力させる
発生している問題・エラーメッセージ
file:///Users/Users/react_drill/src/index.js:5 <h1>Hello, world!!</h1>, ^ SyntaxError: Unexpected token '<'
該当のソースコード
index.html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" /> 7 <title>React App</title> 8</head> 9<body> 10 <div id="root"></div> 11 <script type="text/javascript" src="../src/index.js" charset="utf-8"></script> 12</body> 13</html>
index.js
1import React from 'react' 2import ReactDOM from 'react-dom' 3 4ReactDOM.render( 5 <h1>Hello, world!!</h1>, 6 document.getElementById('root') 7)
試したこと
SyntaxError: Unexpected token '<'でググったところ、
https://note.com/yucco72/n/n4f984d184a49
にヒット。ここでの解決例から、階層と記述が合っていないのでは？と考えました。
https://www.ycomps.co.jp/staffblog/16101
をもとに記述を変えてみましたがエラーメッセージとしては変わらないため質問します。
補足情報（FW/ツールのバージョンなど）
https://qiita.com/EZ_Denta/items/9e6a47f330b5a01806ae
これを見ながら、環境構築をしています。
publicフォルダ内のindex.htmlからpublicフォルダ同階層のsrcフォルダ内index.jsへの相対パスを記述したいと思っています。
ベストアンサー
