In previous examples, we defined the visual output returned by the render() method of a component by using an HTML-like markup expression. Let's see, for example, the definition of the Catalog component:
import React from 'react';import './Catalog.css';class Catalog extends React.Component { render() { return <div><h2>Catalog</h2></div>; }}export default Catalog;
The markup expression is not using JavaScript syntax, but it is included inside of a JavaScript code snippet. Why do we mix HTML and JavaScript syntaxes? How is that possible?
Let's start by saying that the HTML-like language describing the React component's visual output is called JSX. This language extends JavaScript with XML expressions in order to simplify the creation ...
