Взаимодействие между React и GoLang можно настроить с использованием API.
Простой пример можно создать с помощью следующих шагов:
1. Настройка бэкенда на GoLang:
- Установите GoLang на свой компьютер, если еще этого не сделали.
- Создайте новую директорию для проекта и перейдите в нее через командную строку.
- Инициализируйте новый модуль Go с помощью команды:
```bash
go mod init example.com/myapp
```
- Создайте файл `main.go` и добавьте следующий код в него:
```go
package main
import (
"encoding/json"
"log"
"net/http"
)
type Message struct {
Text string `json:"text"`
}
func main() {
http.HandleFunc("/api", func(w http.ResponseWriter, r *http.Request) {
message := Message{Text: "Hello, React!"}
json.NewEncoder(w).Encode(message)
})
log.Fatal(http.ListenAndServe(":8080", nil))
}
```
- Сохраните файл и запустите бэкенд через команду:
```bash
go run main.go
```
2. Настройка фронтенда на React:
- Установите Node.js и npm, если еще этого не сделали.
- Создайте новую директорию для фронтенда и перейдите в нее через командную строку.
- Инициализируйте новый проект React с помощью команды:
```bash
npx create-react-app my-app
```
- Перейдите в директорию проекта React:
```bash
cd my-app
```
- Откройте файл `src/App.js` и замените код на следующий:
```javascript
import React, { useEffect, useState } from 'react';
function App() {
const [message, setMessage] = useState('');
useEffect(() => {
fetch('/api')
.then(response => response.json())
.then(data => setMessage(data.text));
}, []);
return (
<div>
<h1>{message}</h1>
</div>
);
}
export default App;
```
- Сохраните файл и запустите фронтенд через команду:
```bash
npm start
```
3. Откройте браузер и перейдите по адресу `http://localhost:3000`. Вы должны увидеть сообщение "Hello, React!".
Пример кода можно найти в репозитории на GitHub: https://github.com/kelvinmai/simple-react-golang-example
Этот репозиторий содержит полный пример связки React и GoLang, включая настройку проекта и код.