コンポーネントがうまくレンダリングできない

前提

reactでtodoリストを作ってます
コンポーネントをレンダリングしようとしたときにエラーメッセージが発生しました。

実現したいこと

コンポーネントをレンダリングできるようにしたい

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

エラーメッセージ
Uncaught SyntaxError: Unexpected token '<' (at index.js:10:10)

該当のソースコード

js
1
2console.log('test');
3import React from "react";
4import App from "./App.js";
5import * as ReactDOM from 'react-dom/client';
6
7
8const root = ReactDOM.createRoot(document.getElementById("root"));
9
10root.render(
11         <App />
12);

html
1<html>
2<head>
3    <meta charset="UTF-8">
4
5    <title>Todo</title>
6    <meta name='viewport' content='width=device-width, initial-scale=1'>
7    
8</head>
9<body>
10    <h1>こんにちは</h1>
11    <div id="root"></div>
12    
13    <script type="module" src="./index.js"></script>
14
15</body>
16</html>

js
1function App(){
2    return console.log("hellow");
3};
4
5export default App;

試したこと

文法の間違いをネットで調べながら確認した

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

ReactのJSXは、ブラウザでは直接解釈できません。

トランスパイル（ふつうのJavaScriptへの変換）を行う環境を構築する必要があります。

投稿2022/12/30 11:34

編集2022/12/30 12:48

maisumakun

総合スコア145183

Hiroaki_3710

2022/12/31 13:38

質問回答本当にありがとうございます！maisumakunさんの回答を元に環境構築行ってみました！ただ、どうしてもコンポーネントをレンダリングするところにたどり着けません。いろいろ調べながら半日やってみたのですがうまく行きません。新たに質問させていただいたのでぜひアドバイスいただきたいです。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

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