Creating a GopherJS React app

Creating a new GopherJS React app

For now, copy/paste/hack any of the example sites.

By default, React's production version .js files (react.min.js and react-dom.min.js) are bundled with a GopherJS build that references the github.com/myitcv/gopherjs/react package. This means you don't have to separately load React (see the Examples Showcase index.html file for example).

To bundle the development version .js files (which "includes many helpful warnings"), provide the build tag debug:

# bundle React development version .js files
gopherjs serve --tags debug

To prevent any bundling at all, use the noReactBundle build tag:

# do not bundle React
gopherjs serve --tags noReactBundle

This obviously requires React to have been loaded separately.

TODO - need a way to init a GopherJS React project

Initial setup

First verify that you can install the reactGen generator and it is on your PATH:

# only if your PATH is not already correct
export PATH="$(dirname $(go list -f '{{.Target}}' github.com/myitcv/gopherjs/cmd/reactGen)):$PATH"

go install github.com/myitcv/gopherjs/cmd/reactGen

Then:

reactGen -help

should show you the options to reactGen, something like:

Usage of reactGen:
  -gglog string
        log level; one of info, warning, error, fatal (default "fatal")
  -licenseFile string
        file that contains a license header to be inserted at the top of each generated file

Writing components

Let's assume we want to create a variant on the HelloMessage component:

// hello_message.go

package hellomessage

import (
	"github.com/myitcv/gopherjs/react"
)

//go:generate reactGen

// Step 1
// Declare a type that has (at least) an anonymous embedded react.ComponentDef 
// (it can have other fields); this type must have the suffix 'Def', which corresponds to
// 'Definition'
//
type HelloMessageDef struct {
	react.ComponentDef
}

// Step 2
// Optionally declare a props type; the naming convention is *Props
//
type HelloMessageProps struct {
	Name string
}

// Step 3
// Optionally declare a state type; the naming convention is *State
//
type HelloMessageState struct {
	count int
}

// Step 4
// Declare a function to create instances of the component. If your component
// requires props to be specified, add this to the function signature. If the 
// props are optional, use a props pointer type.
//  
// This function must make a call to react.BlessElement with the value that is then
// returned.
//
// Convention is that this function is given the name of the component, HelloMessage
// in this instance. Because this component has props, we also accept these as part
// of the constructor.
//
func HelloMessage(p HelloMessageProps) *HelloMessageDef {
	res := &HelloMessageDef{}

	react.BlessElement(res, p)

	return res
}

// Step 5
// Define a Render method on the component's pointer type
//
func (r *HelloMessageDef) Render() Element {
	return Div(nil,
		S("Hello "+r.Props().Name),
	)
}

Now we run go generate (in the same directory as the component itself) to generate helper methods:

go generate

At this point you are done defining the component. Always re-run go generate after making changes to a component (you might like to setup a watcher to do just this)

You can now optionally implement:

• ComponentWillMount()
• ComponentDidMount()
• ComponentWillReceiveProps(...)
• GetInitialState() ...
• ComponentWillUnmount()

not forgetting to re-run go generate after any change.

See the various examples for instances of these methods but take note of the Gotchas

Creating state trees with stateGen

Notes on stateGen to follow