DEV Community

Dharshini E
Dharshini E

Posted on

React - XML , JSX & Babel

#react #java #webdev #programming

What is XML?

  • XML - extensionble Markup Laguage.
  • its a Markup Laguage like HTML but it mainly used for store and transport the data but not it display.
  • it ueses custom tags but you define insead of using fixed tags like <p> ,<h1> in html .
  • it is both human readable and mechine readable.

Example:

<student>
<name>dharshini</name>
<age>21</age>
</student>
Enter fullscreen mode Exit fullscreen mode

what is JSX?

  • JSX - Javascript XML.
  • JSX is a syntax extension for javascript used in react.
  • it allow you to write HTML like code in react.
  • JSX let us to write UI code but look like HTML which easy to read but browser doesnot understand ,a tool called babel it translate into normal javascript that browser can run.

Different b/w javascript and javascript XML:
Javascript is a main programming language but jsx is syntax extension let us write UI code like HTML in react . JSX was introduced because write UI code in plain javascript is diffuclt and messy so jsx made it easier ,more readable and developer-friendly .jsx get complied to plain javascript using babel.
what is babel?

  • Babel is a javascript complier or transpiler.
  • it is used to convert mordern javascript into plain javascript ** that all **browser can **understand.
  • **
  • Browser doesnot understand the jsx or some modern javascript features like let ,const,arrow function ext...
  • Babel translate that code into an older version of javascript so it works every where.

Top comments (0)