Understanding JSX

What is JSX ?

JSX is a XML-like syntax extension to ECMAScript without any defined semantics. It’s NOT intended to be implemented by engines or browsers.

If you are writing a react component, you would come across a syntax like below,

class HelloWorld extends React.Component{
 render() {
  return (<h1 className="title">Hello World</h1>);
 }
}

It looks weird to write the HTML tags in JavaScript but it turn’s out to be super useful. This is JSX( JavaScript eXtension).

Why JSX?

Can we write react component without JSX ?

Yes.

class HelloWorld extends React.Component{
 render(){
   return React.createElement("h1", { className: "title" }, "Hello World");
 }
}

It’s become cumbersome if we have component which have nested child element. The example below shows the code with JSX,

class HelloWorld extends React.Component {
 render() {
  return (
    <div className="wrapper">
      <h1 className="title">Title</h1>
      <h2 className="h2">Sub Heading</h2>
    </div>);
 }
}

Without JSX, the code will look like this,

class HelloWorld extends React.Component {
 render() {
   return React.createElement(
          "div", { className: "wrapper" },
          React.createElement("h1", { className: "title" },"Title"),
          React.createElement("h2", { className: "h2" }, "Sub Heading")
     );
 }
}

JSX code looks succinct and easier to read.

Basically, by using JSX you can write HTML code in JavaScript then Babel transform these expressions into actual JavaScript code.It allows us to put HTML into JavaScript. JSX is like a shorthand for calling React.createElement function. Since it’s a JavaScript, we can execute JavaScript code inside JSX using {} curly-brace syntax.

<div>Sum : { 1+1 }</div>

Note:

JSX syntax is intended to be used by preprocessors to transform HTML-like text in JavaScript files into standard JavaScript objects.

Babel compiler is a subjective selection from React team for transforming ES* code and JSX syntax to ES5 code.

Using JSX, you can leverage the full power of JavaScript in HTML.

You have to close all tags, always.

You have to use className for HTML class attribute.

You have to use htmlFor for HTML for attribute.

The style attribute takes an object of camel-cased style properties

Custom HTML Attributes — If you want to use a custom html attribute, you should prefix it with data-* (like data-custom-attribute)

Read the specification of JSX here.

Babel Docs for JSX transformation.

I hope you found this write up useful. Any suggestions for improvements are very much appreciated !!!