Browse Source

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

* Introducing JSX is missing a step

* Tweak
main
Stephane Moreau 7 years ago
committed by Dan Abramov
parent
commit
f03e9c785d
  1. 16
      content/docs/introducing-jsx.md

16
content/docs/introducing-jsx.md

@ -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) {

Loading…
Cancel
Save