[Перевод] Создание системы чата с помощью Go и ReactJS (1)

Go

В этом разделе полный код:GitHub

Мы начнем этот курс с создания двух проектов. Как только мы закончим со скучной настройкой, пришло время начать добавлять новые функции и создавать наше приложение, и мы увидим некоторые положительные результаты!

Цель

К концу этой части курса вы освоите:

  • существуетbackend/Создайте базовое приложение Go в каталоге
  • существуетfrontend/Создайте базовое приложение ReactJS в каталоге

Реализуя эти две части, вы сможете добавить некоторые функции в систему чата на следующих нескольких уроках.

Готов к работе

Чтобы завершить эту серию руководств, нам сначала нужно выполнить следующие приготовления.

  • необходимо установитьnpm
  • необходимо установитьnpx. Это можно ввестиnpm install -g npxУстановить.
  • Языковая версия Go должна соответствовать версии 1.11+.
  • Для разработки этого проекта требуется редактор кода, например VS.

Настройка бэкэнд-проекта Go

Если вы знакомы с Go, этот шаг очень прост, мы сначала создаем файл в каталоге проекта с именемbackendновый каталог.

этоbackendКаталог будет содержать весь код GO для проекта. Затем мы инициализируем наш проект со следующей командой:

$ cd backend
$ export GO111MODULE=on
$ go mod init github.com/TutorialEdge/realtime-chat-go-react

ДолженbackendКаталог использует модули go для инициализации нашего проекта, после инициализации мы можем начать писать проект и сделать из него полноценное приложение Go.

  • go.mod— Этот файл немного похож на package.json в проектах NodeJS. В нем подробно описаны пакеты и версии, необходимые нашему проекту для его сборки и запуска.
  • go.sum- Этот файл используется для проверки, в него записывается версия и хеш-значение каждой зависимой библиотеки.

Примечание. Для получения дополнительной информации о том, что нового в модулях Go, ознакомьтесь с официальной вики-документацией:Go Modules

Ознакомьтесь с проектом Go

Как только мы находимся вbackend/Звонить в каталогgo mod init, мы проверим, все ли работает должным образом.

существуетbackend/Добавьте каталог с именемmain.goи добавьте в него следующий код Go:

package main

import "fmt"

func main() {
  fmt.Println("Chat App v0.01")
}

сохранить этот контент вmain.goПосле запуска вы получите следующий контент:

$ go run main.go
Chat App v0.01

Если он выполняется успешно, мы можем перейти к настройке нашего внешнего приложения.

Настройка фронтенд-проекта React

Настройка фронтенда будет немного сложнее, для начала нам нужно создатьfrontendкаталог, в котором будет размещен весь наш код ReactJS.

Примечание - мы будем использоватьfacebook/create-react-appдля создания нашего интерфейса React.

$ cd frontend

Затем вам нужно использоватьcreate-react-appПакет для создания новой реактивной приложения. Это можно сделать сnpmУстановить:

$ npm install -g create-react-app

После установки вы сможете создать новое приложение ReactJS с помощью следующей команды:

$ npx create-react-app .

После выполнения этих команд вы должны увидеть нашfrontend/Каталог генерирует базовое приложение ReactJS.

Наша структура каталогов должна выглядеть так:

node_modules/
public/
src/
.gitignore
package.json
README.md
yarn.lock

Локальная программа запускает inventjs

Теперь, когда базовое приложение ReactJS успешно создано, мы можем протестировать его. Введите следующую команду для запуска приложения:

$ npm start

Если все пойдет хорошо, вы увидите приложение ReactJS, скомпилированное и работающее на локальном сервере разработки:http://localhost:3000

Compiled successfully!

You can now view frontend in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.1.234:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

Теперь, когда у нас есть базовое приложение ReactJS, мы можем расширить его в следующих руководствах.

Суммировать

Отлично, теперь, когда внешние и внутренние части нашего проекта успешно настроены, мы можем добавить несколько интересных новых функций.

Следующий раздел: Часть 2 -бэкэнд реализация

оригинал:учебник edge.net/projects/eat…

автор:Elliot ForbesПереводчик:щелк-щелкВычитка:polaris1119

Эта статья написанаGCTTоригинальная компиляция,Перейти на китайский языкЧесть запуска

Категории