by GuestHu » 24 May 2021, 03:55 HTML means Hypertext Markup Language. It’s a set of codes intended for display on the internet. It tells the browsers how to display a web page’s words and images and it is supported by all browsers. Whereas, JSX means JavaScript Syntax Extension or JavaScript XML. This extension allows developers to write HTML within JavaScript and requires a compiler like Babel or Webpack to translate JSX into JavaScript that the browsers understand.
In HTML, you can insert any element anywhere and it does not need to inside a parent element, unlike in JSX. It will throw an error if a line of HTML tags is not inside the parent element or fragment (<></>). Plus, HTML can self-close the elements without slash. The <br /> works the same as <br>, however, in JSX, slash must be included because it heavily relies on HTML 4 syntax.
Also, in creating a class component, HTML uses the keyword class while JSX uses className. When it comes to inserting inline css in HTML, the style attributes are inside the “” (“color: red; font-size: 12px;”) while JSX uses an object format: {{ color: “red”, fontSize: “12px” }}
People prefer JSX because it reduces redundancy and able to code faster than using HTML and Javascript.
