JSX

JSX

• JavaScript XML (JSX) - Extension to the JavaScript language syntax
• Write XML-like code for elements and components
• JSX tags have a tag name, attributes, and children
• JSX is not necessity to write React applications
• JSX makes your react code simpler and elegant
• JSX ultimately transpiles to pure JavaScript which is understood by the browsers

With JSX

const Greet = () => {
  return (
    <div className="dummyClass">
      <h1>Hello Mariam</h1>
    </div>
  )
}

Without JSX

const Greet = () => {
  return React.createElement(
    'div',
    { className: 'dummyClass' },
    React.createElement('h1', null, 'Hello Mariam')
  )
}

JSX differences

• class -> className
• for -> htmlFor
• camelCase property naming convention
  • onclick -> onClick
  • tabindex -> tabIndex

Codevolution / ReactJS Tutorial - 8 / JSX