One of the best features of React is that we can easily embed JavaScript into JSX.

Other frontend frameworks, for example Angular and Vue, have their own specific ways to print JavaScript values in the template or perform things like loops.

React is not adding new things. Instead, it lets us use JavaScript in the JSX, by using curly brackets.

The first example of this that I will show you comes directly from the App component we studied so far.

We import the logo SVG file using

import reactLogo from './assets/react.svg'

and then in the JSX, we assign this SVG file to the src attribute of an img tag:

<img src={reactLogo} className='logo react' alt='React logo' />

Let’s do another example. Suppose the App component has a variable called message.

We can print this value in the JSX by adding {message} anywhere in the JSX.

import './App.css'

function App() {
  const message = 'Hello!'

  return (
    <div className='App'>
      <h1>{message}</h1>
    </div>
  )
}

export default App

Try it! You should see the Hello! message in the browser.

Inside the curly brackets { } we can add any JavaScript statement.

For example, this is a common statement you will find in JSX. We have a ternary operator where we define a condition (message === 'Hello!'), and we print one value if the condition is true, or another value (the content of message in this case) if the condition is false:

{
  message === 'Hello!' ? 
    'The message was "Hello!"' : message
}

Like this:

import './App.css'

function App() {
  const message = 'Hello!'

  return (
    <div className='App'>
      <h1>{message === 'Hello!' ? 'The message was "Hello!"' : message}</h1>
    </div>
  )
}

export default App

Here’s the result:

If you change the content of the message variable, JSX will print something else:

import './App.css'

function App() {
  const message = 'Test'

  return (
    <div className='App'>
      <h1>{message === 'Hello!' ? 'The message was "Hello!"' : message}</h1>
    </div>
  )
}

export default App

Lessons in this unit:

0:	Introduction
1:	Setting up a React project with Vite
2:	React Components
3:	Introduction to JSX
4:	Using JSX to compose UI
5:	The difference between JSX and HTML
6:	▶︎ Embedding JavaScript in JSX
7:	Handling user events
8:	Install the React Developer Tools
9:	Getting started with JSX
10:	How to return multiple elements in JSX
11:	How to learn React
12:	Should you use jQuery or React?
13:	React concepts: declarative
14:	The Virtual DOM
15:	The roadmap to learn React
16:	What’s new in React 19
17:	How to install React
18:	The React Fragment
19:	React, how to transfer props to child components
20:	React PropTypes
21:	React DOM events on components
22:	How to pass a parameter to event handlers in React