react: enhance JSX

[lijianying10]

In package react/jsx too many tags not implementation.

Since that, I have added a new function CreateElementFromJS after several days of usage. And it works well.

How to use this function

First install NPM dependance

yarn add babel-cli babel-preset-react --dev

Write JSX file and compile it

babel someComponent.jsx -o someComponentGen.js -w

Definitely babel will watch source code change and auto compile it into js.

Import someComponentGen.js to index.html

Usage in Go

Example: someComponent.jsx

function componentDetail(toolbar, ServiceName, Ports, Domain, Cluster, Namespace,
                         btn_Edit, btn_Delete, btn_NewVersion, versionCards) {
    return <div>
        {toolbar}
        <div className="mdl-grid component-detail">
            <div className="mdl-cell mdl-cell--5-col no-padding">
                <div className="mdl-grid no-padding">
                    <div className="mdl-cell mdl-cell--12-col service-border ui raised segment">
                        <div className="mdl-grid no-padding">
                            <div className="mdl-cell mdl-cell--10-col">
                                <div>{ServiceName}</div>
                            </div>
                            <div className="mdl-cell mdl-cell--2-col align-right">
                                <div>Ports:{Ports}</div>
                            </div>
                            <div className="mdl-cell mdl-cell--12-col">
                                <a href={Domain} target="_blank">{Domain}</a>
                            </div>
                            <div className="mdl-cell mdl-cell--8-col">
                        <span className="mdl-chip">
                            <span className="mdl-chip__text">Cluster: {Cluster}</span>
                        </span>
                                <span className="mdl-chip">
                            <span className="mdl-chip__text">Namespace: {Namespace}</span>
                        </span>
                            </div>
                            <div className="mdl-cell mdl-cell--4-col align-right">
                                {btn_Edit}
                                {/*{btn_Delete}*/}
                                {btn_NewVersion}
                            </div>
                        </div>
                    </div>
                </div>
                {versionCards}
            </div>
        </div>
    </div>

}

Then in go

react.CreateElementFromJS(js.Global.Call("componentDetail",
        // Insert your Component
))

conclude

It's much more clear for manage components and convenience upgrade webpage.

[myitcv]

@lijianying10 I'm a little clear what the use case is here.

Not long ago we merged a change to improve the core React element generator, which also generates the JSX "half" too.

We will ultimately move to generating based on the HTML 5 spec, which will mean we get full coverage on elements and attributes

Does the current master make things better in your opinion?