Skip to content

Render & Create reusable HTML using React style 😁

License

Notifications You must be signed in to change notification settings

alindesign/go-react

Repository files navigation

Golang React

Simple UI library done for fun and to experiment with golang.

Install

$ go get -u github.com/alindesign/go-react

Usage

Default example

package main

import (
    "fmt"
    "github.com/alindesign/go-react"
)

func List(num int) *react.Element {
    var items []interface{}
    for i := 0; i < num; i++ {
        items = append(items, react.CreateElement("li", &react.Props{
            ClassName: fmt.Sprintf("list__item item-%d", i+1),
        }, fmt.Sprintf("Item %d", i+1)))
    }

    return react.CreateElement("ul", &react.Props{
        ClassName: "list__root",
    }, items...)
}

func App() *react.Element {
    return react.CreateElement("div", &react.Props{
        ClassName: "root",
    }, List(4))
}

func main () {
    html, err := react.Render(App())
    if err != nil {
        fmt.Printf("%v\n", err)
    }  

    fmt.Printf("Output: %s\n", html)
}

// Output: <div class="root"><ul class="list__root"><li class="list__item item-1">Item 1</li><li class="list__item item-2">Item 2</li><li class="list__item item-3">Item 3</li><li class="list__item item-4">Item 4</li></ul></div>

Elements

element := react.H1(nil, "child 2")
div := react.Div(nil, "child 1", element)

Fragments

fragment := react.Fragment(
    H1(nil, "Title"),
    H3(nil, "text"),
)

Background

After a long night of no sleep and thinking on a better way to reuse HTML on golang, I started to search for something that has the possibility to create reusable components like on go lang, but without any success and tons of Javascript & React hours, I was thinking to adopt React component definition style, and implemented it in the way I was thinking they have done it.

Contributing

If you have ideas or improvements you can contribute to this library.

Disclaimer

I have done the project pure for fun and experimenting new things, I don't think that my implementation it's the best, so if you think that something can be improved, submit your PR.

TODO

  • Clean up