React: JSX

Table of Contents

JSX

JavaScript XML: Extension to JavaScript syntax.

  • Write XML like code for elements and components.
  • JSX tags have a tag name, attributes, and children.
  • Not a necessity to write React applications.
  • Make React code simpler and elegant.
  • Transpiles to pure JS which is understood by the browser.

With JSX

JSX.: syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it.

/src/componenet/Hello.js

import React from "react";

const Hello = () => {
    return (
        <div>
            <h1> Hello with JSX </h1>
        </div>
    )
}

export default Hello
JSX differences
  • Class => className
  • for => htmlFor
  • camelCase property naming conventions:
    • onclick => onClick
    • tabindex => tabIndex

Without JSX

React.createElement: createElement lets you create a React element. It serves as an alternative to writing JSX.

const element = createElement(type, props, ...children)

/src/componenet/Hello.js

import React from "react";

const Hello = () => {
  return React.createElement(
    "div",
    {id: 'hello', className: 'dummy class'},
    React.createElement("h1", null, "Hello without JSX"),
  );
}

export default Hello