Reactive Programming with RxJS/

...

/

Using JSX to Write UI

Using JSX to Write UI

Learn how JSX is used to write the user interface.

We'll cover the following...

Instead of using the h function, we could write our UI using JSX, which is an XML-like syntax extension invented by Facebook that makes writing virtual DOM structures easier and more readable. Our vtreeElements function will look like this:

Press + to interact
function vtreeElementsJSX(results) 
{ 
    results = results.map(function(result) 
    {
        var link = WIKI_URL + result.title;
        return <div><a href={link}>{result.title}</a></div> 
    });
    return <div>
    <h2>Wikipedia Search</h2>
    <input className="search-field" type="text" /> <hr/>
    <div>{results}</div>
    </div>; 
}

Doesn’t it look nicer? JSX looks more familiar to developers because it ...