If you are new to React.js, you must be wondering why it is so popular and why you should use it in your applications. If so, then you are in the right place.

Let's discuss what makes React.js so great and why you should use it in your projects.

Table of Contents

  • A Brief History of React.js
  • Why Should You USe React?
  • React is Flexible
  • React Has a Great Developer Experience
  • React Has Facebook's Support/Resources
  • React Also Has Broader Community Support
  • React Has Great Performance
  • React is Easy to Test

A Brief History of React.js

Facebook created React.js in 2011 for their own use. As you know, Facebook is one of the biggest Social Networking websites in the world today.

In 2012, Instagram also started using it, which is a subsidiary of Facebook.

In 2013, Facebook made React.js open-sourced. Initially, the developer community rejected it because it used Markup and JavaScript in a single file. But as more people experimented with it, they started embracing the component-centric approach for separating concerns.

In 2014, many large companies started using React.js in their production environments.

In 2015, Facebook open-sourced React Native too. It is a library that allows us to create native mobile apps in Android and iOS using React.js.

In 2016, with version 15, React.js started using Semantic Versioning. This also helped convey to the developer's community that React was more stable.

Today, React.js is used by many Fortune 500 companies. Facebook has full-time React development staff. They regularly release bug fixes, enhancements, blog posts, and documentation.

Why Should You Use React?

You must be wondering why you should use React.js. After all, as the uses of JavaScript have increased in recent years, we now have multiple options available in the market like Angular and Vue.js. So, why React?

Let's explore six key reasons to use React.js.

React is Flexible

React is remarkably flexible. Once you have learned it, you can use it on a vast variety of platforms to build quality user interfaces. React is a library, NOT a framework. Its library approach has allowed React to evolve into such a remarkable tool.

React was created with a single focus: to create components for web applications. A React component can be anything in your web application like a Button, Text, Label, or Grid.

But as React's popularity is grown, its ecosystem has also grown to cover various use cases.

You can generate a static site with React using tools like Gatsby. You can use React Native to build mobile apps. You can even create Desktop applications using a tool like Electron, which can run on mac and windows with React.js technology.

React also supports server rendering of its components using tools like Next.js. You can also use React.js to create a virtual reality website and 360 experiences using React VR.

"Learn React Once and Write Everywhere" - Reactjs.org

You can use React in your existing apps too. React was designed keeping this in mind. You can change a small part of your existing application by using React, and if that change works, then you can start converting your whole application into React.js. Facebook used the same approach.

"The main advantage of using a Library over a Framework is that Libraries are lightweight, and there is a freedom to choose different tools. The Framework consists of an entire ecosystem to build an application, and you don't have an easy way to use any other tools outside the Framework."

React Has a Great Developer Experience

Your team will fall in love with React when they start coding in it. Rapid development and React's small API combined creates a fantastic developer experience.

React's API is very simple to learn. It has very few concepts to learn. Here is a small example of a React Component:

React-Component
React Component

You just need to import the React library. Message is the component that accepts props (input) and returns JSX.

JSX is a special syntax that looks like HTML, which converts React's API calls and finally renders HTML.

Traditional frameworks like Angular and Vue power up the HTML. They use JavaScript inside HTML. They have created HTML attributes that give extra capabilities to it.

The main problem with this approach is that you have to learn those new HTML attributes or always keep looking at the official documentation.

Here's an example of looping in Angular. Look at the *ngFor attribute:

Angular-Loops
Angular Loops Example (Source : Angular)

And here's an example of looping in Vue.js. Look at the v-for attribute:

vue-looping
Vue Loops Example (Source : vuejs.org)

React uses the opposite approach. It uses HTML (JSX) inside JavaScript. I like this approach because here, you can deal with pure JavaScript and HTML.

Here's an example of looping in React.js

loops-in-React
React Loops Example (Source : Reactjs.org)

The React component NumberList is using pure JavaScript code (the map function). Also, you can see that JSX is a simple well-known HTML tag with no fancy attributes. The render function is simply rendering the NumberList component in the root element in the HTML file.

What else you need as a developer if you have the platform where you can deal with pure JavaScript and HTML and still build an interactive UI?

Note: When I say "pure JavaScript" that doesn't mean you will use vanilla JavaScript in React. React is a JavaScript Library, and it has its layer on top of the Javascript. BUT, as I said, the React API is very small and simple to learn. Angular & Vue force their rules on you. React is more conceptual. It shows you how you can make better use of vanilla JavaScript in the React way.

React.js also gives us the create-react-app package, which allows you to start development instantly.

React Has Facebook's Support/Resources

React is heavily used in the Facebook app, website, and in Instagram. That's why Facebook is deeply committed to it. They use over 50k React components in their production environment. The top four React contributors on GitHub are full-time Facebook employees.

React-js-Top-Contributors
Top React.js Contributors

Also, the React team maintains a blog that consistently gives you details for each release.

Because of the deep commitment by Facebook to React in production, when breaking change occur in React, Facebook consistently provides Codemod that automates the change.

Codemod is the command-line tool that automates changes to your codebase. When a new specification comes into React, Codemod automatically replaces older components with the newer specification.

React Has Broader Community Support, Too

Since 2015, React's popularity has grown steadily. It has a massive active community and its GitHub Repository has over 164k Stars. It is one of the Top 5 Repositories on GitHub.

React-Git-Repository
React Git Repository.

React's NPM package has millions of weekly downloads as well.

React-NPM-Package-Downlaods

Over 9K companies reported on Stackshare that they are using React. You can even see Fortune 500 companies.

Stackshare-React
Companies Using React

Reactiflux is a community specially made for React Developers. Over 110k community members are involved in helping solve and share React-related problems.

One of the most popular websites among software developers is StackOverflow. You can see that there are over 250k questions asked about React and related libraries.

React-in-Stackoverflow
React on Stackoverflow 

In some cases, you don't even need to create your components. There are lots of free and mature component libraries already available online.

Here are some examples:

  • Microsoft has created the Fluent UI component library that gives you a chance to develop your UI (resembles office).
  • Material-UI offers React components that implement Google's Material UI guidelines.
  • React-Bootstrap contains React components that make it easy to work with Bootstrap.
  • Also, check the Awesome React Components list on GitHub to find more React components.

There are also mature related projects/libraries that you can use with React.

  • If you want routing, then go for React Router. If you want to manage a more complex data system, then use Redux and MobX.
  • For automated testing, use Jest, which is also from Facebook.
  • For RESTful API calls, use GraphQL.
  • For the server-side rendering of React components with node, use Express.js.

All these libraries and tools are important, because if you are looking to build something in React, you will find tons of help and solutions on the web for everything.

React Has Great Performance

The React team realized that JavaScript is fast, but updating the DOM makes it slow. React minimizes DOM changes. And it has figured out the most efficient and intelligent way to update DOM.

Before React, most frameworks and libraries would update the DOM unintelligently to reflect a new state. This resulted in changes to a significant portion of the page.

React monitors the values of each component's state with the Virtual DOM. When a component's state changes, React compares the existing DOM state with what the new DOM should look like. After that, it finds the least expensive way to update the DOM.

This doesn't seem very easy, but React handles it very well behind the scenes. It has multiple benefits like avoiding layout trashing, which is when the browser has to re-calculate the position of everything when the DOM element changes.

Also, since most applications are being used on mobile devices they need to be highly efficient. So, saving battery and CPU power is very important.

React's simple programming model allows it to change state automatically when data gets updated. This happens in the memory, so it is speedy.

React's library size is also tiny. It is less than 6kb (less than 3kb when gzipped). This is significantly smaller than its competitors.

React is Easy to Test

React's design is very user friendly for testing.

  • Traditional UI browser testing is a hassle to setup. On the other hand, you require very little or no configuration for testing in React.
  • Traditional UI browser requires browsers for testing, but you can test React components quickly and easily using the node command-line.
  • Traditional UI browser testing is slow. But command-line testing is fast, and you can run a considerable amount of test suites at a time.
  • Traditional UI browser testing is often time consuming and challenging to maintain. React test can be written quickly using tools like Jest & Enzyme.

There are wide variety of JavaScript testing frameworks available on the web that you can use to test React.js (since it's also a JavaScript library). Some popular testing frameworks are Mocha, Jasmine, Tape, QUnit, and AVA.

Conclusion

React is an excellent tool with which to create interactive applications for mobile, web, and other platforms.

React's popularity and usage are increasing day by day for good reason. As a developer, coding in React makes you better at JavaScript, a language that holds nearly 90% of the web development share today.

Thank You for reading this article. Connect me on LinkedIn and read more about Web Development on my Blog.