ReactJS | JSX

Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about ReactJS JSX.

As we learned in our previous tutorial, React JSX is an extension to JavaScript. It allows developers to create virtual DOM using XML syntax. It compiles down to pure JavaScript (React.createElement function call). Since it compiles to pure JavaScript, it can be used inside any valid JavaScript code.

Example

The following codes are perfectly valid -

• Align to a variable.

var greeting = <h1>Hello React!</h1>

• Align to a variable based on a condition.

var canGreet = true; 
if(canGreet) { 
   greeting = <h1>Hello React!</h1> 
}

• Can be used as return value of a function.

function Greeting() { 
   return <h1>Hello React!</h1> 
   
} 
greeting = Greeting()

• Can be used as argument of a function.

function Greet(message) { 
   ReactDOM.render(message, document.getElementById('react-app') 
} 
Greet(<h1>Hello React!</h1>)

READ: ReactJS | Using Create React App tool

Expressions

JSX supports expression in pure JavaScript syntax. Expression has to be enclose within the curly braces, { }. Expression can contain all variables available in the context, where the JSX is defined.

Example

Let us create simple JSX with expression.

<script type="text/babel">
   var cTime = new Date().toTimeString();
   ReactDOM.render(
      <div><p>The current time is {cTime}</p></div>, 
      document.getElementById('react-app') );
</script>

Output

Here, cTime is used in the JSX making use of expression. When the above example is executed, it will produce the below result -

The Current time is 13:46:56 GMT+0530(WAT)

One of the advantage of using expression in JSX is that it prevents injection attacks as it converts any string into HTML safe string.

Functions

JSX has support for user defined JavaScript function. The usage of function is similar to expression.

Example

Let's create a simple function and then use it inside JSX.

<script type="text/babel">
   var cTime = new Date().toTimeString();
   ReactDOM.render(
      <div><p>The current time is {cTime}</p></div>, 
      document.getElementById('react-app') 
   );
</script>

Output

Here, we made use of getCurrentTime to get the current time. The following is the output of the above example -

The Current time is 13:46:56 GMT+0530(WAT)

READ: ReactJS | Architecture

Attributes

JSX has support for Html like attributes. All HTML tags and its attributes are supported. Attributes needs to be specified utilizing the camelCase naming convention instead of the normal HTML attribute name. e.g., class attributes in HTML ought to be defined as a className. Below are few other examples -

• htmlFor instead of for.

• tabIndex instead of tabIndex.

• onClick instead of onClick.

Example

Try the following example below -

<style>
   .red { color: red }
</style>
<script type="text/babel">
   function getCurrentTime() {
      return new Date().toTimeString();
   }
   ReactDOM.render(
      <div>
         <p>The current time is <span className="red">{getCurrentTime()}</span></p>
      </div>,
      document.getElementById('react-app') 
   );
</script>

Output

The output is as follows -

The Current time is 13:46:55 GMT+0530(WAT)

Expression in Attributes

JSX supports that expressions be specified inside attributes. In attributes, double quote should not be used along expression. Either expression or string using double quote has to be used.

Example

The above example can be changed to use expression in attributes.

<style>
   .red { color: red }
</style>

<script type="text/babel">
   function getCurrentTime() {
      return new Date().toTimeString();
   }
   var class_name = "red";
   ReactDOM.render(
      <div>
         <p>The current time is <span className={class_name}>{getCurrentTime()}</span></p>
      </div>, 
      document.getElementById('react-app') 
   );
</script>

READ: ReactJS | Using CDN

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial post, we are going to be discussing about ReactJS Components.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.