JSX: In A Nutshell

JSX is a syntax extension to JavaScript. JSX may remind you of a template language, but it comes with the full power of JavaScript.

We can put the JavaScript syntax between the React component or HTML tag within the curly brackets. React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

For example

Put variable to HTML tag within the curly brackets.

function greeting (props) {
  const text = 'JSX is cool'

  return (
    <h3> {text} </h3> // will show JSX is cool
  );
}

Embedding expressions in JSX

You can put any valid JavaScript expression inside the curly braces in JSX.

function greeting (props) {
  const formatName = (user) => {
    return user.firstName + '' + user.lastName;
  }

  const user = {
    firstName: 'John',
    lastName: 'Doe'
  };

  return (
    <h3>Hello, { formatName(user) }! </h3> // will show Hello, John Doe
  );
}

JSX is an expression too

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. You can use JSX inside of if statements and for loops.

function getGreeting(user) {
  if (user) {
    return <h3>Hello, {formatName(user)}!</h3>;
  }
  return <h3>Hello, World!</h3>;
}

Specifying attributes with JSX

You may use quotes to specify string literals as attributes or use curly braces to embed a JavaScript expression in an attribute.

const element = <div tabIndex="0"></div>;

const element = <img src={user.avatarUrl}></img>

Specifying children with JSX

If a tag is empty, you may close it immediately with />, just like XML.

const element = <img src={user.avatarUrl}/>;

JSX tags may contain children

const element = {
  <div>
    <h2>Hey,</h2>
    <h5>JSX is super cool.</h5>
  </div>
};

JSX represents Objects

Babel compiles JSX down to React.createElement() calls

const element (
  <h3 className="greeting">
    Hello, World!
  </h3>
);

const element = Create.reactElement(
  'h3'
  {className: 'greeting'},
  'Hello, World!'
);

Two examples above are identical ones.

React.createElement

React.createElement()performs a few checks to help you write bug-free code but essentially it creates an object called React Elements. You can think of them as descriptions of what you want to see on the screen.

That's all for now folks. Happy coding day!