React JSX

Why JSX?

Before getting started with JSX we should understand what is JSX and why it is used in React. From our research, without JSX in React, you can’t render UI elements or display data that you pass through your webpage.

Technically, if we summarize, JSX inherently couples the rendering logic with other UI logic such as event handling, state changing, data displaying etc. The purpose of JSX is to make coding easier.

What is JSX

To work with React you have to find a syntax extension to JavaScript called JSX, which looks like an XML tag (but is not). This syntax extension describes the look of the UI. JSX is the alternative of React.createElements. It is a JavaScript extension that allows us to define React elements using syntax that looks similar to HTML.

In JSX, an element’s type is specified with a tag. The tag’s attributes represent the properties. The element’s children can be added between the opening and closing tags.

Example

const companyName= 'codehunger';
const element = <h1>Hello, {companyName}</h1>; //JSX

The above example illustrates JSX. In the first line, we declared a constant – company name, which is a String. It is not a JSX.

In the second line, we declared a constant by element. This funny tag syntax is neither a string nor HTML. It is a JSX. CompanyName is been enclosed within flower curly braces in HTML element h1 with opening and closing tags.

It will render the message Hello codehungerin the web page.

Therefore, we can say that JSX syntax helps us render content in the UI.

React JS uses JSX for templating instead of the regular JavaScript. Though it is not mandatory to use it, it is recommended to use it for the following advantages:

• It’s faster because of the reason that it performs optimization during the code compilation to JavaScript
• It is type-safe, meaning any errors would be caught on code compilation itself
• If you are familiar with HTML, then you can write templates easier and also faster

Expressions in JSX

Here is a simple example of how to use expressions in JSX.

In our earlier example we had written something like :

index.js

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

ReactDOM.render(
<h1>Hello, from codehunger!</h1>,
    document.getElementById('root')
);


We will now change the above code to add expressions. Expressions are used inside curly brackets {}, and they are expanded during run time. Expressions in react are the same as javascript expressions.

index.js

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

const display = "Hello, from codehunger!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
); 

Let us now test the same in the browser.

You can see that the {display} expression is not replaced. React does not know what to do when an expression is used inside the .js file.

Let us now add changes and create a .jsx file, as shown below:

test.jsx

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

const display = "Hello, to codehunger";
const h1tag =<h1>{display}</h1>;
export default h1tag;

We have added the required code and will use the text.jsx file in index.js.We want the h1tag variable to be used inside script.js, so the same is exported as shown above in the test.jsx

Here is the modified code in index.js

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

To use the test.jsx in index.js we have to import it first as shown below:

import h1tag from './test.jsx';

We can use the h1tag now in the ReactDOM.render as shown below:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Here is the output when we check the same in the browser: