What are the differences between JSX and HTML?
Last Updated :
23 May, 2022
Introduction to HTML: HTML is a Hypertext Markup Language, the standard markup language for documents designed to display and view on the web in a web browser.
Here is a code to create a basic form in HTML:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>HTML Form</h2>
<form>
<label for="firstname">First name:</label>
<br>
<input type="text" id="firstname" name="firstname" value="Shubh">
<br>
<label for="lastname">Last name:</label><br>
<input type="text" id="lastname" name="lastname" value="Barotha">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
|
Output: 
Introduction to JSX: JSX (JavaScript + XML) is an extension of JavaScript that permits you to write down HTML directly within JavaScript, which features a few benefits of creating your code more readable and exercising the complete power of JavaScript within HTML. JSX is in some ways almost like HTML, however, it does accompany certain conspicuous differences which we’ll cover within the next section. Since JSX isn’t a legitimate JS code, it must be compiled into JS with a tool like Babel or similar.
A simple example of JSX:
const App = <h1>Welcome to GeeksforGeeks</h1>;
Here is the code for creating a simple example in JSX:
Create a new app in reactjs by using the command:
npx create-react-app myapp
Your project structure will look like this:
We are going to write a basic jsx in react code.
To begin, open App.js and make the following changes:
import React from 'react';
import ReactDOM from 'react-dom';
const App=()=> {
return(
<div><h1>Welcome to GeeksforGeeks</h1></div>
)
}
export default App;
Save and close the file and run the project by using the command from your project directory:
npm start
Output:
If you click on the Submit button, the page will reload. Since you are building a single page application, you will prevent this standard behavior for a button with a type=”submit”. Instead, you’ll handle the submit event inside the component.
JSX vs HTML:
The basic differences between JSX and HTML are as follows:
| HTML |
JSX |
In HTML, multiple elements can be returned.
For example:
<ul>
<li>unordered list
<ol>
<li>ordered list</li>
<li>ordered list</li>
<li>ordered list</li>
</ol>
</li>
<li>unordered list</li>
<li>unordered list</li>
</ul> |
Nested JSX must return one element, which we’ll call a parent element that wraps all other levels of nested elements:
<div>
<p>pink</p>
<p>yellow</p>
<p>green</p>
</div>
Without the wrapper element, JSX won’t transpile. In React, we can render JSX directly into HTML DOM using React rendering API, aka ReactDOM. The formula for rendering React elements seems like this:
ReactDOM.render(componentToRender, targetNode)
ReactDOM.render() must be called after the JSX elements declarations. |
|
HTML elements have attributes.
e.g., maxlength in <input maxlength=”16″ />
|
JSX elements have props.
e.g., maxLength in <input maxLength=”16″ />
|
| It is not necessary to use camelCase for attributes, ids and event references. Its totally your call to use camelCase, lowercase or hyphens for naming them. |
All HTML attributes and event references in JSX become camelCase, this way, onclick event becomes onClick and onchange — onChange. |
| The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. |
You can’t use the word class to define HTML classes, since class is a reserved word in JavaScript, instead, use — className. |
| In HTML almost all tags have an opening and a closing tag except probably a few like <br/> |
In JSX, however, any element can be written as a self-closing tag, for example: <div/>
Example:
const string = <img src={user.avatarUrl} />; |
Since the JSX component represents HTML, you can put several components together to make a more complex HTML page.
The fact that JSX looks like HTML doesn’t make it any more of HTML, in fact, you can still write normal functions bypassing the HTML-like syntax.
The bottom line is that JSX is not HTML or a template engine.
Share your thoughts in the comments
Please Login to comment...