You can now run Node.js in any browser!
even worked with it. The React repository is among
the most popular projects
of all time on GitHub, and you can find the framework in the
head sections of
millions of webpages — from personal blogs to e-commerce stores to the world’s
largest websites like Facebook and Airbnb.
React’s component-based architecture is exactly what many developers need to build great web applications at scale. Some choose React because it’s easy to combine with almost any other tooling: React doesn’t force you to use the functionality you don’t need. Thanks to its vast community and many contributors, React is comprehensively documented, and you can find thousands of example apps written in the framework all over the internet.
But even though React is a top choice for many organizations, does that mean it’s the right framework for your next project? In this article, we’ll dive deeper into React to help you decide. We’ll cover what React is, how it originated, how it can be used and some of its advantages and disadvantages.
React was first released as an open source project in 2013 by Facebook. The framework became popular for applications that, like Facebook, need to constantly update their pages to reflect changing data. Facebook named the framework React because, as users trigger events that change data, the view “reacts” to those changes by updating components to display a current state. To better understand the origins of React, let’s examine the architectural design pattern at its foundation.
Many of the frameworks created before React follow the MVC (Model-View-Controller) pattern. However, React is based on a different pattern, developed by Facebook, called Flux. Both application architectures sport a three-layer development architecture, but they vary dramatically in how they operate.
In an MVC design pattern, the model maintains the data and behavior of the app, the view displays the model in the UI, and the controller serves as an interface between the model and the view. A user event signals the controller to activate the model and view, generating a response to send back to the user.
How does this relate to React? After a time working with the complexities of the MVC pattern, the Facebook development team decided to make some important changes in the system. These changes produced the Flux application architectural design, which they released as an alternative to MVC architecture. The Flux model consists of a dispatcher, one or more stores, and views, which are themselves React components. Let’s look at the Flux infrastructure in depth to gain some insight into the logic behind React.
How do Flux’s three layers work together? When a user clicks on an element in one of the components, or views, that user event activates the dispatcher. The dispatcher gets its name from its role of dispatching methods to update the state in each given store.
The dispatcher helper methods, called action creators, support a semantic API that describes all possible changes in the application. You can think of actions as a fourth layer of the Flux model — they serve as intermediaries between the dispatcher and the view. As soon as the store’s state is updated, the view displays new data.
Flux supports a unidirectional data flow by design, complementing React's structural cycle which moves from components to dispatcher to store and back to components. If you’d like to understand the nuances behind the Flux model as well as the integration between Flux and React, we recommend checking out Facebook’s in-depth overview.
Now let’s explore the advantages and disadvantages of using React.
Perhaps the most significant benefits of using React that distinguish it from other front-end frameworks are its performance, its reusable components, the huge ecosystem surrounding it, the ease of rendering React on a server, and the flexible way it integrates with other libraries and frameworks. Let’s explore these advantages in more depth.
Speed React’s speed on the web is largely due to how the framework interacts
The virtual DOM is a representation of the actual
kept in memory, which React syncs with the “real” UI using its
library. React uses the virtual DOM, rather than the actual DOM, to see when the
application has changed; it then re-renders nodes in the actual browser DOM only
when needed. React uses a
reconciliation algorithm to
minimize the number of DOM updates it makes. Less updating means a faster
While React pages can be very fast, it does not mean simply using React will necessarily speed up your web app. To realize the framework’s potential for speed, you still need to pay attention to how the information flows within components and how React updates the DOM.
Reusable components Each component in a React app has its own logic and controls its own rendering. These components can be reused wherever you need them; if you need to add ten buttons to your web application, for example, you can write just one component and use it with different options to create all the buttons you need.
Reusing components makes your apps easier to develop, maintain and scale. If you change the button component, all buttons are updated, since they are just instances of this component. Reusing components cuts down on errors and saves development time, all while helping you achieve a consistent style and feel across the entire web application.
Community and libraries The ecosystem around React is supportive and full of resources. It’s easy to find training content, React examples and articles written by seasoned developers, and someone to answer your niche Stack Overflow question. Moreover, there’s an abundance of ready-made component libraries and developer tools that work with the React environment.
React c**an be combined with other frameworks** React’s flexibility extends all the way to its interoperability with other libraries frameworks. With a proper and careful setup, you can embed React into application written mostly using other libraries or integrate other libraries into applications written chiefly in React. Moreover, React supports incremental migration, so developers who wish to gradually implement the library can easily start with just one small component. Check out this article on integration with libraries that outlines some best practices for using React with other popular frameworks.
Now, before you get too excited about the benefits of React, let’s cover some potentially negative aspects of using it in your projects.
As revolutionary as React has been, it still has its downsides. We’ll briefly touch on two of the most significant ones: how quickly new versions come out, and the complex, vast set of tools available to React developers.
Fast development pace From React’s constant updates to the many companion libraries constantly being created to support it, React technologies are accelerating so fast that keeping up to date may prove difficult. Although its documentation is diligently updated, React’s fast-paced development means it’s easy to be left behind on an older version.
This might not sound like an issue, but constantly updating the library, especially with breaking changes between versions, can cost your development team a significant amount of time. This is especially relevant if you use React with other libraries and frameworks.
Complex development tools React boasts a comprehensive set of design and debugging tools, but navigating them or even knowing which ones to use can be difficult. We recommend starting with a browser extension called React Developer Tools that allows you to inspect React components and maintain their hierarchies in the virtual DOM. But beyond that, discovering which tools best suit your application and coding style, and then learning them, can be a wearying process.
Now that you are familiar with the benefits and the drawbacks of using React, let’s have a look at some use cases that fit the framework well.
Web UIs Web user interfaces are React’s bread and butter. Use it on the front end in web applications of any size, from your parents’ food blog to the next Airbnb. React shines in complex UIs with lots of reusable components, but its speed benefits apply to all kinds of websites.
Mobile applications With React Native you can create apps for Android and iOS simply by writing regular React code. Typically, when using React Native the two mobile platforms can share most of the code base, and you can add native extensions for each platform.
Static websites The abundance of API libraries and tooling for React makes it a great fit for more complex static websites where some content is fetched through an API.
So while we can easily regard React as just another front-end framework, it’s React’s features and variety of use cases that differentiate it from other frameworks that achieve the same goal.
Many questions come up when using a framework as intricate and vast as React. We’ll go over a few of them below. For more detailed questions about React, we suggest checking out the FAQ section of React’s glossary.
Can I use React with a PHP backend? Absolutely! Although a Node/Express server is the most common backend for React applications, PHP and other back-end technologies can certainly substitute. Here’s a Bitsrc tutorial on building a contact form with React and PHP, and here’s a more general guide from Davison Pro on using both languages in a project. And here are some Github examples with React and Go, Rust, and Ruby.
Does Google use React? Google develops two competing technologies: Polymer and, more notably, Angular. While it’s possible that cross-functional teams at Google use React, the company has its own massive Angular infrastructure which is responsible for most of their front-end functionality. However, some big-name companies that do use React include Instagram, Netflix, Whatsapp, Dropbox, Airbnb, Microsoft and Slack.
What is the difference between React and React Native? React Native does not use HTML or CSS, instead providing components that act like typical HTML elements as well as an animation API. (On the web world, such an API is unnecessary thanks to CSS animations.) Another difference is that when you start a new project with React, you will likely choose a bundler like Webpack or Babel and then determine which modules you need to bundle for your project. In contrast, React Native comes with everything you need; you very likely won’t require further dependencies. Some additional differences are explained in this Medium post.
In this article, we discussed React’s origins and history, and how it now includes development for mobile apps. We also looked at its major benefits and challenges, highlighting its performance, robust community and flexibility, which come at the cost of needing other libraries to build a full-stack app and keeping up with a fast development pace.
To learn more about React, we recommend checking out our React code samples and React’s own documentation.