"Introducing JSX" is missing a step (#812)

* Introducing JSX is missing a step

* Tweak
This commit is contained in:
Stephane Moreau
2018-05-09 18:19:39 +01:00
committed by Dan Abramov
parent d24fa6246d
commit f03e9c785d

View File

@@ -30,9 +30,21 @@ With that out of the way, let's get started!
### Embedding Expressions in JSX
You can embed any [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) in JSX by wrapping it in curly braces.
In the example below, we declare a variable called `name` and then use it inside JSX by wrapping it in curly braces:
For example, `2 + 2`, `user.firstName`, and `formatName(user)` are all valid expressions:
```js{1,2}
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
```
You can put any valid [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) inside the curly braces in JSX. For example, `2 + 2`, `user.firstName`, or `formatName(user)` are all valid JavaScript expressions.
In the example below, we embed the result of calling a JavaScript function, `formatName(user)`, into an `<h1>` element.
```js{12}
function formatName(user) {