diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index 06587881..6b3d7651 100644 --- a/content/docs/introducing-jsx.md +++ b/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 =

Hello, {name}

; + +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 `

` element. ```js{12} function formatName(user) {