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!

Comments

[Lakh Bawa]

I always wonder, why there is no need to put quotes or something around the JSX code. Javascript requires you to put quotes or double quotes around the string or HTML code like that.

return (

{text}

// will show JSX is cool

);

[Pablo Berganza]

That's because it's not a string. It's being parsed as JavaScript code and transformed into React.createElement. if you put quotes around JSX there would not be a way to tell the parser "hey, this should be transformed to React.createElement" since it would be parsed as a string.

[Lakh Bawa]

Thanks for the reply, but there is no starting tag like <?php , how parser knows its jsx not html.

Is it true that , if there are no quotes, js compliler automaticly assumes its jsx code.?

[Pablo Berganza]

The same way a parser knows how fn() is a function call, or how if {...} is an if block! 😅

Don't see JSX as a templating language, see it as part of the JavaScript syntax! You don't need a tag to specify it is JSX because it already is "valid" JavaScript 😊

Aside note: actually the browser doesn't understand JSX at all. Babel is the parser that turns JSX into React.createElement, and that's what the browser sees (and what it can understand) in the end. The above mental model is approximately correct, just don't try to use JSX directly in the browser 😅

[Lakh Bawa]

ahhh, got the point here; Don't see JSX as a templating language, see it as part of the JavaScript syntax! You don't need a tag to specify it is JSX because it already is "valid" JavaScript.

Thank you man, Thanks a lot

[Pablo Berganza]

Glad I could be of help!