What is JSX?

• JSX stands for JavaScript XML.

• It's a syntax extension for JavaScript often used with React.

Why JSX?

Advantages of JSX

• Combines HTML and JavaScript.

• Easy to read and write.

• Provides a way to define React elements.

JSX Elements

Basic structure of JSX elements.

function App() {

  return (

    <div>

      <h1>Hello, React!</h1>

    </div>

  );

}

const world = "React!";
function App() {

  return (
<div>

    <h2>Hello, {world}!</h2>
</div>

  );

}

Embedding Expressions

The combination of HTML (<div> and <h2>) with JSX ({world}) demonstrates how you can easily integrate both HTML elements and JavaScript variables, resulting in a greeting message that's customized based on the value of the world variable

const message = "Hello React!";
function App() {

  return (
<div>

    <h2>{message}</h2>
<p>{user.name}</p>
</div>

  );

}

Expressions - Variables

​JSX allows you to seamlessly integrate HTML markup with JavaScript.
By using curly braces, it allows you to incorporate JavaScript variables from your code and present them to the user.

Adding Style

In React, you specify a CSS class with className. It works the same way as the HTML class attribute:
const world = "React!";
function App() {

  return (
<div>

    <h2 className="title">Hello, {world}!</h2>
</div>

  );

}

Conditional rendering

In React, you can use an 'if' statement to conditionally include JSX elements:

const isLoggedIn = false;

let message;

if (isLoggedIn) { message = 'Welcome back!'; }
else { message = 'Hi! Great to know you!'; }

function App() {

return (

<div>

<h2>{message}</h2>

</div>

);}

Conditional rendering

Using Conditional (ternary) operator (Recommended)

const isLoggedIn = false;

function App() {

return (

<div>

<h2>{isLoggedIn ? ( 'Welcome back!' ) : ( 'Hi! Great to know you!' )}</h2>

</div>

);}

Rendering Lists

You can loop through a list and display them easily (using Array.prototype.map)

const numbers = [1, 2, 3, 4, 5];

function App() {

return (

<div>

<ul>

{numbers.map(number => <li key={number}>{number}</li>)}

</ul>

</div>

);}

Summary

In this lesson, you have learnt:

• What is JSX?

• Why do we use JSX in React?

• JSX Components and Elements

• Incorporating Expressions and Variables in JSX

• Applying Styling to JSX Elements

• Conditional Display in React Components with Ternary Operators

• Displaying Arrays as Lists of Elements in React Components