Basically, JSX allows you to use HTML-like syntax along with code expressions. You use HTML elements to construct the visual tree and embed code expressions enclosed inside curly braces, inline, or as an attribute value, as follows:

render() {
  const text = 'Hello JSX';
  const textClass = 'attention';
 
  return (
    <span className="{textClass}">{text}</span>
  );
}

Notice the use of the className attribute. React discourages the use of XML attributes that correspond to JavaScript-reserved keywords and recommends using the DOM property names instead. For example, className instead of class and htmlFor instead of for.

Having the user interface written in code opens up everything developers love about code. You can refactor and reuse it, just as any other code, into variables and functions:

getHeader(headerText) {
  return (
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h1 className="App-title">{headerText}</h1>
    </header>
  );
}
 
render() {
  const header = this.getHeader('Hello JSX');
  return (
    <div className="App">
      {header}
    </div>
  );
}