What is JSX in React ?

What is JSX in React ?

In Simple Words

JSX is a file extension which stands for JavaScript XML. It's the elegant feature of the React. It allows us to integrate HTML inside the JavaScript in a more efficient and readable approach. We can create JSX file by simply writing 'jsx' in lower case after writing file name followed by the period.

JSX.png

To put simply it was introduced to combat complex structure to write the HTML inside the JavaScript. Henceforth, JSX was born to be the solution to this problem. Do not get confused over it. JSX helps us to include the HTML inside the JavaScript.

Listed below are the few rules to follow:

  • Do not use excessive div tags instead use other meaningful tags like section/article/fragment/main/nav/aside.
  • Always remember to use camelCase for html attributes.
  • Do not write class instead write className.