What is React? A short introduction to React and its advantages

If you want to build a career as a web developer, you probably know you’ll need to learn coding languages like HTML, CSS, and JavaScript. But you may have noticed that there are several web developer vacancies out there that require other, lesser-known skills as well. One skill that you might have encountered while scanning through job listings is React.

React is one of the most popular JavaScript libraries in the field of web development. It is currently used by companies like Netflix, Airbnb and Instagram. But what is React exactly? What is it used for, and what are its advantages? In this article, we will give you a short introduction to React. We’ll also compare it to a front-end framework that is almost equally as popular: Angular.

What is React and what is it used for?

React (or ReactJS) is an open-source, front-end JavaScript library used in web development to build interactive elements on websites. JavaScript libraries are collections of pre-written JavaScript code that can be used for common tasks, so developers typically use these libraries when they need to program repetitive functions. Re-coding these functions every time would become quite time-consuming, so that’s where JavaScript libraries come in.

There are a lot of different JavaScript libraries available, and React is only one of them. What makes React unique is that it specialises in helping developers build the UI (user interface) for web and mobile applications. The library is responsible for the application’s view layer only, which determines how the app looks and feels while using it.

The advantages of using React

Developing and maintaining your applications is simpler

Building your app with React becomes simpler thanks to reusable components. A React web application is made up of multiple components, and each component has its own logic and controls. These components deliver a small piece of HTML code which can be reused wherever you need it. This allows you to create a consistent look and feel across your whole project.

Enhanced performance due to virtual DOM

While loading a web page, browsers create a DOM (Document Object Model) which is basically a tree diagram of how a web page is arranged. The problem with this DOM construct is the way it processes changes (for example when a user clicks on a button): a server constantly checks these changes to give the necessary response. To respond properly, it needs to update the DOM trees of the whole document. Since DOM trees are fairly large today, this causes long loading times. React’s Virtual DOM solves this problem: it is a copy of the site’s DOM that React uses to see what parts of the actual DOM need to change when an event happens. React then selectively updates that section of the DOM that needs change only. This increases the website’s or app’s performance.

Easy to use

React is fairly easy to use and has a gentle learning curve. Any developer with a background in JavaScript should be able to understand React after a couple of days. There is a wide range of documentation and tutorials available to help you get started. React also has a big community you can turn to if you’re stuck on a certain project.

Handy developer tools

React has also gained popularity due to the presence of a handy set of tools that make developers’ lives a lot easier. The React Developer Tools have been designed as Chrome and Firefox dev extensions. They allow you to inspect the React component hierarchies in the virtual DOM. You can select individual components and examine and edit their current properties and state. You can track the hierarchy of any component and discover both parent and child components as well.

SEO-friendly

Traditional JavaScript frameworks often have SEO issues because Google’s search engine has trouble with reading JavaScript-heavy applications. In 2015, Google announced that their crawl bot was now able to render pages with JavaScript and index them, but unfortunately, theory and practice are not the same. Many SEO professionals agree that Google still has some trouble with indexing pages that require JavaScript. What makes React more SEO-friendly than traditional JavaScript frameworks is the fact that you can implement Server-Side Rendering (SSR), which allows you to run the JavaScript code on the server before you send the files to the user for the first time. That means that Google doesn’t need to run JavaScript to read the content of the page, making indexing easier for the search engine. There are several frameworks that build upon React which make it easy for you to set up SSR. Two common frameworks are Gatsby.js and Next.js.

What’s the difference between React and Angular?

React and Angular are both frameworks for front-end developers and have similar architectures, both based on JavaScript. They both are among the most popular JavaScript frameworks, and they even made it to the top three frameworks used by software engineers according to Stack Overflow’s Developer Survey in 2018. So what are the differences between React and Angular?

Angular is a front-end framework while React is not a framework, but a JavaScript library. The difference between a library and a framework lies in the fact that a library still requires multiple integrations with additional tools and libraries, whereas with a framework you already have a complete toolset in place to start building an app.

Another difference lies in the code. React uses JavaScript, whereas Angular uses the TypeScript language, a superset of JavaScript that is suitable for larger projects. It’s getting more and more common today to use TypeScript in React projects as well. Many third-party React libraries are either written in TypeScript, or expose TypeScript types. It is a more compact language that provides a way to describe the shape of an object. This provides better documentation and makes it easier to spot mistakes in your code.

Lastly, the two technologies also differ in the type of DOM they use. As mentioned earlier in this article, React makes use of virtual DOM which tracks changes when an event happens (e.g. a user clicking a button), and updates the necessary elements only without affecting the other parts of the DOM. Angular operates on real DOM and uses change detection to find which components need to be updated.

Whether you should be using React or Angular fully depends on your personal preferences and the project you’re working on. Both technologies are widely used and accepted. The idea behind Angular is to provide a complete toolset for front-end development. The use of TypeScript increases the maintainability of code, but this comes with a price: Angular’s learning curve is considered to be much steeper than React’s. React is a much more lightweight approach for developers and is beginner-friendly for those who are already experienced in JavaScript. But since the library is not a complete toolset, you will have to work with integrations like Redux, which you will have to learn as well.

Interested in learning more about React? Check out our training Intro to React!

The Campus, Charlotte Van Rompaey 11 May, 2021
Share this post
Archive


Interviews with our VCIs: Patrick Hancke