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 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?
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:
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.
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:
And here's an example of looping in Vue.js. Look at the v-for attribute:
Here's an example of looping in React.js
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.
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's NPM package has millions of weekly downloads as well.
Over 9K companies reported on Stackshare that they are using React. You can even see Fortune 500 companies.
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.
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
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.
React is an excellent tool with which to create interactive applications for mobile, web, and other platforms.