ReactJS | Introduction to JSX

We had already stated in our article on Introduction to ReactJS that React is a declarative, efficient, and flexible JavaScript library for building user interfaces. But instead of using regular JavaScript, React code should be written in something called JSX.

Let us see a sample JSX code:

var ele = <h1>This is sample JSX</h1>;

The above code snippet somewhat looks like HTML and it also uses a JavaScript-like variable but is neither of HTML or JavaScript, it is JSX. JSX is basically a syntax extension of regular JavaScript and is used to create React elements. These elements are then rendered to the React DOM. We will learn about rendering and DOM in next article in details.

Why JSX?

  • It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript.
  • It makes easier for us to create templates.
  • Instead of separating the markup and logic in separated files, React uses components for this purpose. We will learn about components in details in further articles.

Using JavaScript expressions in JSX



In React we are allowed to use normal JavaScript expressions with JSX. To embed any javascript expression in a piece of code written in JSX we will have to wrap that expression in curly braces {}. Consider the below program, written in the index.js file:

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
  
var name = "Learner";
  
var element = <h1>Hello, { name }.Welcome to GeeksforGeeks.< /h1>;
   
ReactDOM.render(
    element, 
    document.getElementById("root")
);

chevron_right


Output:

In the above program we have embeded the javascript expression var name = “Learner”; in our JSX code. There are few lines at the top used to import some React APIs which will be explained in further articles. We embed use any javascript expression in JSX by wrapping them in curly braces excepts if-else statements. But we can use conditional statements instead of if-else statements in JSX. Below is the example where conditional expressing is embedded in JSX:

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
  
var i = 1;
  
const element = <h1>{ (i == 1) ? 'Hello World!' : 'False!' } < /h1>;
   
ReactDOM.render(
    element, 
    document.getElementById("root")
);

chevron_right


Output:

In the above example, the variable i is checked if for the value 1. As it is equals to 1 so the string ‘Hello World!’ is returned to the JSX code. If we modify the value of the variable i then the string ‘False’ will be returned.

Attributes in JSX

JSX allows us to use attributes with the HTML elements just like we do with normal HTML. But instead of the normal naming convention of HTML, JSX uses camelcase convention for attributes. For example, class in HTML becomes className in JSX. The main reason behind this is that some of the attribute names in HTML like ‘class’ are reserved keywords in JavaScripts. So, in order to avoid this problem, JSX uses the camel case naming convention for attributes. We can also use custom attributes in JSX. For custom attributes, the names of such attributes should be prefixed by data-. In the below example, we have used a custom attribute with name data-sampleAttribute for the <h2> tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
  
var i = 1;
  
const element = <div><h1 className = "hello">Hello Geek</h1>
            <h2 data-sampleAttribute="sample">Custom attribute</h2>< /div>;
  
   
ReactDOM.render(
    element, 
    document.getElementById("root")
);

chevron_right


Specifying attribute values: JSX allows us to specify attribute values in two ways:

  1. As string literals: We can specify the values of attributes as hard-coded strings using quotes:
    var ele = <h1 className = "firstAttribute">Hello!</h1>;
    
  2. As expressions: We can specify attributes as expressions using curly braces {}:
    var ele = <h1 className = {varName}>Hello!</h1>;
    

Wrapping elements or Children in JSX

Consider a situation where you want to render multiple tags at a time. To do this we need to wrap all of this tag under a parent tag and then render this parent element to the HTML. All of the subtags are called child tags or child of this parent element.
Notice in the below example how we have wrapped h1, h2 and h3 tags under a single div element and rendered to HTML:

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
  
var i = 1;
  
const element = <div><h1>This is Heading 1 < /h1>
            <h2>This is Heading 2</h2 > <h3>This is Heading 3 < /h3>    
        </div > ;
  
ReactDOM.render(
    element,
    document.getElementById("root"));

chevron_right


Output:

Comments in JSX

JSX allows us to use comments as it allows us to use JavaScript expressions. Comments in JSX begins with /* and ends with */. We can add comments in JSX by wrapping them in curly braces {} just like we did in the case of expressions. Below example shows how to add comments in JSX:

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
  
var i = 1;
  
const element = <div><h1>Hello World !</h1>
            {/ * This is a comment in JSX * /}
        </div>;
  
ReactDOM.render(
    element,
    document.getElementById("root"));

chevron_right


Reference:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.