Skip to content

Commit f03e9c7

Browse files
stmoreaugaearon
authored andcommitted
"Introducing JSX" is missing a step (#812)
* Introducing JSX is missing a step * Tweak
1 parent d24fa62 commit f03e9c7

File tree

1 file changed

+14
-2
lines changed

1 file changed

+14
-2
lines changed

content/docs/introducing-jsx.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,21 @@ With that out of the way, let's get started!
3030

3131
### Embedding Expressions in JSX
3232

33-
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.
33+
In the example below, we declare a variable called `name` and then use it inside JSX by wrapping it in curly braces:
3434

35-
For example, `2 + 2`, `user.firstName`, and `formatName(user)` are all valid expressions:
35+
```js{1,2}
36+
const name = 'Josh Perez';
37+
const element = <h1>Hello, {name}</h1>;
38+
39+
ReactDOM.render(
40+
element,
41+
document.getElementById('root')
42+
);
43+
```
44+
45+
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.
46+
47+
In the example below, we embed the result of calling a JavaScript function, `formatName(user)`, into an `<h1>` element.
3648

3749
```js{12}
3850
function formatName(user) {

0 commit comments

Comments
 (0)