What is JSX? JSX Example & Expressions

JSX is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. It was developed by Facebook as a way to make it easier to build user interfaces with React, but it can be used with any JavaScript library or framework.

Here is an example of JSX code that renders a simple button element:

const element = <button>Click me</button>;

JSX code looks similar to HTML, but it is actually just syntax sugar for JavaScript function calls and object construction. When your code is compiled, the JSX will be transformed into regular JavaScript code.

You can use expressions inside JSX code by enclosing them in curly braces. For example:

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

Expressions in JSX

Expressions in JSX can be any valid JavaScript expression, including function calls and ternary operators. You can also use JSX inside of if statements and for loops, just like you would with regular JavaScript code.

Here is an example of a JSX expression that includes a ternary operator and a function call:

const showMessage = true;
const message = 'Hello, world!';
const element = (
  <div>
    {showMessage ? <p>{message}</p> : null}
    <button onClick={() => console.log('Button clicked')}>
      Click me
    </button>
  </div>
);

Rakib Alom

About author

I am a professional web developer. I love programming and coding, and reading books. I am the founder and CEO of StorialTech.