JSX

JSX stands for JavaScript eXtended. JSX is a combination of HTML and Javascript but it comes with the complete power of Javascript. JSX helps follow the React principles of coupling JavaScript code with the UI template. This enables developers to better visualize the logic along with the UI.

Using JSX you can embed Javascript functions, and variables inside the templates like this:

const name = "John Doe";
const element = <p> Hello my name is {name}</p>;

Specifying attributes in JSX can be done in 2 ways: If it is a hardcoded value we can directly use it otherwise we can directly specify the variable inside the curly braces.

const element = <a href="https://www.rtcamp.com"> link </a>; //hardcoded value
const element = <img src={user.avatarUrl}></img>;//value after some computation.

For an in-depth reference of JSX read more here.