Introduction to JSX

To be able to write components in React, we need to understand the primary templating language that React uses to build a component: JSX. The best way to describe JSX is as a type of hybrid between HTML and JavaScript.

JSX represents the easiest way to break down the boundaries between the HTML that you use as a basic markup for your web page, basically the UI of your app and the JavaScript that you need to make your app interactive. Ultimately, the JSX gets turned into JavaScript function calls behind the scenes, which enables you to write your components in a way that is comfortable and familiar for people used to working with writing HTML for a browser.

You can use most of the standard HTML tags and syntax that you already know (with a few notable exceptions), but you can also intersperse JavaScript into your templates to better approach laying things out programmatically. The idea is that if you can read HTML and JavaScript, you should be able to read...