JSX

• aka Javascript XML or JavaScript Syntax eXtension
• XML-like extension of Javascript
• It removes the need for complex React.createElement() function calls, making the code cleaner and more readable
• React does not need JSX to work but it is recommended to use
• JSX can be transpiled to JS using Babel
• https://legacy.reactjs.org/docs/introducing-jsx.html

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
 
// is same as
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Why className attribute in JSX instead of class?

• https://stackoverflow.com/questions/46989454/class-vs-classname-in-react-16
• Because class is a reserved keyword in Javascript