Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Introducing JSX in React | Introduction to React Fundamentals
Mastering React

Introducing JSX in React

In React, we use a syntax extension of JavaScript called JSX (JavaScript XML) to build our user interfaces. JSX allows us to write HTML-like code directly within JavaScript.

JavaScript within HTML

One of the great things about JSX is that it combines the power of JavaScript with HTML. We can use JavaScript expressions and logic directly within the HTML-like code. To embed JavaScript, place it within curly braces, like this: { JavaScript code }.

How JSX Works: An Example

Let's see JSX in action with a simple example. Suppose we want to render a heading element in the React app:

In this example, we're using JSX to create a const called element that holds an <h1> element with the text "Hello, React!".

Note

Under the hood, React takes this JSX code and efficiently renders it to the DOM, making it a seamless and powerful way to build user interfaces.

1. What does JSX stand for in React?
2. What is the correct way to create an HTML element that would render the string `Hey there, React Developer!`?

What does JSX stand for in React?

Select the correct answer

What is the correct way to create an HTML element that would render the string Hey there, React Developer!?

Select the correct answer

Everything was clear?

Section 1. Chapter 4
course content

Course Content

Mastering React

Introducing JSX in React

In React, we use a syntax extension of JavaScript called JSX (JavaScript XML) to build our user interfaces. JSX allows us to write HTML-like code directly within JavaScript.

JavaScript within HTML

One of the great things about JSX is that it combines the power of JavaScript with HTML. We can use JavaScript expressions and logic directly within the HTML-like code. To embed JavaScript, place it within curly braces, like this: { JavaScript code }.

How JSX Works: An Example

Let's see JSX in action with a simple example. Suppose we want to render a heading element in the React app:

In this example, we're using JSX to create a const called element that holds an <h1> element with the text "Hello, React!".

Note

Under the hood, React takes this JSX code and efficiently renders it to the DOM, making it a seamless and powerful way to build user interfaces.

1. What does JSX stand for in React?
2. What is the correct way to create an HTML element that would render the string `Hey there, React Developer!`?

What does JSX stand for in React?

Select the correct answer

What is the correct way to create an HTML element that would render the string Hey there, React Developer!?

Select the correct answer

Everything was clear?

Section 1. Chapter 4
some-alt