HTML, CSS, and JavaScript are three foundational languages for building dynamic apps. JavaScript, in particular, allows you to add dynamic (also called ‘smart’) features to your app. Expert web developers can use JavaScript to do some wonderful things, but for most of us, JavaScript is only a viable option for simple features. If you need advanced interactive features, you’ll have to switch to one of the front-end libraries. In this article, we will focus on React, and how it compares to plain JavaScript.

React is probably the most popular front-end library right now. It incorporates reusable components to make development easier and faster. Not to mention the easier debugging. React also offers a number of unique features that make it a perfect choice for building interactive web applications.

So without further ado, let’s see what its like to build apps with React vs plain HTML and JavaScript.

Easier and faster development

As we already mentioned, reusable components are the cornerstone of React. Components are pieces of UI that, when put together, make a web application. In fact, React apps are nothing but component trees.

Every React component can maintain its own state and has its own custom layout. React components also support lifecycle methods (and the useEffect hook) to run side-effects – perform functions outside of the closed loop of React. You can insert functions to run when the component mounts (first appears on the page), re-renders (every time it is updated), and dismounts (once the tab is closed).

Typically we use JSX to define the layout for React components. JSX is another advantage of React. It is a templating language that looks like HTML, but is actually JavaScript. Thus JSX provides familiar development experience, so React devs can build and structure apps with ease. Anyone who is familiar with HTML can get themselves acquinted with JSX fairly easily. At the same time, because JSX is actually JavaScript, it offers us many opportunities to include dynamic features inside structure of your app. For example, you can set className attribute to a template literal. This is great because you can create React className variable and string.

Differences between HTML and JSX are fairly small. If you’re familiar with HTML syntax, you will get a hang of JSX very easily. Some attributes in HTML have different names in JSX. For example, class in HTML becomes className in JSX. This is mainly to avoid errors due to ‘class’ being a reserved word in JavaScript.

Other minor differences include syntax for event handlers. Like in HTML, event handlers are standard attributes in React. Only in HTML, they are set to string values. In React, inline event handlers are set to real functions. Also attribute names are camelCased. ‘onsubmit’ in HTML becomes ‘onSubmit’ in React.

Reactive features

React gets its name from its reactive nature. Meaning that changes in web application (user selecting an input, for example) are reflected almost immediately. This is possible thanks to state and props in React.

State is a JavaScript object that maintains the latest ‘state’ of the component. In other words, if there are variables that might change due to some external event, they are stored in the state. React always keeps track of changes to the state and updates the app to reflect the latest condition of the state.

React uses virtual DOM to keep track of changes without overwhelming the computer resources. Virtual DOM is a lightweight copy of the real DOM – it keeps track of what elements need to be rendered on the page, and their contents. You can use the state (or props) to have dynamic contents or even elements’ style. When the state or props changes, virtual DOM will re-render and reflect the latest changes on the page.

Layers of abstraction

React is built with JavaScript, so you can use JS to do everything we do in React. But it would take a lot of time and effort, and might not work as consistently as React. The library has rules and patterns that ensures consistency of data.

React also trumps JavaScript for building complex apps. Using JSX to define component layouts is much easier than using React’s top level API. A simple app with multiple different components and elements looks very complex when you use React.createElement API.

Limitations of React

React is consistent and efficient, but it requires developers to follow certain rules. For me personally, the biggest one is the inability to use getElementById in React. Instead, you are forced to use refs. You eventually get used to it, but refs are not as simple as getElementById method. This is probably necessary to ensure that you do not work with Real DOM, but only virtual DOM.

React also needs to be compiled and sometimes transpiled to render on the real page. This takes computational resources, but the team is conscious of efficiency and does a lot to make the library as efficient as it can be.

Amount of code

In plain HTML, you can reuse code in the sense of defining functions and using them where appropriate. You can not define ‘skeletons’ for bits of UI and reuse them as you need.

On the other hand, React’s reusable components are exactly that. You define the skeleton once and then fill it with relevant data. You can even use methods like map() to create components for every item in the array. This is very useful when dealing with similar bits of UI in your app, like product cards in the ecommerce store.

Thus React cuts down the time it takes to build complex apps. It allows you to take a systematic approach and define basic frames, and then use these to build complex apps.

Reusable components are also easier to debug. Unlike HTML and JavaScript, you don’t need to look for errors throughout the app. Errors are usually localized to one component, and are easier to fix.

Finally, React allows you to handle events as easily as you do in HTML. Even more so, SyntheticEvent wrapper ensures consistency across browsers. The library also supports many event handlers. You can even use onFocus in React to handle focus events.