React JSX | JavaScript XML

In this article, we will learn about React JSX, which is an extension of JavaScript. It enables developers to create virtual DOM using XML syntax. It compiles down to pure JavaScript (React.createElement function calls). Since it compiles JavaScript, it can be used inside any valid JavaScript code.

Introduction to React JSX

These snippets of suspiciously-HTML-like code are not HTML, but a syntax extension to JavaScript based on ES6 called “JavaScript XML.”

More commonly referred to as “JSX,” JavaScript XML is a form of markup that allows us to write HTML in React by converting HTML tags into React elements.

Utilizing JSX allows us to write HTML elements in JavaScript, which is then rendered to the DOM.

Why JSX

Using JSX when writing React is not a requirement, but it makes creating React applications easier, allowing you to describe what the UI should look like in HTML. According to its creators, JSX is a “template language” that comes with the “full power of JavaScript.”

Not only do people find JSX to be helpful visual aid when working with JavaScript UI, but utilizing JSX allows React to show more useful error messages and warnings for easier debugging. If HTML is not correct or misses a parent element, JSX will throw an error your way so you can immediately correct it.

JSX Syntax

SX is a syntax extension of JavaScript. It’s used to create DOM elements which are then rendered in the React DOM. A JavaScript file containing JSX will have to be compiled before it reaches a web browser. The code block shows some example JavaScript code that will need to be compiled.

import React from 'react';
import ReactDOM from 'react-dom';
 
ReactDOM.render(<h1>Render me!</h1>, document.getElementById('app'));

Nested JSX Elements

To use more than one element, you need to wrap it with one container element. Here, we use div as a container element that has three nested elements inside it.

const myClasses = (
  <a href="https://www.techiebundle.com">
    <h1>
      Subscribe!
    </h1>
  </a>
);

JSX Attributes

JSX supports HTML-like attributes. All HTML tags and their attributes are supported. Attributes have to be specified using the camelCase convention (and it follows JavaScript DOM API) instead of the normal HTML attribute name. For example, a class attribute in HTML has to be defined as className.

const example = <h1 id="example">JSX Attributes</h1>;

JSX Comments

JSX allows us to use comments that begin with /* and ends with */ and wrap them in curly braces {} just like in the case of JSX expressions. The below example shows how to use comments in JSX.

<div>  
       <h1 className = "hello" >Hello TechieBundle</h1>  
             {/* This is a comment in JSX */}   
</div>  

JSX Styling

React always recommends using inline styles. To set inline styles, you need to use camelCase syntax. React automatically allows appending px after the number value on specific elements. The following example shows how to use styling in the element.

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
     var myStyle = {  
         fontSize: 80,  
         fontFamily: 'Courier',  
         color: '#003300'  
      }  
      return (  
         <div>  
            <h1 style = {myStyle}>www.techiebundle.com</h1>  
         </div>  
      );  
   }  
}  
export default App;  

JSX Multiline Expression

A JSX expression that spans multiple lines must be wrapped in parentheses: ( and ). In the example code, we see the opening parentheses on the same line as the constant declaration, before the JSX expression begins. We see the closing parentheses on the line following the end of the JSX expression.

const myList = (
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
);

NOTE~ JSX cannot allow using if-else statements. Instead of it, you can use conditional (ternary) expressions. It can be seen in the following example.

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      var i = 5;  
      return (  
         <div>  
            <h1>{i == 1 ? 'True!' : 'False!'}</h1>  
         </div>  
      );  
   }  
}  
export default App;  

Output:-

False!

Read more

React create-react app
Top Features of React JS For Better Development
React vs React Native | What are the differences?