Go/TypeScriptでHelloと表示させたい

初心者です。Helloと表示させたいです。
前面をTypeScript(react)で、背面をGoで構築しようとしています。
go run main.goで実行した時、typescriptのコードがそのままlocalhost:8080に表示されてしまうのですが、どのようにすれば解決できますか？

最終的に目指したい姿

go run main.go　で実行したとき、localhost:8080で以下の画面が表示されること。

Hello

問題の状況

index.tsxの文章がそのままlocalhost:8080に出力される。

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Route, Routes} from 'react-router-dom';

import Hello from './hello/hello';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <Routes>
      <Route path={`/`} element={<Hello />} />
    </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

前提条件

全体のディレクトリ構造は以下の通りです。

app
 -controllers
  -hello.go
  -webserver.go
 -views
  -src
   -index.tsx
   -hello
    -hello.tsx
    -components
     -Title.tsx
main.go
go.mod

hello.goの記述

func hello(w http.ResponseWriter, r *http.Request) {
 t, _ := template.ParseFiles("app/views/src/index.tsx")
 t.Execute(w, nil)

webserver.goの記述

func StartWebServer() error {
 http.HandleFunc("/", hello)
 return http.ListenAndServe(fmt.Sprintf(":%d", config.Config.Port), nil)

index.tsxの記述

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Route, Routes} from 'react-router-dom';

import Hello from './hello/hello';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <Routes>
      <Route path={`/`} element={<Hello />} />
    </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

hello.tsxの記述

import Title from "./components/Title";

func Hello() {
 return (
  <div className="test">
   <Title / >
  </div>
 );
}

Title.tsxの記述

const Title = () => <h1>Hello</h1>

export default Title;

解決策探し

hello.goの記述が問題なのだろうな、と考えています。

t, _ := template.ParseFiles("app/views/src/index.tsx")

試しに"app/views/src/hello/hello.tsx"に変えてみても、localhost:8080の結果はtsxの記述がそのままコード文で表示されてしまいます。ご教示のほどよろしくお願いします。

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

回答2件

基本中の基本を理解しないまま先に進んでるから何もかも全部間違える。
まずgoは忘れてReactだけでHelloを表示させる。
どこかの変なブログをコピペして「ローカルサーバーで動かすまで」ではなくJSをビルドして他の人に公開できる状態まで完成させる。
この状態になれば「index.htmlとビルドしたJSファイルが必要」と理解できる。
document.getElementById('root')のrootがどこにもない。rootを書くべきhtmlが存在してない。
「フロントのJSはブラウザで表示したhtmlの中で動く」は最初に覚える常識。
こんな段階の常識が抜けてる質問。

go側でできることはこの「index.htmlとビルドしたJSファイル」を表示するだけ。

どう見てもReact使うのも早いレベルの初心者なので回答しても無駄だろうけど。

投稿2023/01/27 10:58