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: 

const 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 HTML nor 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 the next article in detail.
Why JSX?

• It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript.
• It makes it 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 detail 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: 

javascript

import React from 'react';
import ReactDOM from 'react-dom';

const name = "Learner";

const element = <h1>Hello,
{ name }.Welcome to GeeksforGeeks.< /h1>;

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

Output: 

In the above program we have embedded the javascript expression const 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 the use of any JavaScript expression in JSX by wrapping them in curly braces except 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: 

javascript

import React from 'react';
import ReactDOM from 'react-dom';

let i = 1;

const element = <h1>{ (i == 1) ? 'Hello World!' : 'False!' } < /h1>;

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

Output: 

In the above example, the variable i is checked if for the value 1. As it equals 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 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. 

javascript

import React from 'react';
import ReactDOM from 'react-dom';


const element = <div><h1 className = "hello">Hello Geek</h1>
            <h2 data-sampleAttribute="sample">Custom attribute</h2>< /div>;


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

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

1. As for string literals: We can specify the values of attributes as hard-coded strings using quotes: 

const ele = <h1 className = "firstAttribute">Hello!</h1>;

1. As expressions: We can specify attributes as expressions using curly braces {}: 

const 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 the subtags are called child tags or children 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 them to HTML: 

javascript

import React from 'react';
import ReactDOM from 'react-dom';


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"));

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: 

javascript

import React from 'react';
import ReactDOM from 'react-dom';


const element = <div><h1>Hello World !</h1>
            {/ * This is a comment in JSX * /}
        </div>;

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

Reference: 

• https://reactjs.org/docs/introducing-jsx.html
• https://en.wikipedia.org/wiki/React_(JavaScript_library)#JSX