JSX

Okay... but what is that <App />-thing? Is that an html tag? No, that <App /> tag is a syntax called JSX (Javascript Syntax Extension)!

Although it takes "some getting used to" at first to use JSX syntax, you'll see that in the end - if used properly - it produces very elegant and very explanatory code. Just look at the example below:

const name = 'Johnny' 
const data = <div>
                <span>{ name }</span>
             </div> 

As you can see the HTML syntax (or rather XML syntax) is included directly in a JavaScript statement, and it also includes a variable ({ name }). So you can create and display a complete screen component in one go. Since most browsers do not (yet) support JSX, our application is converted to regular JavaScript via Babel. If we run this code on https://babeljs.io/repl we will see what Babel makes of it:

The JSX code is a lot more charming after all.... In the rest of this workshop we will use JSX syntax, if it is not exactly clear now, it will come to you in the course of the workshop.