Как быстро запустить Wails 2 с React: простая инструкция для новичков

Привет! Если ты ищешь способ сделать кроссплатформенное приложение с красивым интерфейсом и при этом не хочешь заморачиваться с кучей сложных технологий — добро пожаловать! Сегодня расскажу, как быстро начать работать с Wails 2 и React. Всё просто, понятно и без лишней воды.

Шаг 1: подготовим всё, что нужно

Установка Go

Загляни на https://golang.org/dl/ и скачай свою версию. После установки проверь командой:

go version

Если всё ок — переходим дальше.

Установка Node.js

На https://nodejs.org/ скачай установщик под свою ОС. После установки проверь:

node -v
npm -v

Если видишь версии — отлично!

Установка Wails CLI

Открывай терминал и вводи:

go install github.com/wailsapp/wails/v2/cmd/wails@latest

После этого убедись, что папка GOPATH/bin добавлена в переменную окружения PATH — иначе команда wails не будет работать из любой папки.

Шаг 2: создаём проект с React

Теперь самое интересное — создадим новый проект командой:

wails init -n my-react-app -t react

Это быстро сделает структуру проекта, где у тебя уже будет готов React-фронтенд внутри папки frontend.

Шаг 3: глянем, что получилось

После запуска команда создаст папки примерно так:

my-react-app/
├── backend/          # Тут пишем на Go
├── frontend/         # Тут React-штуки
├── go.mod            # Модуль Go
└── wails.json        # Настройки проекта

Всё очень удобно: фронтенд и бэкенд в одном месте.

Шаг 4: запускаем фронтенд

Переходим в папку frontend:

cd frontend

Запускаем локальный сервер разработки:

npm run dev

Через пару секунд откроется браузер по адресу http://localhost:3000. Тут ты можешь играться с интерфейсом, добавлять кнопки или что угодно.

Шаг 5: связываем фронт с бэком

В файле backend/main.go можно прописать функции, которые будут доступны из React. Например:

package main

import (
    "github.com/wailsapp/wails/v2"
)

type App struct{}

func (a *App) SayHello(name string) string {
    return "Привет, " + name + "!"
}

func main() {
    app := wails.CreateApp(&wails.AppConfig{
        Width:   1024,
        Height:  768,
        Title:   "Мое крутое приложение",
        JSBind:  []string{"App"},
    })

    app.Bind(&App{})

    if err := app.Run(); err != nil {
        println("Что-то пошло не так:", err.Error())
    }
}

А в React вызываем так:

import { invoke } from '@wailsapp/wails';

async function sayHi() {
  const message = await invoke('SayHello', 'Мир');
  console.log(message); // Выведет: Привет, Мир!
}

Легко и просто! Теперь у тебя есть полноценное приложение с интерфейсом на React и логикой на Go.

Шаг 6: запуск в реальном времени

Чтобы сразу видеть все изменения — запускай команду из корня проекта:

wails dev

И всё — твое приложение запустится и будет автоматически обновляться при редактировании файлов.

Итог

Вот так просто можно начать работу с Wails 2 + React. Установил всё — создал проект — поигрался с интерфейсом — связал его с логикой на Go. Всё реально быстро и удобно!

Если вдруг застрянешь или появятся вопросы — смотри официальную документацию https://wails.io/docs/ или пиши мне. Удачи в создании крутых приложений!