アプリ開発中つまずいたポイントを共有します。
udemy視聴後、そちらを参考にReactでアプリ開発しようとhoge.jsxに記述したhogeをブラウザで表示させたく準備を行っておりましたが、udemyではそもそもindex.htmlにscriptタグの記述をしていないためhoge表示に少々時間を費やしました。
以下をブラウザで表示したい
hoge.jsx
import "./styles.css";
export const Todo = () => {
return <div>hoge</div>
};
index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
// src 配下のファイルを相対パスで指定
import { Todo } from './Todo.jsx';
import './styles.css';
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<Todo />
</React.StrictMode>
);
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hoge-App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/index.jsx"></script> <!--ここの記述が必要-->
</body>
</html>
今回のアプリはViteを使用しており、udemyではCRA(Create React App)を使用している違いがあるためだったことが分かりました。
＜ViteとCRAの違い＞
上記のようにjavascriptの指定の違いによりscript記述の違いがありました。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼