Since its introduction in 2013, React has changed web development in more ways than one. It is now the most popular library for building user interfaces and inspired many additional libraries and frameworks to build fully-fledged web applications with React.

In this article, we will discuss the impact React had and important supporting tools like Webpack and Babel that help us create web applications in React. Learning about different mechanisms of React should help you understand how it works under the hood.

Let’s get started.

React and its purpose

React is a JavaScript library for building user interfaces. Browsers only understand CSS, HTML, and JavaScript. React technology allows you to add a layer of abstraction to easily develop complex web applications with Reactive features, hence its name. Facebook really needed a reactive UI library to build their social media website and show the latest comments, posts, and notifications without reloading the page. React was born out of this necessity.

Reusable components are another cornerstone feature for React. Components are an encapsulated JavaScript/HTML/CSS code created specifically for one purpose. It needs to be as small and minimal as possible. Then React web applications are simply a collection of these components used together. It could also be said that all React web applications are component trees. Reusable components are useful because sometimes certain elements repeat themselves. For example, an eCommerce store might have many product listings. Instead of copy/pasting the same code, we can use reusable components. This facilitates more efficient development process in React.

JSX is a templating language and makes It really simple to build components in React. It looks and functions similar to HTML, so anyone with a basic web development knowledge can start building web apps in React. Syntax as well as element names are the same as in HTML. So you can use familiar building blocks to structure your components and achieve the desired result. Great thing about JSX is that even if it looks like HTML, it’s actually compiled to JavaScript. Because it’s secretly a JavaScript code, developers can use special syntax – curly braces – to embed JavaScript expressions inside JSX. Unlike normal HTML, you can have dynamic class names, styles, and even contents on the page. This is a foundation for building dynamic web applications. Not only that, but you can also use React Native to develop mobile web apps and Electron to create desktop apps.

Normal web applications have a DOM – a representation of the structure and contents of the page as JavaScript objects. React has virtual DOM, a copy of the real DOM. It uses virtual DOM to track changes and only update the part of the real DOM that changed, not the entire page. As a result, React is very fast and efficient in updating the page when changes occur. Virtual DOM is great but it also makes things difficult. For example, we use refs instead of get element by ID in React.

React is the most popular JavaScript library thanks to these features. Simplified web development process is often taken for granted. In the past, building beautiful dynamic web applications used to take much longer.

Web development before React

Before introduction of React, we used plain JavaScript and simple libraries like jQuery to build web applications. Previously we had to directly modify DOM elements to customize web applications’ appearance and style. This is a time-consuming approach, and did not allow us to implement dynamic features with ease.

jQuery library offered a slightly more refined way to modify the DOM and listen for events. Its easy and simple syntax was loved by developers. Eventually, Google released Angular.Js, an evolved JavaScript framework with many features that jQuery didn’t have. Angular was first web framework to allow developers to organize dynamic web applications on a large scale. Features like data binding were a hit.

Still, early JavaScript frameworks came in short in a number of ways. For example, they did not allow you to manage internal state, so web apps were prone to show outdated information or slow loading. It was difficult to create reusable components, so the development process was long and time-consuming.

Part of the reason why React became so popular is because it provided what the web development community needed. With React, web developers had access to faster web development and better overall quality of applications.

Data Binding and Flow

The library pioneered an unidirectional data flow. Meaning that parent components pass data down to child components. As a result, data is more consistent and easy to manage throughout the app. In small scale web apps, we use props to pass down data from parent components to children. React also offers Context API for large scale web apps, and redux for a comprehensive data management solution.

Scalability

Another great thing about React is that it’s equally effective for building small and large web applications. It especially shines when you need to develop an interface for large scale dynamic web apps. For example, web apps for Netflix and Instagram rely on React to display changing information.

Community

React is by far the most popular JavaScript library, so there’s plenty of information on how to implement a specific feature. For example, this is a tutorial that explains how to clear form after submit in React. If you can’t find answer anywhere, StackOverflow has many qualified React developers ready to answer your questions and help you overcome a certain bug or misunderstanding.

How React changed web development for the better - summary

Hopefully we were able to illustrate how React improved the web development process for the better. Features we described have become integral in web development today. Even frameworks other than React have adopted similar approach to handling changes and other important aspects of building web apps.