React and HTML are two technologies used for building user interfaces. There are many differences and similarities between the two. Differences mostly stem from the fact that React is dynamic and allows us to implement dynamic features, whereas HTML is static.
React is written entirely in JavaScript, but it has a HTML-like templating language called JSX. For this reason, the process of building apps with React is quite similar to developing pages in HTML. Only React gives you much more room for implementing dynamic features.
Event handlers are at the center of building smart web applications. React supports several event handlers like onClick. Its lifecycle methods (or the useEffect hook) also allow you to manually add event listeners and handlers. You can also use JavaScript to add dynamic features to HTML. However, syntax and some functionalities are different in React and HTML. In this article, we will explore these differences to help you understand event handling in HTML as well as React.
Naming
Most obvious difference between event handlers in React and HTML is their names. In React, event handler attribute names are written in camelCase. When multiple words (like on click) are pushed together, the first word is not capitalized, but all following words are. This helps readability and also distinguishes React from other web technologies like HTML.
Let’s look at an example of event handler in React:
<button onClick={()=>console.log(“clicked”)}>Click Me</button>
The code would look very different in HTML. In that language, you don’t need to camelCase the attribute, so the name would be ‘onclick’. This way it’s easy to distinguish between JSX and plain HTML just by looking at event handlers in the code.
Another important difference is that in HTML, event handlers are written as plain text. Whereas in JSX, curly braces allow us to embed real JavaScript code right into the JSX that looks like markup code. You can even use string interpolation in React.
Here’s how the same button and event handler would work in HTML:
<button onclick=’() => console.log(‘clicked’)’>Click Me</button>
Notice there are no curly braces or capitalizations in HTML. The code looks more plain, but personally, I prefer React’s approach. As long as you know the rules, it’s easy to grasp what’s happening. It’s less confusing than having a dynamic JavaScript function as a string.
Prevent Reload
React event handlers receive SyntheticEvent, which is an interface built on top of normal events in HTML. It provides additional functionality and information that is useful for building single page apps with React.
One of the default form behaviors is to refresh the page after the form is submitted. This behavior is a leftover from a past era. In modern apps, usually you don’t want to reload the page. That is why SyntheticEvent also has the preventDefault method. When called, it will prevent the default behavior of refreshing the page. In React, you will usually call this method at the top of the body of the event handler function.
In HTML there’s no SyntheticEvent, but you can stop the page from refreshing by having the event handler return false.
Structure
In React, we have components. When put together, these components make up the entire application. Sometimes the event handler is defined in one component, but needs to be called in another component. This guide about X explains how to do this in React. On the other hand, there’s usually separate HTML files for each page. Components are easier to manage, but require experience to effectively compose components to build a functional web app.
Use of event handlers
React is a fully fledged library where you can maintain state, and get value from input field in React. In fact, this is the most common use-case for event handlers in React.
As we already mentioned, HTML is static. You can use event handlers to directly access user inputs like value in the field, but you can not store it in the state and use it the same way you would in React.
Underlying principles
Most of these differences come down to the fact that React is designed to quickly and seamlessly respond to changes without too much delay or taking too much computational power.
This necessitates virtual DOM, which allows React to quickly scan all the components for changes. Most importantly, all changing React variables should be stored in the state. Otherwise React does not allow you to add event handlers after the element renders, or directly modify the DOM in any way.
Importantly, Virtual DOM allows React to immediately display any changes to the page. For example, if a user turns on a dark mode, the appearance of the page immediately changes. In HTML, page needs to be re-rendered.
Summary
Experienced developers will easily tell the difference between HTML and React, but beginner developers might struggle to do so, especially considering similarities between HTML and JSX.
HTML is a markup language that describes content and structure of the page. On the other hand, React is an entire library with the ability to maintain state and implement event handling. Differences in event handling stem from the fact that HTML is more or less static, but can accommodate dynamic features like event handlers. Whereas in React there are specific features for implementing dynamic features like event handlers.
Generally, comparing HTML and React is like comparing apples to oranges. React is a combination of all three technologies necessary to build a modern app - HTML, CSS, and JavaScript. React is the most popular library because it combines these features in one place and allows you to seamlessly develop dynamic apps. React components are ultimately ‘translated’ into normal HTML.
Top comments (1)
If you want to do it with html, its better to find the DOM node with JavaScript and attach the event listener with
addEventListener, that way you retain code highlighting/completion and type checking on your event handler function call. Plus it allows you to also remove an event listener during runtime withremoveEventListener.