The ReactJS documentation says something interesting and powerful about what their JSX is capable of:

You can embed any JavaScript expression in JSX by wrapping it in curly braces. For example, 2 + 2, user.firstName, and formatName(user) are all valid expressions.

.html#embedding-expressions-in-jsx

This is so powerful and interesting to me because this isn't possible in AngularJS, nor EmberJS. Angular uses Angular Expressions in their markup, and EmberJS uses Handlebar Expressions their markup.

Q1) How does ReactJS achieve reading any JS Expression inside JSX?

Q2) Do they use eval() under the hood?

The ReactJS documentation says something interesting and powerful about what their JSX is capable of:

You can embed any JavaScript expression in JSX by wrapping it in curly braces. For example, 2 + 2, user.firstName, and formatName(user) are all valid expressions.

https://reactjs/docs/introducing-jsx.html#embedding-expressions-in-jsx

This is so powerful and interesting to me because this isn't possible in AngularJS, nor EmberJS. Angular uses Angular Expressions in their markup, and EmberJS uses Handlebar Expressions their markup.

Q1) How does ReactJS achieve reading any JS Expression inside JSX?

Q2) Do they use eval() under the hood?

• javascript
• reactjs
• jsx

• 1 I can't give you an in-depth answer, because I'm no expert on React internals. However, maybe things can be cleared up by reading this: reactjs/docs/react-without-jsx.html and the link to the babel piler there. React.createElement takes any number of arguments which I believe are are executed, appended and returned. I did a quick search, but there's no eval in the distributed React files. – publicJorn Commented Feb 9, 2018 at 8:17

2 Answers 2

JSX is a Babel plugin which transforms your sourcecode ahead of time, not during runtime.
Understanding this allows us to see both why Yuri's answer is correct, as well as how JSX can evaluate arbitrary expressions.

As a short prefix, Babel is a monly used Javascript piler, which, depending on your configuration, allows you to do a number of useful things. A very mon example is transpiling ES6 features so the code can be used in ES5 environments:

Code in:

[1, 2, 3].map(n => n * 2);

Code out:

[1, 2, 3].map(function (n) {
  return n * 2;
});

The JSX Babel plugin does something similar, it transforms the easily readable JSX syntax into React function calls (or other similar things if you're not using it with React).

From their own demo, code in:

var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

Code out:

var profile = React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

Understanding this, it is now easy to see that 1) any expressions can be used because the expressions are not evaluated at all; and 2) eval is not required at all — the code is transformed ahead of time.

React doesn't evalute anything. You just need to take a look at piled code. JSX is just a syntax extension that is converted to plain old js evaluated by engine.

() => <div>{2 + 2}</div>

bees just a function that calls React.createElement

function () {
  return React.createElement(
    "div",
    null,
    2 + 2
  );
};