What is JSX?

JSX looks similar to HTML, but it is not HTML. It is a syntax extension for JavaScript, which means it gets compiled into regular JavaScript code by a transpiler(Babel) before executing it in the browser.

It was developed by Facebook as a way to make it easier for developers to build user interfaces (UI) using React, a JavaScript library for building user interfaces.

const element = (
  <h1 className='greeting'>
   Hello JSX
  </h1>
)

The above JSX is equivalent to the following JavaScript code,

const element = React.createElement(
 'h1',
 { className: 'greeting' },
 'Hello JSX'}
)

Babel which converts our JSX to React.createElement()

As you can see above image shows how JSX get converted into React.createElement(). You can learn more about babel on their official documentation.

Embedding JavaScript Expression in JSX

JSX allows you to use JavaScript expression. you can use curly braces to include JavaScript expressions in your JSX code.

const name = 'Saqib';
const element = <h1>Hello, {name}</h1>;

You can use any valid JavaScript expressions inside the curly braces in your JSX code. For example, 1 + 3, user.firstName all are valid javascript expressions.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Mohammad',
  lastName: 'Saqib'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

That's it

Thank you for reading this article. Hope you like it. You can connect with me on Twitter