What is JSX in React?

ReactJS


JSX stands for Javascript Syntax extension.JSX is a XML-like syntax extension to ECMAScript.JSX is recommended to be used with React to describe what the UI should look like.JSX is a kind of a template language, but it comes with the full power of JavaScript.JSX produces React “elements”.Below, you can find the basic example of JSX necessary to get you moving with the JSX learning.

In the below example text inside <h1>tag is returned as JavaScript function to the render function.

class App extends React.Component {
  render() {
    return(
      <div>
        <h1>{'Welcome to React App!'}</h1>
      </div>
    )
  }
}

One of the most important information about JSX is that browsers do not understand the JSX language. It means it can not be directly served to a browser. React apps uses a transpiler to convert the JSX code written by developers in to regular Javascript code. Once this code is ready in native javascript then it is eacy for the browsers to render and display the view.Babel is a widely used transpiler that is used by most react apps to convert the JSX code to javascript code.

Is it mandatory to use JSX for React apps?

NO, The answer is No. JSX is not mandatory to write React applications code.JSX is a convenient template language to write react applications,but it does not mean that react applications can not be developed without JSX.To prove this, let us see an example below where we will write the sample code by using JSX and then same code we will write without using the JSX.They both works fine and gives us the desired results.

First let us write a greeting example by using the JSX:

class Greeting extends React.Component {
  render() {
    return <div>Hello {this.props.message}</div>;
  }
}

ReactDOM.render(
  <Greeting message="World" />,
  document.getElementById('root')
);

 

Now let us write the same code without using the JSX:

class Greeting extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.message}`);
  }
}

ReactDOM.render(
  React.createElement(Greeting, {message: 'World'}, null),
  document.getElementById('root')
);

As you can see with the above code example that both codes work fine and give us the same results. Then the questions arise, that do we really need to learn the JSX to make react applications. As we saw with our example above that it is not mandatory, rather it is a recommended template language for react applications. JSX provides some extra benefits in terms of development code clean looks and security of application.


JSX prevents Injection Attacks?

As a web developer, everyone is concerned about the security of the applications. In the cybersecurity world, Injection attacks are one of the most common types of attacks that most web applications face. With the use of JSX, we can prevent these types of attacks on our applications. React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered.

For example, you can embed user input as below

const name = response.potentiallyMaliciousInput;
const element = <h1>{name}</h1>;

This way you can prevent XSS(Cross-site-scripting) attacks in the application.

Not only security , but when it comes to embedding the components in each other as parent and child components then JSX is very useful. This is reason JSX is a recommended template language for React Applications.