React + Go Fiberでアプリを作成してみた【Blog】

Last updated at 2024-07-09Posted at 2024-05-31

1.プロジェクトを作成する(Go Fiber Project)

(1) フォルダを作成する

mkdir client
mkdir server
cd server/
go mod init github.com/neerajbg/blog

(2) serverにserver.goを作成する

server/server.go

go get github.com/gofiber/fiber/v2
go get -u gorm.io/gorm
go get -u gorm.io/driver/mysql

(3) serverにdatabase/database.goを作成する

(4) serverにmodel/blog.goを作成する

(5) serverにcontroller/blog.goを作成する

(6) serverにrouter/router.goを作成する

go get github.com/joho/godotenv

(7)serverに.envを作成する

2. フロントエンド部分を作成する

(1)プロジェクトを作成する

npx create-react-app client
cd client
npm install react-bootstrap bootstrap
npm install axios
npm install react-router-dom

(2)src/App.jsを編集する

src/App.js

(3)public/index.htmlを編集する

public/index.html

//省略
<title>React App</title>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
  crossorigin="anonymous"
/>

(4)src/App.cssを編集する

(5)clientに.envを作成する

(6)src/index.jsを編集する

(7)srcにpageフォルダとHome.jsを作成する

参考サイト

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up