HTML is a very old and very familiar language for structuring web applications. In the past, it used to be that we combined JavaScript and HTML to get some dynamic features. Now React allows us to build interactive apps with advanced features. In this article, we’ll take a closer look at differences between JSX and HTML.
Structure of the page
If you’ve ever looked at React code, you have probably noticed parts of the component that looks like HTML. That is JSX, template language for React. It is used to define structure for your React apps, render components and elements without too much effort.
Despite all the similarities, JSX is actually is very different from HTML. For one thing, it’s actually JavaScript syntax that intentionally looks like HTML. In this article, we will explore all these differences and try to help you understand one if you already know the other.
Conceptual differences
JSX is a template language for React, a JavaScript based library. React is supposed to re-render every time there’s a change to state or props. JSX allows you to embed dynamic values like state variables into the code. If you have dynamic values in the structure of your app, then the whole page needs to update when those change.
Catch is that you can not embed full JavaScript statements inside JSX. This guide explains how to implement features like switch case in React.
React does this using something called virtual DOM. It maintains a separate image of what the DOM needs to look like, and then efficiently updates the real DOM.
On the other hand, HTML is pretty static. HTML contents are unlikely to change due to user actions. That is one of the main differences between HTML and JSX. One is dynamic, and one is static. JSX is only a syntax sugar to provide a familiar development experience. Otherwise its very different from HTML.
Accessing DOM elements
Working with specific DOM elements requires a different approach in React. You may be used to the getElementById method, often used for selecting specific elements in plain JavaScript and HTML environments. As we already mentioned, React does not want you to directly access the DOM. Everything in React happens to virtual DOM, and React takes care of the rest. Still, JSX provides an alternative to getElementById() for React. These are called refs.
In class components, you can create a ref using the createRef method. You need to associate the ref to an element using the ref attribute. In functional components, you can create an empty ref using the useRef method. Then you can associate it to an element the same way you do in class components.
Handling inputs
Event handlers are nothing new. Web developers have used them to handle user interactions for decades now.
In HTML, everything is simple. There are a number of events you can handle. You only need to set event handlers as attributes.
Values of event handlers are set to functions formatted as strings. For example:
<button onclick=”console.log(‘hello world’)”>Click me</button>
As you can see, onclick event handler is set to a string that contains a function. Also note that name of the event handler is lowercase.
In React, you can not set event handler to a string. You set it to a real function. Keep in mind that you need to use curly braces to include JavaScript expressions in JSX. Similarly, you can have SFE shows that you can have conditional attribute as well. So adding of the event handler itself can be based on a condition.
Name of the event handler changes as well. React has most of the same built-in event handlers that HTML has. But onclick in HTML becomes onClick in React. All event handler names are camelCased. Let’s look at an example:
<button onClick={console.log(“clicked on a button”)}>Click</button>
As you can see, JSX code looks just like HTML, with few differences. First of all, event handler is camelcased. Second, we use curly braces to set onClick equal to a function call in JavaScript.
Syntax
Comparing the syntax of React and HTML is a bit like comparing apples to oranges. Two technologies have different, but overlapping use cases. HTML syntax is usually simple, as long as you have basic skills to understand HTML.
Whereas React apps can be broken down into small components, so they can be as simple or complex as you’d like. Components can be of two types – functional and class components. These components are written either as JavaScript functions or classes, respectively. Needless to say, functional syntax is simpler. Since the introduction of hooks few years back, functional components can do everything class components can. In my personal opinion, there’s no concrete reason to use class components anymore.
Development Process
Writing HTML code of a page is fairly straightforward. You may need some CSS to make elements to stand out, but if you have experience, you can easily write a simple HTML page.
React involves more compiling, and requires a bit more setup to make it work. React also has more rules you need to follow, and peculiar syntax rules. Overall, React takes more time to learn, but that’s understandable considering it has wider scope of use.
Capabilities
There are limits to what HTML or React can do. In case of HTML, it is a language only used for markup. In other words, to define the structure of a web page. Thanks to JSX, React can define the structure as well. More than that, React is a JavaScript library that allows you to easily implement dynamic features to build interactive UIs.
While it is not a full fledged framework, React can be easily combined with other libraries and packages to deliver a full web application. Libraries like react-router give you the routing features. You can even use React to build statically rendered web apps.
Top comments (0)