React JSX

As we have already explained in our "Introduction to React JS" React is a declarative, efficient, and flexible JavaScript library built for creating beautiful User Interfaces. There is a huge community of developers supporting the development of React. We suppose you have a basic understanding of React by now. So, let's discuss what is JSX and why do we need it in React JS.

In React, we write our code in a notation called JSX instead of using regular JavaScript. JSX is an abstraction that allows us to write syntax similar to HTML in our JavaScript code and enables us to build React components that look like standard HTML markup. JSX is the most integral part of React JS and it functions like a templating engine of React JS. Therefore, JSX is the foundation for any markup that React JS renders into the application. As we move ahead, we should understand completely that what JSX is and what it is capable to do, and what not?

What JSX is and what it is capable of?

• JSX is a JavaScript Extension, which means it extends the functionality of plain JavaScript we use in our project.

• JSX is used by React which extends the capabilities of ECMAScript so that this HTML/XML-like text can co-exist with JavaScript or React code.

• The Javascript preprocessor and transpiler used in ReactJS (i.e., Babel) transforms the JSX code found in the JavaScript files into standard JavaScript objects that are parsed by a JavaScript engine (Browser's DOM most commonly).

• By using JSX we can write concise HTML/XML-like structures (e.g., DOM-like tree structures) in the same file as we write JavaScript code, then Babel converts these JSX expressions into actual JavaScript code.

• JSX allows us to put HTML into JavaScript, instead of putting JavaScript into HTML.

What JSX isn't?

People at the beginning usually misunderstand JSX as a library that we use with React JS. But, it is neither any library nor a specific notation of writing Javascript like JSON. Despite this, JSX is an extension of regular Javascript that extends its capabilities and used as a templating language with React to create beautiful UI Components.

How to use Javascript with JSX

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Using JavaScript with JSX</h1>
      <h2>There are 24 * 60 * 60 = {24 * 60 * 60} seconds in a day</h2>;
    </div>
  );
}

JavaScript expressions can be embedded in JSX expressions. To embed JavaScript expressions within a JSX statement, we must include the Javascript within curly brackets.

In the above code, the JavaScript expression 24*60*60 is embedded inside <h1> tags and we have used the curly braces to tell JSX that it is a Javascript statement. So that, it can interpret the statement and give the desired result. When this JSX instruction will be rendered to the DOM, the JavaScript instruction embedded within curly braces will be evaluated and displayed as 86400 as the result of a JS statement within JSX.

Output:

Comments in JSX

JSX has a different way of using comments. Yes, we can use comments in JSX because we can use JavaScript expressions as well. Comments on the JSX begin with / * and end with * /. What do you understand by this? We use a multiline comment structure to include comments in JSX. We can add comments to JSX by enclosing them in curly braces {}, just as we do with expressions. The following example shows how to add comments to JSX:

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Using JavaScript with JSX</h1>
      <h2>There are 24 * 60 * 60 = {24 * 60 * 60} seconds in a day</h2>;
      {/* 
          Here we are using a JSX comment to explain 
          the functionality of the above code
          
          The above code will evaluate the expression written 
          between the { curly braces} and output its value to the DOM.

          In this way we can use JS with JSX
      */}
    </div>
  );
}

We have used a comment to explain the functionality of the code included above. and See in the output, it makes no difference with the output.

Output:

Using Event Handlers in JSX

Event listeners are listed as element attributes in JSX. Event listener attribute names should be written in camelCase, i.e. B. onClick for the onclick event and onMouseOver for the onmouseover event. The value of the event listener's attribute must be a function. Event processor functions can be declared as built-in or as variables, and optionally accept arguments representing the event.

import React, { Component } from "react";
import ReactDOM from "react-dom";

class ShowAlert extends Component {
  showAlert() {
    alert("Hoorrayyy!! Click Event worked");
  }

  render() {
    return <button onClick={this.showAlert}>show alert</button>;
  }
}
export default ShowAlert;

In the above code example, we are using a button to trigger an onClick event, which triggers a Javascript alert box when triggered. See the output below for reference or you can try the code on your own at Codesandbox by opening my sandbox and forking it into your profile.

Output:

Summary

• JSX is faster than regular JavaScript as it performs many optimizations while translating to regular JavaScript.
• JSX makes it easier for us to create templates that are very helpful while creating components in React.
• Instead of separating the markup and logic in the different files as we do in all other MVC frameworks, React uses components for this purpose.