You might think JSX is just plain HTML but it's funny that it is not. In this article we will cover:

• What JSX is and
• The differences between JSX and HTML?

Let's get started😀

What is JSX?

JSX is simply JavaScript + XML. JSX is a JavaScript extension that lets you write some HTML-like syntax within JavaScript.

We are going to write JSX in a react code.

Firstly, we'll create a react app

yarn create-react-app test

It's going to look like this when the installation is done

After the installation, you go to your App.js and delete every other code. You will also delete other files like App.test and logo.svg. When you are done deleting, copy the code below and paste it into your App.js.

Import React from 'react';
Import ReactDom from 'react-dom';

const App = () => { 
 return (
  <div>
     <div>
       <p> Hello, this is a  simple JSX syntax <p/>
     </div>
  <div/>
 )
}

export default App;

Save and run the App

yarn start

The differences between JSX and HTML

JSX is almost like HTML but it has certain visible differences which we are going to look at now.

Here we go😁

First,

In HTML, multiple elements are retuned.

// HTML
   <ul>
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
     <li>
       Some text
       <ol>
         <li>Some text</li>
         <li>Some text</li>
       </ol>
     </li>
   </ul>

   <div>
      <p>Some text</p>
      <p>Extra text</p>
   </div>

While

Nested JSX must return one element. Which will be the parent element that wraps other levels of nested elements. Without the wrapper element(in this case the div), JSX will not transpile.

// JSX
<div>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>
    <i>Lorem Ipsum</i>
  </p>
</div>

Secondly,

The class attribute can be used on any HTML element. The class name is used by CSS and JavaScript to perform certain tasks for elements with the specified class name.

// HTML
<h1 class="special">Some text</h1>

// CSS
.special{
   color: blue;
}

While

In JSX you can't use the word "class" to define HTML classes which are used by CSS and JavaScript to select and access specific elements. Because class is a set-aside word in JavaScript. You use className instead of class.

// JSX
<h1 className="funny">Some text</h1>

// CSS
.special{
   color: blue;
}

Thirdly,

In HTML it is not necessary to use camelCase for attributes and events references. It's your choice to use camelCase, lowercase, or hyphens for naming attributes and event references.

// HTML
<p id="myText">My Paragraph</p>

While

In JSX, all HTML attributes, and event references become camelCase this way, onclick becomes onClick and the same thing applies to onchange it becomes onChange.

// JSX
<input name="firstName" onChange={handleChange} />

Fourthly,

In HTML, almost all tags have an opening and a closing tag except tags like the br tag, the hr tag, the input tag, and other self-closing tags. It's not every HTML element that can be written as a self-closing tag.

While

In JSX, any element can be written as a self-closing tag For instance,

// JSX
<div/>
<img src={testImg} alt="testing"/>

Next,

In HTML, you can write inline CSS by using the style attribute directly in the HTML element though it is not the most suitable solution.

// HTML
<div style="color: purple">Some text</div>

While

In JSX, you create a function which you will later call back in the " style" attribute.

//JSX

const textStyle = {
  color: "purple";
}
return <div style ={textStyle}>Some text </div>

Lastly,

HTML is neither compiled nor interpreted. HTML is what's known as a “markup language.”

While

Since JSX is not a valid JS code. We need a tool like Babel for JSX syntax to be compiled into JS.