\n\n\n```\n```index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nReactDOM.render(\n

Hello, world!!

,\n document.getElementById('root')\n)\n```\n\n### 試したこと\n\nSyntaxError: Unexpected token '<'でググったところ、\nhttps://note.com/yucco72/n/n4f984d184a49\nにヒット。ここでの解決例から、階層と記述が合っていないのでは？と考えました。\nhttps://www.ycomps.co.jp/staffblog/16101\nをもとに記述を変えてみましたがエラーメッセージとしては変わらないため質問します。\n\n### 補足情報（FW/ツールのバージョンなど）\nhttps://qiita.com/EZ_Denta/items/9e6a47f330b5a01806ae\nこれを見ながら、環境構築をしています。\n\npublicフォルダ内のindex.htmlからpublicフォルダ同階層のsrcフォルダ内index.jsへの相対パスを記述したいと思っています。\n![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-12-03/ee98ae56-7c2f-444f-9599-2c48a3589674.jpeg)\n","answerCount":1,"upvoteCount":0,"datePublished":"2022-12-02T18:41:03.219Z","dateModified":"2022-12-03T05:12:19.000Z","acceptedAnswer":{"@type":"Answer","text":"### 不具合の理由\n同じような質問に以前回答させていただきました。\nよろしければそちらをご覧ください。\n\n- [React用いてブラウザにHello Woldが表示できない | teratail](https://teratail.com/questions/gibrvwup7sv0bs)","dateModified":"2023-02-14T03:36:55.000Z","datePublished":"2022-12-02T20:09:18.136Z","upvoteCount":1,"url":"https://teratail.com/questions/hdg8aofoenmn2v#reply-gm7c5liiwdnzu2"},"suggestedAnswer":[],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/JavaScript","name":"JavaScriptに関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/hdg8aofoenmn2v","name":"SyntaxError: Unexpected token '<'"}}]}}}

回答率: 85.29%

質問するログイン新規登録

トップ JavaScriptに関する質問SyntaxError: Unexpected token '<'

Q&A

解決済

1回答

691閲覧

SyntaxError: Unexpected token '<'

総合スコア80

0グッド

0クリップ

投稿2022/12/02 18:41

0

0

前提

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への相対パスを記述したいと思っています。

2022/12/02 18:55

React のコードは JavaScript の中に直接 <h1> などのタグが書かれてますが、これは JSX と呼ばれるもので、ブラウザでは直接実行はできず、補足情報の記事のように JavaScript に変換する操作が必要になります。

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

回答1件

0

ベストアンサー

不具合の理由

同じような質問に以前回答させていただきました。
よろしければそちらをご覧ください。

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

投稿2022/12/02 20:09

編集2022/12/02 20:12

総合スコア2316

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップ JavaScriptに関する質問

SyntaxError: Unexpected token '<'

関連した質問

同じタグがついた質問を見る

運営からのお知らせ

【ジャック広告の配信について】現在、非ログイン状態のユーザー様に対して一部の地域限定でジャック広告を配信しております。詳細につきましてはteratailブログをご確認ください。 https://blog.teratail.com/entry/jack-ad-202511

過去のお知らせを見る