Создание веб-приложения с помощью Go и React

Предварительные условия

Прежде чем приступить к работе с этим руководством, рекомендуется иметь базовое представление о Go и React. Также будет полезно знание HTML, CSS и JavaScript. Кроме того, вам потребуется установить следующее программное обеспечение:

• Go (>= 1.16)
• Node.js (>= 12.0.0)
• npm (>= 6.0.0)
• PostgreSQL (>= 9.0)

Настройка проекта

Для начала создадим новый каталог для нашего проекта и настроим необходимую структуру папок:

1. Создайте новый каталог для вашего проекта:

 $ mkdir go-react-app
 $ cd go-react-app

1. Инициализируйте модуль Go:

 $ go mod init github.com/your-username/go-react-app

1. Создайте server каталог внутри каталога проекта:

 $ mkdir server
 $ cd server

1. Инициализируйте новый модуль Go для сервера:

 $ go mod init github.com/your-username/go-react-app/server

1. Создайте main.go файл в server каталоге:

 $ touch main.go

Бэкэнд-разработка

Создание REST API

Теперь давайте создадим простой REST API, используя встроенный net/http пакет Go:

1. Откройте main.go файл и импортируйте необходимые пакеты:

 package main
    
 import (
     "encoding/json"
     "log"
     "net/http"
 )

1. Определите User структуру для представления нашей модели данных:

 type User struct {
     ID     int    `json:"id"`
     Name   string `json:"name"`
     Email  string `json:"email"`
 }

1. Создайте функцию-обработчик HTTP для обработки маршрута выборки всех пользователей:

 func getUsers(w http.ResponseWriter, r *http.Request) {
     users := []User{
         {ID: 1, Name: "Alice", Email: "alice@example.com"},
         {ID: 2, Name: "Bob", Email: "bob@example.com"},
     }
    
     json.NewEncoder(w).Encode(users)
 }

1. Настройте основную функцию сервера для обработки маршрутов API:

 func main() {
     http.HandleFunc("/users", getUsers)
    
     log.Fatal(http.ListenAndServe(":8000", nil))
 }

1. Запустите сервер, выполнив следующую команду в serverкаталоге:

 $ go run main.go

1. Откройте веб-браузер и посетите http://localhost:8000/users. Вы должны увидеть ответ JSON, содержащий данные пользователей.

Интеграция базы данных

В этом разделе мы интегрируем PostgreSQL в качестве базы данных для нашего веб-приложения:

1. Установите драйвер PostgreSQL для Go:

 $ go get github.com/lib/pq

1. Обновите getUsers функцию для получения данных из базы данных PostgreSQL:

 import (
     "database/sql"
    
     _ "github.com/lib/pq"
 )
    
 const (
     host     = "localhost"
     port     = 5432
     user     = "your-username"
     password = "your-password"
     dbname   = "your-dbname"
 )
    
 func getUsers(w http.ResponseWriter, r *http.Request) {
     connStr := fmt.Sprintf("host=%s port=%d user=%s "+
         "password=%s dbname=%s sslmode=disable",
         host, port, user, password, dbname)
    
     db, err := sql.Open("postgres", connStr)
     if err != nil {
         log.Fatal(err)
     }
     defer db.Close()
    
     rows, err := db.Query("SELECT id, name, email FROM users")
     if err != nil {
         log.Fatal(err)
     }
     defer rows.Close()
    
     users := []User{}
     for rows.Next() {
         var user User
         err := rows.Scan(&user.ID, &user.Name, &user.Email)
         if err != nil {
             log.Fatal(err)
         }
         users = append(users, user)
     }
    
     json.NewEncoder(w).Encode(users)
 }

1. Перезапустите сервер и посетите http://localhost:8000/users. Теперь данные будут получены из базы данных PostgreSQL.

Фронтенд-разработка

Настройка React

Давайте настроим интерфейс нашего приложения с помощью React:

1. Вернитесь в корневой каталог проекта:

 $ cd ..

1. Инициализируйте новый проект React:

 $ npx create-react-app client

1. Перейдите в client каталог:

 $ cd client

1. Запустите сервер разработки React:

 $ npm start

1. Откройте веб-браузер и посетите http://localhost:3000. Вы должны увидеть страницу приветствия React по умолчанию.

Компоненты пользовательского интерфейса

Теперь мы создадим некоторые компоненты пользовательского интерфейса, используя React, для отображения данных пользователей, полученных из серверной части:

1. Создайте новый файл Users.js внутри src каталога:

 $ touch src/Users.js

1. Добавьте в файл следующий код Users.js:

 import React, { useEffect, useState } from 'react';
    
 function Users() {
     const [users, setUsers] = useState([]);
    
     useEffect(() => {
         fetch('/users')
             .then((response) => response.json())
             .then((data) => setUsers(data));
     }, []);
    
     return (
         <div>
             <h1>Users</h1>
             <ul>
                 {users.map((user) => (
                     <li key={user.id}>{user.name}</li>
                 ))}
             </ul>
         </div>
     );
 }
    
 export default Users;

1. Откройте src/App.jsфайл и замените существующий код следующим:

 import React from 'react';
 import Users from './Users';
    
 function App() {
     return (
         <div className="App">
             <Users />
         </div>
     );
 }
    
 export default App;

1. Перезапустите сервер разработки React, если он не был перезапущен автоматически. Посетите http://localhost:3000, и вы увидите список имен пользователей, полученных из серверной части, отображаемый на экране.

Соединение фронтенда и бэкенда

Чтобы соединить фронтенд и бэкенд, мы будем проксировать API-запросы с сервера разработки React на сервер Go:

1. Откройте package.json файл в client каталоге.
2. Добавьте следующую строку в файл внутри scripts раздела:

 "proxy": "http://localhost:8000"

1. Сохраните package.json файл и перезапустите сервер разработки React.
2. Теперь интерфейсный интерфейс может отправлять запросы API на внутренний сервер, не беспокоясь о проблемах CORS. Обновите URL-адрес сервера в getUsers функции в main.go файле /users вместо абсолютного URL-адреса.
3. Перезапустите сервер Go и сервер разработки React.

Развертывание

Чтобы развернуть веб-приложение, мы можем создать интерфейс React и запустить сервер Go на сервере производственного уровня:

1. Создайте интерфейс React, выполнив следующую команду внутри client каталога:

 $ npm run build

1. Добавьте в main.goфайл следующий код для обслуживания статических файлов, созданных сборкой React:

 import (
     "log"
     "net/http"
 )
    
 func main() {
     // ... existing code ...
    
     fs := http.FileServer(http.Dir("../client/build"))
     http.Handle("/", fs)
    
     log.Fatal(http.ListenAndServe(":8000", nil))
 }

1. Соберите и запустите сервер Go:

 $ go build
 $ ./server

1. Посетите http://localhost:8000, чтобы увидеть развернутое веб-приложение.

Заключение

В этом уроке мы создали веб-приложение, используя Go для бэкэнда и React для фронтенда. Мы рассмотрели создание REST API, интеграцию с базой данных, настройку React, создание компонентов пользовательского интерфейса и соединение внешнего и внутреннего интерфейса.

Это руководство лишь поверхностно коснулось того, чего можно достичь с помощью Go и React, но оно послужило хорошей отправной точкой для создания веб-приложений. Продолжайте исследовать и экспериментировать, чтобы раскрыть весь потенциал этих мощных технологий.