gr's Introduction

Go React

See Also:

GopherJS bindings for Facebook React.

NOTE: Still early and not production ready.

Examples

NOTE: Make sure that your GopherJS is up-to-date before running these: go get -u github.com/gopherjs/gopherjs

For a live demo of the examples below, see http://bego.io/gr/ (may not be up-to-date).

There are some runnable examples in /examples. Just navigate to that folder and do a:

gopherjs serve

Then navigate to http://localhost:8080/github.com/bep/gr/examples/.

To get a sense of the API, here is the click-counter example:

func main() {
	component := gr.New(new(clickCounter))

	gr.RenderLoop(func() {
		component.Render("react", gr.Props{})
	})
}

type clickCounter struct {
	*gr.This
}

// Implements the StateInitializer interface.
func (c clickCounter) GetInitialState() gr.State {
	return gr.State{"counter": 0}
}

// Implements the Renderer interface.
func (c clickCounter) Render() gr.Component {
	counter := c.State()["counter"]
	message := fmt.Sprintf(" Click me! Number of clicks: %v", counter)

	elem := el.Div(
		el.Button(
			gr.CSS("btn", "btn-lg", "btn-primary"),
			gr.Style("color", "orange"),
			gr.Text(message),
			evt.Click(c.onClick)))

	return examples.Example("Click Counter", elem)
}

func (c clickCounter) onClick(event *gr.Event) {
	c.SetState(gr.State{"counter": c.State().Int("counter") + 1})
}

// Implements the ShouldComponentUpdate interface.
func (c clickCounter) ShouldComponentUpdate(next gr.Cops) bool {
	return c.State().HasChanged(next.State, "counter")
}

For help installing GopherJS, please visit that cool project.

Inspiration

This project is highly inspired by Vecty, a promising and pure Go React-like framework. If you're not heavily invested in Facebook's React, take that for a spin.

Recommend Projects