What is JSX? How to use JavaScript with React?

In this article, you will learn what is JSX, why we use JSX in react, and how we can use JSX.

Since this article requires to have a basic knowledge of React, it is recommended to go through the following articles

1. Install React
2. What is React?
3. Create React app without NPM

What is JSX?

JSX (Javascript XML) is a React-specific XML/HTML-like syntax that extends ECMAScript to allow XML/HTML-like content to coexist alongside JavaScript/React code. The syntax is designed to be used by preprocessors (transpilers such as Babel) to convert HTML-like content contained in JavaScript files into normal JavaScript objects that a JavaScript engine can understand.

Using JSX, you may write succinct HTML/XML-like structures (e.g., DOM-like tree structures) in the same file as JavaScript code, and Babel will convert these expressions into actual JavaScript code. Instead of putting JavaScript into HTML as in the past, JSX allows us to put HTML into JavaScript.

JSX was created as a research project at DeNA Co., Ltd., one of the world’s largest social game suppliers. Kazuho Oku and Goro Fuji are the primary developers (a.k.a. gfx).

Characteristics of JSX

• There are alternative ways to accomplish the same thing without using JSX, however, utilizing JSX makes developing a react application easier.
• JSX allows you to write expressions. Any JS expression or React variable can be used as the expression.
• To insert a lengthy chunk of HTML, we must use parentheses, i.e. ().
• JSX generates react elements.
• JSX adheres to the XML standard.
• JSX expressions are converted into normal JavaScript function calls after compilation.
• For naming HTML attributes, JSX uses camelcase notation. TabIndex in JSX, for example, is the same as tabindex in HTML.

Why use JSX in React?

Using JSX while developing React isn’t required, but it makes creating React apps easier by allowing you to define the UI in HTML. JSX is a “template language” with the “full power of JavaScript,” according to its developers.

Not only are JSX visual aids important when working with JavaScript UI, but using JSX allows React to display more relevant error messages and warnings for simpler debugging. If your HTML is incorrect or missing a parent element, JSX will give an error so you can fix it right away.

How to Install JSX

npm install -g jsx

Hello JSX

class _Main {
    static function main(args : string[]) : void {
        log "Hello, JSX!";
    }
}

In the above code, we create a basic javascript XML program.

The class _Main has a static member function (also known as a class method) named main, which accepts an array of strings and returns nothing. The starting point of JSX programs is _Main.main(:string[]):void, which is invoked when a user runs an application from the command line. Top-level statements and functions are not permitted in JSX, as they are in Java.

In JavaScript, the log statement is translated to console.log(), which prints the inputs to stdout with a newline.

To run the above code, you execute the following command

jsx --run hello.jsx 

JSX Syntax

In JSX, each tag is a “function call” that generates an element. When the JSX is “translated” into React, the result looks like this:

This is because each tag creates an element using the createElement() function.

Using JSX in React

Below is an example code, which demonstrated how we can embed JSX in React.

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

ReactDOM.render(
  element,
  document.getElementById('root')
);

In the above code, we create 2 constants (one is a string and the other one is an HTML code) and pass the string value into the HTML code. After that, we call the ReactDOM.render() and pass the HTML code along with the element ‘root’.

var nav = (
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
);

var nav = React.createElement(
   "ul",
   { id: "nav" },
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Home"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "About"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Clients"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Contact Us"
      )
   )
);

Thanks for reading, hope you got answers to some of your questions and learned what is JSX, why we use JSX in react, and how we can use JSX.

Visit Let’s React to learn more about React.