mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-22 20:01:57 +00:00
"Introducing JSX" is missing a step (#812)
* Introducing JSX is missing a step * Tweak
This commit is contained in:
committed by
Dan Abramov
parent
d24fa6246d
commit
f03e9c785d
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user