ReactJS Tutorial - JSX

JSX

---

• JavaScript XML(JSX) - extension to the JavaScript -language syntax.
• extention to write XML-like code for elements and components.
• JSX tags have a tag name, attributes, and children.
• JSX is not a necessity to write React applications.
• JSX ultimately transpiles to pure JavaScript which is understood by the browsers.

What does the code look like without JSX?

---

import React from "react";

const Hello = () => {
  // JSX
  return (
    <div id="id" className="class">
      <h1>Hello World</h1>
    </div>
  ) 

  // without using JSX
  return React.createElement(
    'div', 
    {id: 'id', className: 'class'}, 
    React.createElement('hi', null, 'Hello World')
  )
}

export default Hello;

Basically, each JSX element is just syntactic sugar for calling React.createElement. And that is why we have to import the react library when we use JSX.

import React from "react";

JSX differences

---

• Class → className
• for → htmlFor
• camelCase property naming convention
  • onclick → onClick
  • tabindex → tabIndex

💁 className → class React Fire: Modernizing React DOM

🔗 ReactJS Tutorial - 8 - JSX