使用Go打包二进制React单页面应用

import React, {useState} from 'react'

export const Todo = ({handleAdd}) => {
    const [description, setDescription] = useState('')

    return (<form onSubmit={x => handleAdd({description})}>
        <input type="text" value={description} onChange={x => setDescription(x.target.value)}></input>
        <button disabled={description.length < 1}>Add</button>
    </form>)
}

import React, {Component, Fragment} from 'react'
import {Todo} from './Todo'

import './Todos.css'

export class Todos extends Component {
    constructor() {
        super()
        this.state = {
            todos: [],
            waiting: false
        }
        this.handleAdd = this.handleAdd.bind(this)
    }

    componentDidMount() {
        this.setState({waiting: true})
        fetch('/todo')
            .then(response => {
                this.setState({waiting: true})
                if (response.status === 200) {
                    return response.json()
                }
            })
            .then(todos => {
                this.setState({todos})
            })
            .finally(() =>{
                this.setState({waiting: false})
            })
    }

    handleAdd(todo) {
        if (!todo.description) return
        this.setState({waiting: true})
        fetch('/todo', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(todo)
        })
            .then(response => {
                this.setState({waiting: true})
                if (response.status === 200) {
                    return response.json()
                }
            })
            .then(todos => {
                this.setState({todos})
            })
            .finally(() =>{
                this.setState({waiting: false})
            })
    }

    render() {
        const renderInput = () => {
            const {waiting} = this.state
            if (!waiting) {
                return (
                    <Todo handleAdd={this.handleAdd}/>
                )
            }
            return (<div>Waiting...</div>)
        }

        return (
            <Fragment>
                <ul className="Todos">
                    {this.state.todos != null ? (
                        this.state.todos.map(x => (<li>
                        {x.description}
                        </li>))) : null
                    }
                </ul>
                {renderInput()}
            </Fragment>
        )
    }
}

import React, { Component } from 'react'
import {Todos} from './Todos'
import logo from './logo.svg';
import './App.css';

export default class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          Todo App
        </header>

        <Todos/>
      </div>
    )
  }
}