Search⌘ K
AI Features
Home
Courses
Reactive Programming with RxJS

Using JSX to Write UI

Explore how to write user interfaces using JSX in Cycle.js-based React web applications. Understand the role of JSX as a syntax extension, how to integrate it with JavaScript, and how to compile JSX code using tools like Babel and Babelify for seamless UI development.

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:

JavaScript (JSX)
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 ...