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;

解決策探し

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

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

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

コメントを投稿

0 コメント