Before starting let me tell you, that JSX is one of the essential core concepts of React. So if you understand JSX well, you will be able to write better code in React.

In this blog, we will see:

• Introduction of JSX
• Rendering of Elements

So let's get started and understand this concept in depth.

What is JSX:

JSX is a syntax extension to JavaScript which can be used in React to describe how the UI should look. JSX allows us to write HTML elements in JavaScript.

Let's Consider the below variable declaration:

const example = <h1>Hello, This is a JSX element</h1>;

Now please note that this is a JSX expression and you can not use it directly because the browser does not understand JSX expression, to make the browser understand you will need to convert this JSX expression into a valid JavaScript expression.

So to convert JSX expression into JS expression we use a tool known as Babal. React App internally uses Babel to convert JSX into JS.

How to embed expressions in JSX:

The following example declares a variable named user and uses it in JSX by wrapping it in curly braces:

const user = 'John Doe';
const element = <h1>Hello, {user}</h1>;

You can put any valid JavaScript expression inside the JSX such as 'A ' + 'string' , a && b, 3 + 4, etc. These all are valid JavaScript expressions.

Now similarly, we can embed the result of a function into a JSX expression as well.

export default function App() {
  function fullName(user) {
    return user.firstName + " " + user.lastName;
  }

  const user = {
    firstName: "John",
    lastName: "doe",
  };

  return (
    <div className="App">
      <h1>Hello, {fullName(user)}!</h1>
    </div>
  );
}

You can see the output of the code below:

JSX is also an Expression:

Now we saw that after compilation JSX becomes a regular JavaScript function that calls and evaluates JavaScript objects.

Therefore, you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:

Below is the code snippet to understand JSX as an Expression:

export default function App() {
  function fullName(user) {
    return user.firstName + " " + user.lastName;
  }

  const user = {
    firstName: "John",
    lastName: "doe",
  };
  function getGreeting(user) {
    if (user) {
      return <h1>Hello, {fullName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>;
  }
  return (
    <div className="App">
      <h1>{getGreeting(user)}</h1>
    </div>
  );
}

Conditional operators in JSX:

However, React also allows us to write conditional operators, like ternary operators and the logical short circuit && operator, like this:

<h1>{a > b ? "Greater" : "Smaller"}</h1>

<h1>{status && "Active User"}</h1>

Below is the working example to understand how conditional operators works in JSX:

Conclusions:

In this article, we learned how to use JSX in React. We need to keep in mind a few things while using JSX which are listed below.

• Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.

• There will be no output in the UI for null, undefined, boolean when we use inside JSX.

• For example, the class becomes className in JSX, and tabindex becomes tabIndex.

Thank you for Reading.

You can check out my other articles as well on:

What are Controlled and Uncontrolled Components in React JS? Which one to use?

How and where to deploy your React App in less than 5 minutes..