react

package module
v1.0.9 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Feb 9, 2020 License: MIT Imports: 5 Imported by: 2

README

react

Go with React GoDoc Go Report Card

Facebook's React is one of the most dominant libraries for front-end development around. Google's Go programming language is one of the most elegantly crafted languages for server development. Why not combine the two?

This package is an extremely thin wrapper over the native react.js API. The objective was to make it light-weight, developer-friendly and intuitive. You shouldn’t have to scour the documentation to get going — a few peeks should be adequate. If you know your way around the React API and you know a bit of Go, then you should be able to make prototypes and production-worthy applications in no time.

This package is best suited for making Desktop applications using these technologies:

The package is production ready. An optional (but highly convenient) elements sub-package is also included.

See Tutorial here.

⭐ the project to show your appreciation.

Dependencies

Installation

go get -u github.com/rocketlaunchr/react

Examples

The examples can be found here:

Uptime Timer
  • How to create React class components
  • How to pass props from parent to child
  • How to use UnmarshalProps() and UnmarshalState()
  • How to use state() and setState()
  • How to create strongly-typed structured props and states
Event Handling
  • How to create React functional components
  • How to handle events (and pass extra arguments)
  • How to create a Ref and interact with dom object directly
Desktop Application
  • 100% written in Go
  • Cross-platform (macOS, Win, Linux)
  • Electron.js based
  • How to bundle javascript dependencies using rollup.js

Performance Tips

  • Use -m command line flag to instruct gopher.js to minify code. Then bundle+minify further with rollup.js xor Webpack/UglifyJS. A Webpack tutorial can be found here.
  • Apply gzip compression
  • Use int instead of (u)int8/16/32/64
  • Use float64 instead of float32
  • Avoid importing fmt at all costs (including indirectly). Use fmtless instead.
  • Avoid importing net/http for http requests (including indirectly). Use gopherjs-xhr instead.
  • Until GopherJS supports Go1.13+, avoid using the standard libraries context package because it uses fmt. Instead use context from forks sub-package.
  • Avoid importing honnef.co/go/js/dom if possible.
  • Use react.JSFn() and use native javascript functions as much as possible.
  • https://github.com/gopherjs/gopherjs/wiki/JavaScript-Tips-and-Gotchas
  • See if jsgo is appropriate for your web-based project.
  • To reduce file size, copy only what's required from elements sub-package.
  • For json unmarshaling, try slim-decoder or use json

Future Work

  • WebAssembly version Help Required

The license is a modified MIT license. Refer to LICENSE file for more details.

© 2018-20 PJ Engineering and Business Solutions Pty. Ltd.

Final Notes

Feel free to enhance features by issuing pull-requests.

Documentation

Index

Constants

This section is empty.

Variables

View Source 
var (
	// React points to the React library. Change it
	// if it is not in your global namespace.
	//
	// See: https://www.npmjs.com/package/react
	React = js.Global.Get("React")

	// ReactDOM points to the ReactDOM library. Change it
	// if it is not in your global namespace.
	//
	// See: https://www.npmjs.com/package/react-dom
	ReactDOM = js.Global.Get("ReactDOM")

	// CreateReactClass points to create-react-class module.
	//
	// See: https://www.npmjs.com/package/create-react-class
	CreateReactClass = js.Global.Get("createReactClass")

	// PureComponentMixin points to react-addons-pure-render-mixin module.
	// It is optional, but required if you want to create a PureComponent.
	//
	// Example:
	//
	//  pureDef := react.NewClassDef("Pure", react.PureComponentMixin)
	//
	// See: https://www.npmjs.com/package/react-addons-pure-render-mixin
	PureComponentMixin = js.Global.Get("PureRenderMixin")
)

Functions

func AddClass 

func AddClass(currentClasses, newClass string) string

AddClass adds a new class to an existing list of classes.

func CloneElement 

func CloneElement(element interface{}, props interface{}, children ...interface{}) *js.Object

CloneElement is used to clone and return a new React Element.

See: https://reactjs.org/docs/react-api.html#cloneelement

func CreateClass 

func CreateClass(def ClassDef) *js.Object

CreateClass is used to create a react component.

See: https://reactjs.org/docs/react-without-es6.html

func CreateContext 

func CreateContext(defaultValue ...interface{}) (Context *js.Object, Provider *js.Object, Consumer *js.Object)

CreateContext is used when you want to pass data to a deeply embedded child component without using props.

See: https://reactjs.org/docs/context.html#reactcreatecontext

func CreateRef 

func CreateRef() *js.Object

CreateRef will create a Ref.

See: https://reactjs.org/docs/refs-and-the-dom.html

func DangerouslySetInnerHTML 

func DangerouslySetInnerHTML(inside interface{}) map[string]interface{}

DangerouslySetInnerHTML is a convience function used for setting the DOM object's inner html. The function takes the inner html content directly.

See: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

func DangerouslySetInnerHTMLFunc 

func DangerouslySetInnerHTMLFunc(inside func() interface{}) map[string]interface{}

DangerouslySetInnerHTMLFunc is a convience function used for setting the DOM object's inner html. The functon takes a function for the argument.

See: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

func ForceUpdate 

func ForceUpdate(this *js.Object, callback ...func())

ForceUpdate will force a rerender of the component.

See: https://reactjs.org/docs/react-component.html#forceupdate

func ForwardRef 

func ForwardRef(component interface{}) *js.Object

ForwardRef will forward a Ref to child components.

See: https://reactjs.org/docs/forwarding-refs.html

func Fragment 

func Fragment(key *string, children ...interface{}) *js.Object

Fragment is used to group a list of children without adding extra nodes to the DOM.

See: https://reactjs.org/docs/fragments.html

func GetElementByID 

func GetElementByID(id string, dom ...*js.Object) *js.Object

GetElementByID will return the first element with the specified id in the dom object. If no dom is provided, window.document will be used.

func HydrateProps deprecated 

func HydrateProps(this *js.Object, strct interface{}) error

HydrateProps will hydrate a given struct with values from the component's prop. strct must be a pointer to a struct.

Deprecated: Use UnmarshalProps instead.

func HydrateState deprecated 

func HydrateState(this *js.Object, strct interface{}) error

HydrateState will hydrate a given struct with values from the component's state. strct must be a pointer to a struct.

Deprecated: Use UnmarshalState instead.

func JSFn 

func JSFn(funcName string, args ...interface{}) (_ *js.Object, rErr error)

JSFn is a convenience function used to call javascript native functions. If the native function throws an exception, then a *js.Error is returned.

Example: 

// alert('Hello World!')
JSFn("alert", "Hello World!")

// JSON.parse('{"name":"John"}')
JSFn("JSON.parse", `{"name":"John"}`)

func JSONUnmarshal 

func JSONUnmarshal(json string) (*js.Object, error)

JSONUnmarshal provides a simple way to unmarshal json encoded strings to structs.

See: https://github.com/gopherjs/gopherjs/wiki/Using-native-JSON-parsing-to-realize-a-slim-JSON-decoder for a tutorial with an example.

func JSX 

func JSX(component interface{}, props interface{}, children ...interface{}) *js.Object

JSX is used to create an Element.

func M deprecated 

func M(kvs ...interface{}) map[string]interface{}

M is shorthand for map[string]interface{}.

Example: 

react.M("className", "preview", "escapeHtml", false)
js.M{"className": "preview", "escapeHtml": false}

// Instead of
map[string]interface{}{"className": "preview", "escapeHtml": false}

Deprecated: Use js.M instead (for type safety, linting and formatting).

func Profiler 

func Profiler(id string, onRender OnRenderCallback, children ...interface{}) *js.Object

Profiler is used to find performance bottlenecks in your application.

See: https://reactjs.org/docs/profiler.html

func RemoveClass 

func RemoveClass(currentClasses, removeClass string) string

RemoveClass removes a class from an existing list of classes.

func Render 

func Render(element *js.Object, domTarget *js.Object, callback ...func()) *js.Object

Render will render component to the specified target dom element.

func SToMap 

func SToMap(s interface{}) map[string]interface{}

SToMap will convert a struct or pass-through a map. If the argument is a struct, it will convert it to a map. If the argument is a map, it will pass it through. If the argument is nil, it will return nil.

func UnmarshalProps 

func UnmarshalProps(this *js.Object, strct interface{}) error

UnmarshalProps will unmarshal a given struct with values from the component's prop. strct must be a pointer to a struct.

func UnmarshalState 

func UnmarshalState(this *js.Object, strct interface{}) error

UnmarshalState will unmarshal a given struct with values from the component's state. strct must be a pointer to a struct.

func UnmarshalStruct 

func UnmarshalStruct(mp map[string]interface{}, strct interface{}) error

UnmarshalStruct will unmarshal a struct with values from a map. strct must be a pointer to a struct. Use struct tag "react" for linking map keys to the struct's fields.

Types

type ClassDef 

type ClassDef map[string]interface{}

ClassDef is used to create custom React components.

func NewClassDef 

func NewClassDef(displayName string, mixins ...interface{}) ClassDef

NewClassDef will create an empty class definition which can immediately be used to create a React component. displayName is the text that is shown in Chrome's React Developer Tools.

Example: 

// Create PureComponent
pureDef := react.NewClassDef("Pure", react.PureComponentMixin)

// Create Component
appDef := react.NewClassDef("App")

See: https://reactjs.org/docs/react-api.html#reactpurecomponent and https://reactjs.org/docs/react-component.html

func (ClassDef) ComponentDidCatch 

func (def ClassDef) ComponentDidCatch(f func(this *js.Object, err, info *js.Object, props, state Map, setState SetState))

ComponentDidCatch sets the componentDidCatch method.

See: https://reactjs.org/docs/react-component.html#componentdidcatch

func (ClassDef) ComponentDidMount 

func (def ClassDef) ComponentDidMount(f func(this *js.Object, props, state Map, setState SetState))

ComponentDidMount sets the componentDidMount method.

See: https://reactjs.org/docs/react-component.html#componentdidmount

func (ClassDef) ComponentDidUpdate 

func (def ClassDef) ComponentDidUpdate(f func(this *js.Object, prevProps, props, prevState, state Map, setState SetState, snapshot *js.Object))

ComponentDidUpdate sets the componentDidUpdate method.

See: https://reactjs.org/docs/react-component.html#componentdidupdate

func (ClassDef) ComponentWillUnmount 

func (def ClassDef) ComponentWillUnmount(f func(this *js.Object, props, state Map))

ComponentWillUnmount sets the componentWillUnmount method.

See: https://reactjs.org/docs/react-component.html#componentwillunmount

func (ClassDef) GetDefaultProps 

func (def ClassDef) GetDefaultProps(f func(this *js.Object) interface{})

GetDefaultProps sets the getDefaultProps method.

See: https://reactjs.org/docs/react-without-es6.html#declaring-default-props

func (ClassDef) GetDerivedStateFromError 

func (def ClassDef) GetDerivedStateFromError(f func(err *js.Object) interface{})

GetDerivedStateFromError sets the getDerivedStateFromError class method.

See: https://reactjs.org/docs/react-component.html#static-getderivedstatefromerror

func (ClassDef) GetDerivedStateFromProps 

func (def ClassDef) GetDerivedStateFromProps(f func(props, state Map) interface{})

GetDerivedStateFromProps sets the getDerivedStateFromProps class method.

See: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

func (ClassDef) GetInitialState 

func (def ClassDef) GetInitialState(f func(this *js.Object, props Map) interface{})

GetInitialState sets the getInitialState method. Note: It is usually not recommended to use the props when setting the initial state.

func (ClassDef) GetSnapshotBeforeUpdate 

func (def ClassDef) GetSnapshotBeforeUpdate(f func(this *js.Object, prevProps, props, prevState, state Map) interface{})

GetSnapshotBeforeUpdate sets the getSnapshotBeforeUpdate method.

See: https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate

func (ClassDef) Render 

func (def ClassDef) Render(f func(this *js.Object, props, state Map) interface{})

Render sets the render method.

See: https://reactjs.org/docs/react-component.html#render

func (ClassDef) SetEventHandler 

func (def ClassDef) SetEventHandler(name string, f func(this *js.Object, e *SyntheticEvent, props, state Map, setState SetState))

SetEventHandler allows a custom event handler to be attached. By passing nil for f, the handler can also be detached (cleared).

It can be used like this: "onClick": this.Get("clickhandler")

func (ClassDef) SetMethod 

func (def ClassDef) SetMethod(name string, f func(this *js.Object, props, state Map, setState SetState, arguments []*js.Object) interface{})

SetMethod allows a custom method to be attached. By passing nil for f, the method can also be detached (cleared).

func (ClassDef) SetMultiArgEventHandler 

func (def ClassDef) SetMultiArgEventHandler(name string, f func(this *js.Object, arguments []*js.Object) func(this *js.Object, e *SyntheticEvent, props, state Map, setState SetState))

SetMultiArgEventHandler allows for you to pass custom arguments to a custom event handler. By passing nil for f, the handler can also be detached (cleared).

It can be used like this: "onClick": this.Get("clickhandler").Invoke(5)

See: https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

func (ClassDef) SetPropTypes 

func (def ClassDef) SetPropTypes(propTypes interface{})

SetPropTypes is used to typecheck and validate props.

See: https://reactjs.org/docs/typechecking-with-proptypes.html

func (ClassDef) ShouldComponentUpdate 

func (def ClassDef) ShouldComponentUpdate(f func(this *js.Object, props, nextProps, state, nextState Map) bool)

ShouldComponentUpdate sets the shouldComponentUpdate method.

See: https://reactjs.org/docs/react-component.html#shouldcomponentupdate

type Map 

type Map func(key string) *js.Object

Map is a convenience method that can be used to access fields in a js object.

type OnRenderCallback 

type OnRenderCallback func(id string, phase string, actualDuration, baseDuration float64, startTime, commitTime float64, interactions *js.Object)

OnRenderCallback is the callback function signature of the onRender argument to Profiler function.

type Set 

type Set map[string]string

Set is used for conveniently dealing with data-* and aria-* attributes.

See: https://reactjs.org/docs/dom-elements.html

func (Set) Convert 

func (s Set) Convert(base string) map[string]string

Convert is used to transform a set of suffix attributes to the actual attributes by prefixing them with a base.

type SetState 

type SetState func(updater interface{}, callback ...func())

SetState is used to asynchronously update the state. If the new state is dependent on the current props or state, updater must be of type UpdaterFunc.

See: https://reactjs.org/docs/react-component.html#setstate

type SyntheticEvent 

type SyntheticEvent struct {
	// O represents the original React SyntheticEvent.
	O *js.Object
}

SyntheticEvent represents a SyntheticEvent.

See: https://reactjs.org/docs/events.html#overview

func (*SyntheticEvent) Bubbles 

func (s *SyntheticEvent) Bubbles() bool

Bubbles ...

See: https://reactjs.org/docs/events.html#overview

func (*SyntheticEvent) Cancelable 

func (s *SyntheticEvent) Cancelable() bool

Cancelable ...

See: https://reactjs.org/docs/events.html#overview

func (*SyntheticEvent) CurrentTarget 

func (s *SyntheticEvent) CurrentTarget() *js.Object

CurrentTarget ...

See: https://reactjs.org/docs/events.html#overview

Example: 

import "honnef.co/go/js/dom"

dom.WrapHTMLElement(e.CurrentTarget())

func (*SyntheticEvent) DefaultPrevented 

func (s *SyntheticEvent) DefaultPrevented() bool

DefaultPrevented ...

See: https://reactjs.org/docs/events.html#overview

func (*SyntheticEvent) EventPhase 

func (s *SyntheticEvent) EventPhase() int

EventPhase ...

See: https://reactjs.org/docs/events.html#overview

func (*SyntheticEvent) IsDefaultPrevented 

func (s *SyntheticEvent) IsDefaultPrevented() bool

IsDefaultPrevented ... See: https://reactjs.org/docs/events.html#overview

func (*SyntheticEvent) IsPropagationStopped 

func (s *SyntheticEvent) IsPropagationStopped() bool

IsPropagationStopped ...

See: https://reactjs.org/docs/events.html#overview

func (*SyntheticEvent) IsTrusted 

func (s *SyntheticEvent) IsTrusted() bool

IsTrusted ...

See: https://reactjs.org/docs/events.html#overview

func (*SyntheticEvent) NativeEvent 

func (s *SyntheticEvent) NativeEvent() *js.Object

NativeEvent ...

See: https://reactjs.org/docs/events.html#overview

Example: 

import "honnef.co/go/js/dom"

dom.WrapEvent(e.NativeEvent())

func (*SyntheticEvent) Persist 

func (s *SyntheticEvent) Persist() *SyntheticEvent

Persist is used if you want to access properties in an asynchronous way.

See: https://reactjs.org/docs/events.html#event-pooling

func (*SyntheticEvent) PreventDefault 

func (s *SyntheticEvent) PreventDefault()

PreventDefault ...

See: https://reactjs.org/docs/events.html#overview

func (*SyntheticEvent) StopPropagation 

func (s *SyntheticEvent) StopPropagation()

StopPropagation ...

See: https://reactjs.org/docs/events.html#overview

func (*SyntheticEvent) Target 

func (s *SyntheticEvent) Target() *js.Object

Target ...

See: https://reactjs.org/docs/events.html#overview

Example: 

import "honnef.co/go/js/dom"

dom.WrapHTMLElement(e.Target())

func (*SyntheticEvent) TimeStamp 

func (s *SyntheticEvent) TimeStamp() float64

TimeStamp ...

See: https://reactjs.org/docs/events.html#overview

func (*SyntheticEvent) Type 

func (s *SyntheticEvent) Type() string

Type ...

See: https://reactjs.org/docs/events.html#overview

type UpdaterFunc 

type UpdaterFunc func(props, state Map) interface{}

UpdaterFunc is the first argument for SetState function.

See: https://reactjs.org/docs/react-component.html#setstate

Source Files

View all Source files

Directories

Path Synopsis
examples
event_handling
uptime
forks
context
encoding/json
Package json implements encoding and decoding of JSON objects as defined in RFC 4627.
 Package json implements encoding and decoding of JSON objects as defined in RFC 4627.
fmtless
mapstructure
Package mapstructure exposes functionality to convert an arbitrary map[string]interface{} into a native Go structure.
 Package mapstructure exposes functionality to convert an arbitrary map[string]interface{} into a native Go structure.

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.