JSX

What is JSX?

JSX is a syntax extension for JS that lets you write HTML-like mark-up in a JS file

JSX: Markup into JavaScript

As the web became more interactive, logic increasingly detremined content. JavaScript was in charge of the HTML.

Keeping a button's rendering logic and markup together ensures that they are staying in sync with each other and conversely details that are unrelated are not affected and isolated from each other. Thus making it safer to change either of them on their own.

React Docs - Writing Markup with JSX (opens in a new tab)

JSX Relation to React.createElement

React Docs - React without JSX (opens in a new tab)

React Docs - createElement (opens in a new tab)

Essentially just syntaxic sugar, for calling the React.createElement function, anything writen in jsx can be translated to plain JavaScript