JSX in React.js

JSX stands for JavaScript XML.

Basically it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax. React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, however, following are some pros that come with it.

  • It is faster because it performs optimization while compiling code to JavaScript.
  • It is also type-safe and most of the errors can be caught during compilation.
  • It makes it easier and faster to write templates, if you are familiar with HTML.
class App extends React.Component {
  render() {
        {'Welcome to React Js Interview Questions'}
How to write Expressions and Comments in JSX ?

JavaScript Expressions: We use {} to write expressions in JSX code.

Comments: While writing comments, we need to use curly brackets {}

 render() {
      return (
           Expression & Comments in JSX:
            5 is equeal to {2+3}
            {//Single line Comment...}
            {/*Multi-line comment...*/}
Q:- Why browsers can’t read JSX?

Browsers can only read JavaScript objects but JSX is not a regular JavaScript object. That's why browsers can't read JSX. To read JSX on browsers first of all we need to transform JSX code into a JavaScript object using Babel and then pass it to the browser.