JSX(JavaScript Syntax eXtension)

This is XML-like extension to the JavaScript language syntax
Example of JSX code

const element = 
Hello, world!
;
        

Why this unusual syntax?

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both

Examples

Embedding Expressions in JSX

we declare a variable called name and then use it inside JSX by wrapping it in curly braces
We can put any valid JavaScript expression inside the curly braces in JSX. For example, 2 + 2, user.firstName, or formatName(user) are all valid JavaScript expressions

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
  }
  
  const user = {
    firstName: 'Harper',
    lastName: 'Perez'
  };
  
  const element = (
    <h1>
      Hello, {formatName(user)}!
    </h1>
  );