初心者です。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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/01/27 16:52