ReactJS JSX Introduction

JSX stands for JavaScript XML. JSX is basically a syntax extension of JavaScript. It helps us to write HTML in JavaScript and forms the basis of React Development. Using JSX is not compulsory but it is highly recommended for programming in React as it makes the development process easier as the code becomes easy to write and read. 

JSX creates an element in React that gets rendered in the UI. It is transformed into JavaScript functions by the compiler at runtime. Error handling and warnings become easier to handle when using 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(JavaScript XML). With the help of JSX, we have directly written the HTML syntax in JavaScript

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 separate files, React uses components for this purpose. We will learn about components in detail in further articles.
• As JSX is an expression, we can use it inside of if statements and for loops, assign it to variables, accept it as arguments, or return it from functions.

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 {}. The below example specifies a basic use of JavaScript Expression in React.

Syntax:

const example = "JSX"
const ele = <div>This component uses {example} </div>

Example: This example wraps the JSX code in curly braces

Output:

ReactJS JSX

In the above program, we have embedded the javascript expression const name = “Learner”; in our JSX code. We can use conditional statements instead of if-else statements in JSX. 

Example: In this example where conditional expression is embedded in JSX: 

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 the camelcase convention for attributes.&

• The change of class attribute to className:

  The 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 JavaScript. So, in order to avoid this problem, JSX uses the camel case naming convention for attributes. 

• Creation of custom attributes:

  We can also use custom attributes in JSX. For custom attributes, the names of such attributes should be prefixed by data-* attribute.

Example: This example has a custom attribute with the <h2> tag and we are using className attribute instead of class. 

Output:

Specifying attribute values:

 JSX allows us to specify attribute values in two ways: 

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

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

• 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 these tags 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.

Example: In this example we have wrapped h1, h2, and h3 tags under a single div element and rendered them to HTML:

Output:

REactJS JSX

Note: JSX will throw an error if the HTML is not correct or if there are multiple child elements without a parent element.

Comments in JSX: JSX allows us to use comments as it allows us to use JavaScript expressions. Comments in JSX begin 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. The below example shows how to add comments in JSX:  

Output: