Let's compare JSX with HTML
September 30, 2021A web page is made of HTML as its structure, stands for Hypertext Markup Language. The code is either HTML originally or compile to it so the browser can read it and show the content of the web page on your screen.
On the other hands, JSX stands for JavaScript Syntax Extension or some called JavaScript XML. It was introduced with Reactjs around 2013. It allows developers to write HTML within JavaScript. So technically when you’re writing JSX, you’re writing JavaScript and HTML together. Also that’s why some HTML attribute renamed on JSX, like the “**class**
” attribute on HTML to be “**className**
” on JSX since “**class**
” is a common keyword for JavaScript.
Other thing is, HTML is natively supported by all browser. While JSX on the other hands, is not. So you need a compiler like Babel or Webpack to make the browser can understand it. Now let’s compare JSX with HTML
So, what the main difference?
JSX must return a single parent element
One major difference is you must return a single parent element in JSX, or it won’t compile. While on HTML you are free to do what ever you want as you don’t have to return a single parent element in a single file. Let’s see here, JSX give an error because there are two parent elements.
Error on JSX if there are more than one parent
To fix this, we can add fragment which is **<>...</>**
. See below after fragment added.
There’s no error after adding fragment
You can write JavaScript code directly inside JSX
In JSX, you can directly write JavaScript code alongside the html tag. Where in HTML you need a <script>
tag or an external JS file to implement JavaScript. In JSX you can write JavaScript code between curly braces {...}
. Like below:
1const App = () => {
2 return (
3 <>
4 {new Date()}
5 <p>Hi there!</p>
6 <p>How are you?</p>
7 </>
8 );
9};
export default App;
JSX knows className and HTMLFor, not class and for
In HTML you write class names and for attribute like so, **class**
and **for**
. But in JSX you don’t write those since both are reserved keyword in JavaScript, instead write **className**
and **HTMLFor**
.
1const App = () => {
2 return (
3 <div className="container">
4 {new Date()}
5 <p>Hi there!</p>
6 <p>How are you?</p>
7 <br />
8 <form>
9 <label htmlFor="name">Name</label>
10 <input type="text" />
11 </form>
12 </div>
13 );
14};
export default App;
JSX likes camelCase
In JSX, all HTML attributes and event references are written in camelCase. So, **onclick**
become **onClick**
, **onmouseover**
become **onMouseOver**
and so on.
1const App = () => {
2 const sayHi = () => {
3 alert("Hi there!");
4 };
5 return (
6 <div className="container">
7 {new Date()}
8 <p>Hi there!</p>
9 <p>How are you?</p>
10 <br />
11 <button onClick={sayHi}>Say it!</button>
12 </div>
13 );
14};
15
16export default App;
Inline styles are written as objects in JSX
While in HTML you write inline styling inside the tag as a string, in JSX the style is an object. So you define the style name with the properties in camelCase, the values in quotes, then you can pass it inline to the JSX.
1const App = () => {
2 const inlineStyle = {
3 color: "#000000",
4 fontSize: "12px"
5 };
6
7 return (
8 <div className="container">
9 {new Date()}
10 <p style={inlineStyle}>Hi there!</p>
11 <p>How are you?</p>
12 <br />
13 <button onClick={sayHi}>Say it!</button>
14 </div>
15 );
16};
17
18export default App;
or you could write the styles directly inside the JSX tag like this:
1const App = () => {
2 return (
3 <div className="container">
4 {new Date()}
5 <p style={{color: "#000000",fontSize: "12px"}}>Hi there!</p>
6 <p>How are you?</p>
7 <br />
8 <button onClick={sayHi}>Say it!</button>
9 </div>
10 );
11};
12
13export default App;
But of course it make your code cleaner by define the object outside JSX first and then pass it into the opening tag.
That’s it! Those are the differences that I realize when I’m working with JSX. Such a handy way to build a website! Thank you for reading, please leave a comment if you find this interesting and helpful.
🙌🏼Share this
📋More articles
Tools that I usually used as a Web Developer
For almost 2 years I have doing web developing as a job from designing landing page until write API for laravel-based web application in windows machine. Now I like to share my everyday tools for web developing that I usually used.
You can do these on Figma to work faster
Figma became popular these days to design a web/mobile user interface. That’s because Figma gives you more modern and reliable approach when come to performance, cloud storage, and collaboration. Now I wanna share with you how you can improve your designing process to work faster with Figma.
Kindle has changed my reading habits
Reading on a physical book and reading on a kindle give different experience. Those two things feel different when open the next page, highlights the text, holding it while reading, and so on. On this post, I wanna share with you what experiences that kindle will give to me compared to physical book.
Protect your form against spam bots
I was in the middle of embedding a third-party form on the website. The form snippet is just like the usual HTML form and the website is built using Next.js. At first, I thought it’s working well, fill the fields and submit it. But my team was told that we received various weird submissions with