DEV Community


Why should your business be using React?

Mobile and Web development
Originally published at Medium on ・21 min read

If you are trying to figure out what is the best technology stack for your business or your team to use, you came to the right place!

Photo by Ferenc Almasi on Unsplash
What is React?
History of the Web
History of React
How does react relate to the possible alternatives?
Dependencies and libraries
Development Tools
What is React?
React is a JavaScript library to build interactive JavaScript-driven web applications (SPA).
React provides a component-based structure. Each component has its own logic and controls its own rendering, and can be reused wherever you need it. React solves extensive DOM manipulation with virtual DOM. Any new view changes are first performed on the virtual DOM, which lives in memory and not on your screen. This guarantees a minimum update time to the real DOM, providing higher performance and a cleaner user experience all around. React also solves the problem of the UI state, which becomes difficult to manage in bigger JavaScript applications, which allows us to focus on the business logic. It’s also maintained by a big community.
As we can see below:
React is currently, the most loved javascript framework, according to the StackOverflow Survey 2020 results here for the most loved framework.
Another interesting statistic from StackOverflow Trends — JavaScript Frameworks.
There are a large number of books on react, including several O’Reilly books, and over 250 books listed on Amazon.
Finally, there are over 64,000 questions tagged with “reactjs” on Stackoverflow, so there is no shortage of answers. Overall, it has a very active and large community.
Here you can find the Official documentation about React
What problems does React solve?
Well firstly, as a modern javascript framework, react solves the same problems as some other popular frameworks ( angular, vue, svelte ), and those problems are:
Keeping the UI in sync with the state
From ( “Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.”
Efficient UI update
From ( “React will efficiently update and render just the right components when your data changes.”
Learn once, write everywhere
From ( “We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code”
Conclusion: React was created to address some of the challenges associated with large-scale, data-driven websites.
There is also an interesting blog post by the react team called Why did we build React?
History of the Web
1990–1995 : HTML, CSS and JavaScript are invented
1996–1999 : Standardization efforts begin. Browser compliance is terrible. The browser wars start.
2000–2004 : CSS frameworks begin to emerge. jQuery is born. Frontend package management.
2005–2009 : W3C specification compliance is met. Chrome browser takes the lead. Responsive designs and frameworks are introduced.
2010–2015: JavaScript Frameworks are born i.e. Backbone, Ember, AngularJS, React, Angular, Vue. HTML5 is announced.
2016–2018: GraphQL emerges. Native HTML, CSS & JavaScript become more powerful. New platforms built on-top existing JavaScript frameworks emerge: StoryBook, Motion UI, Gatsby, Next.js.
History of React
2009 — The dark days of the web application
Before 2010, the javascript frameworks market was practically non-existent. Even the language itself was still far from becoming what it would become. At that time, the market was almost dependent on the jQuery library, which allowed interaction with AJAX requests. Though jQuery lacked facilities for handling data consistently across shared views.
2010 — The first signs
In 2010, Facebook faced problems due to having many team members working on the same solution, which brought many issues related to code maintenance. As a consequence, the development speed was slowing down immensely, and the delivery quality was suffering. To fix these problems, the engineers introduced in its PHP stack, something that it would reuse in the library in the future. XHP is a PHP extension, allowing the creation of composite components, and this same syntax would be introduced in the library later.
2010 — The calm before the change
In this period, the earliest javascript frameworks begin to appear such as backbone, knockout and AngularJS.
2011 — The wave of transformation
In mid-2011, Jordan Walker, to deal with the growth and sophistication of the applications, in one phase where the codebases were pretty complicated, started experimenting with a side project called FaxJS, which brings three main characteristics would be used in the library in the future. First, to give more reactivity to the component, Second, Walker brings the concept of state. When the state change, It will update the interface and higher performance was achieved. And last but not least, it was based on the notion of components strategy, where everything is a component, it allows to build a complex UI.
2012 — The Turning Point
Facebook started to have many issues managing the ads displayed on the website because the ads usually are served by a third party server, and since there is no complete control of this third party server, it can easily break the application.
With this, Jordan, started to work on a prototype and, before long, React was born.
2012 — View of the acquisition
But creating React to use internally wouldn’t change the world even if it helped the company. In April of this year, the company acquired Instagram, this was important because they wanted to use React, but the library was tightly coupled to facebook’s site.
2013 — The pressure
After the pressure from the new acquisitions to decoupled the library, Pete Hunt, along with Jordan, drove the conversion to an open-source library, which was possible in May of 2013. (React v0 — React v0.8)
2013 — Skepticism from the crowd
After the initial release, there was a lot of skepticism about react, and many people, saw it as a bit of a step backward, but it didn’t take long, to shift their minds, and over time, people started to look better at the library. ReactJS uses JSX. It’s a syntax extension that allows HTML with JavaScript mixed together. This approach has its own benefits, but some members of the development community consider JSX as a barrier, especially for new developers. ReactJS Covers only the UI Layers of the app and nothing else. So you still need to choose some other technologies to get a complete tooling set for development in the project. React is mainly the V in MVC, this has to do with React being more of a library for a specific problem and not a full fledged framework.
2014 — The growing community
In 2014, companies released new Tools to work with the library, the community grew, and the number of conferences and meetups was immense. (React v0.8 — React v0.12.2)
2015 & 2016 — The mainstream
The mainstream really started in 2015 and 2016. After the announcement from companies like Flipboard, Netflix, and Airbnb was using React’s library and helped a lot. (React v0.13 -React v0.16)
2017–2020 — Popularity
Since the end of 2017, React has continued to grow and is now the most popular library for building client-side applications. (React v15.5.0 — React v17.0)
2021 — React 18 was announced!
Here is the blog post for the oficial announcement titled “The Plan for React 18”.
React is licensed under the MIT License and is an open-source technology.
You can find the full document for this license here:
The main capabilities of react are:
Reusable Components
Unidirectional data flow
Virtual DOM
State Management
React is component-based, components are building blocks that can manage their own state. By encapsulating these components you can build complex UI while keeping the state out of the DOM .
JSX stands for JavaScript XML and allows you to write HTML in React. React doesn’t separate technologies in different files, it separates concerns by having components that contain both the markup and the logic.
When designing a React app you have one unidirectional data flow which means that you nest child components within higher-order parent components. The parent component(s) will have a container for the state of your app (typically an immutable variable called state, unless you are using Redux or Flux, in which case you would encapsulate your app’s state in a store). The parent component typically passes down a snapshot of its state to its child components via read-only props and then the child components can communicate with the parent to update the state via callbacks which are bound to a button or form in the child component.
DOM manipulation is often a bottleneck in complex JavaScript applications and is the traditional way of manipulating the UI, traditionally the frameworks would manipulate the shadow DOM, but react manipulates the virtual DOM instead. Manipulating the virtual DOM is much faster with react because the changes are first done in memory before rendering to the screen. Once the virtual DOM has been updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update and detects what DOM objects have been changed and this is a process called diffing.
State management can be done with React Hooks or with application state management libraries like Redux.
How does react relate to the possible alternatives?
React is pretty unique when compared to the possible alternatives. There is even a page dedicated to “thinking in react” in its oficial documentation, because of how different it is.
We will go through some of the characteristics of react who end up being pretty different from the majority of its alternatives.
Library vs Framework
The React library is small and it is only used for one part of the job. It doesn’t ship with all of the tools that you’d expect from a traditional JavaScript framework.
A lot of the decisions about which tools from the ecosystem to use are left up to the developer. Also, new tools emerge all the time, and old ones are cast aside.
When it comes to the MVC Pattern
React is mainly the View in the Model-View-Controller Pattern.
In the official website for react, it is stated “React isn’t an MVC framework.
React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.”
Separation of concerns, not of technologies
What is separation of concerns?
Separation of concerns or SoC is a design principle for separating the software into sections, and each section only addresses one concern.
The benefits from separation of concerns is that the code is kept modular, loosely coupled and extremely easy to maintain.
When Angular 2 came out and forced a stronger separation of concerns through explicitly requiring different types of files for different functionality.
HTML in one file which is the section with one concern.
Your component logic is in another file, a typescript file.
Relevant CSS is automatically localized to a single file.
There can also be a service file, it is up to the developer and possibly a test file.
How does React do it?
React doesn’t have a templating file, actually, it allows for you to have one single file, and in that one single file, it can address, the template, the styling, and the logic.
React challenges the traditional method of file silos by flipping it on its side and group their code based on their relationship to each other. Language is not a hard-line barrier but is seen as one cohesive and logically related block. With React, there is no templating — just components that can be created and destroyed as required.
When code is grouped together based on a relationship rather than an arbitrary requirement, processing the block becomes easier.
Virtual DOM vs Shadow DOM
First of all, let’s clarify what is the DOM, and where it comes from and that is from the HTML.
The HTML is a set of instructions that a browser follows when constructing the document object model, or DOM. The elements that make up an HTML document become DOM elements when the browser loads HTML and renders the user interface.
In HTML, elements relate to each other in a hierarchy that resembles a family tree.
Traditionally, websites have consisted of independent HTML pages. When the user navigated these pages, the browser would request and load different HTML documents.
But then SPAs came about…
The invention of AJAX brought us the single-page application or SPA. Since browsers could request and load tiny bits of data using AJAX, entire web applications could now run out of a single page and rely on JavaScript to update the user interface.
In a SPA, the browser initially loads one HTML document. As users navigate through the site, they actually stay on the same page. JavaScript destroys and creates a new user interface as the user interacts with the application. It may feel as though you are jumping from page to page, but you are actually still on the same HTML page and JavaScript is doing the heavy lifting.
So what is the Shadow DOM?
Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree.
What is the problem that React solves?
Managing DOM changes with JavaScript efficiently can become very complicated and time-consuming. From a coding perspective, it is easier to clear all the children of a particular element and reconstruct them than it would be to leave those child elements in place and attempt to efficiently update them. The problem is that we may not have the time or the advanced knowledge of JavaScript to work efficiently with the DOM API every time we build a new application. The solution is React.
React is a library that is designed to update the browser DOM for us.
Virtual DOM
We no longer have to be concerned with the complexities associated with building performant SPAs because React can do that for us. With React, we do not interact with the DOM API directly. Instead, we interact with a virtual DOM, or set of instructions that React will use to construct the UI and interact with the browser.5
The virtual DOM is made up of React elements, which conceptually seem similar to HTML elements, but are actually JavaScript objects. It is much faster to work directly with JavaScript objects than it is to work with the DOM API. We make changes to a JavaScript object, the virtual DOM, and React renders those changes for us using the DOM API as efficiently as possible.
Unique ways of styling
React offers a number of different ways of styling components. These ways of styling can fit several scenarios, since using a specific styling for a specific use case, or by personal preference or because of architectural goals of your team or project.
The ways you can do styling in react are the following:
inline CSS
normal CSS
CSS in JS libraries
CSS Modules
Sass & SCSS
Functional JavaScript vs Object-oriented programming
What is Functional Programming? Variables, in functional programming, are invariant. They’re immutable. Immutability is one of the most important principles of functional programming. Once you’ve defined a variable, you can’t change it. So variables end up being defined as const or final. In the long run, functional programming is more about a specific kind of discipline than about language features. Programming languages can enforce certain rules, but in just about any modern language it’s possible to follow those rules without language support. Another important principle of functional programming is that functions are “first class entities.” That is, there are minimal restrictions about where you can use a function. There is also have functions without names, often called “lambdas”.
What is Object-Oriented Programming? For context here, JavaScript is not a class-based object-oriented language. The most popular model of OOP is class-based. JavaScript is a prototype based language. A prototype-based language has the notion of a prototypical object, an object used as a template from which to get the initial properties for a new object. JavaScript leverages its prototype nature to welcome OOP developers to its ecosystem. It also provides easy ways to creating prototypes and organise related data.
React opts by Functional Programming while some other frontend frameworks opt by OOP.
In React, pure functions ( a pure function is a function that has the following properties: The function return values are identical for identical arguments (no variation with local static variables, non-local variables, mutable reference arguments or input streams) are used often and they provide a clear mapping between the input props and the rendered output. Functional code is usually less coupled and easier to reuse and test. Before the introduction of hooks, functional components could not be stateful and did not have an alternative to the lifecycle methods. React you can define components using functions and classes. Class components allow you to write your code using ES classes and structure the component logic into methods. They also allow you to use React’s traditional lifecycle methods to run custom logic when a component is mounted, updated, unmounted, and so on. Even though this notation is easier to understand for people familiar with OOP programming, you need to be aware of all the subtle nuances that JS has — for example, how this works, and not forgetting to bind event handlers. There’s a trend among React developers to ditch class components in favor of simpler functional components, but with hooks being a newer feature, you’ll usually see a mix of both approaches in larger React projects.
Why should you use functional components?
There are some benefits you get by using functional components in React.
Functional components are easier to read and its testable(because these are plain JavaScript functions).
It’s easy to separate container and presentational components.
Can easily use best practices.
Can help to increase application performance.
Component Based
You can build encapsulated components that manage their own state, with this you can compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
Scaling and Reusability
The scaling can be obtained through some of the React traits that can be very helpful, when it comes to scaling our apps.
Because React is component-based and allows for component to be small and focused components, they become easy to test and reuse.
Components can have flexible render methods and be able to render in different shapes. This increases re-usability of components.
You can generalise your components for all the entities in the system. In most apps we perform similar actions for different entities in the system. Therefore, it makes sense to create one reusable component to tackle this.
Generic Redux, using Redux combined with react-redux connect function we can write a higher order component (HOC) to generalise how we connect to redux for actions to read any entity in the system State business logic separate from UI in a component.
Drawbacks of React
React is important in web development history because it introduced declarative and reactive templates, a different way of thinking.
There was a problem with rendering engines and reactivity and React solved it pretty well.
But no technology has zero drawbacks, so you can find them in the list below:
Fast but existing Learning Curve ( JSX syntax )
Thinking in React can be a big shift in mindset (example: react enforces a top-down hierarchy of data-flow)
JavaScript Fatigue (There are many JS Tools to choose from)
High pace of development (Thought always with backwards compatibility)
React’s Future
React is still a relatively new technology. It has reached a place where it’s core functionality is fairly stable, but web frameworks and libraries are somewhat unpredictable so even that can change.
React 18, is the next major version. React 18 will include out-of-the-box improvements (like automatic batching), new APIs (like startTransition), and a new streaming server renderer with built-in support for React.lazy.
It will add an opt-in mechanism called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind the scenes, but it unlocks new possibilities to improve both the real and perceived performance of your app.
Since concurrency in React 18 is opt-in, there are no significant out-of-the-box breaking changes to component behavior. You can upgrade to React 18 with minimal or no changes to your application code, with a minimal level of effort compared to a typical major React release.
“We successfully shipped concurrent features to tens of thousands of components at Facebook, and in our experience, we’ve found that most React components “just work” without additional changes. We’re committed to making sure this is a smooth upgrade for the entire community, so today we’re announcing the React 18 Working Group.” (Source: Official React Blog — The Plan for React 18)
React was first released in 2013 and is maintained by Facebook and the community.According to an estimate, approximately 8 thousand companies worldwide are using React.js for implementing web resources and mobile apps. Some examples are companies like Uber, Airbnb, Facebook, Pinterest, Netflix, Instagram, Amazon and Twitter.
In what concerns to versions stability along time and breaking changes, React has a reassuring policy from a developer perspective, regarding those topics: React Versioning Policy.
Dependencies and libraries
In JavaScript or Typescript projects you will have to install the dependencies, which will generate a very famous folder called “node_modules”. The same happens of course, to javascript frameworks/libraries like React.
This is a folder that can easily reach hundreds of megabytes in size, hence the joke on the image below.
For example:
This folder is where all the packages are stored which makes them available to use through your application wherever you need it, by for example using a require(“packagename”) to load its main module, or require(“packagename/lib/path/to/sub/module”) to load other modules.
In JavaScript projects, there is a file called “package.json” where the dependencies are declared for that project and you can easily see what libraries are being used here.
In the create-react-app project, which you can check here, you can clearly see as well what are the dependencies, at the package.json file.
If you create a brand new create-react-app project, you will see it comes with 163MB of node_modules at the time of this writing (June 2021).
The first picture below, on the left, shows the size of the folder node_modules, 162MB. The second picture shows the total size of the app, 163MB.
As you can see the bulk size of this project is pretty much the size of it’s node_modules folder.
The create-react-app is just an example! This is quick and easy way to get started with react. But you can build your dependencies and libraries as you go, as you need it.
You will have to setup babel(or another transpiling too) and webpack( or another module bundler tool) yourself. But once you do, the app will be much smaller in size.
Let’s put it to the test and a a minimal react app. We can get a size as small as 67MB. As seen in the picture below.
There are many react libraries developed by the open source community, if one desires to.
Development Tools
There are many tools that work with web frameworks including with react and there are also dedicated tools to work with react only concerning, testing, UI, performance, boilerplate templates and performance tools.
Some of these tools were even developed at facebook and/or established developers.
Tools that work well with javascript/typescript and the respective web frameworks tend to work just fine with react as well, a good example of this is the testing frameworks.
In conclusion, there is no short of tools when working with ReactJS.
VS Code (There are extensions to work with React)
Reactide (Dedicated IDE for React)
WebStorm ( Intelligent code completion, on-the-fly error detection, powerful navigation and refactoring for JavaScript, TypeScript)
Visual Studio (Microsoft most complete IDE)
Atom (Only for MacOS)
Nuclide (Developed by Facebook to work on top of Atom)
Create React App (Modern build setup with no configuration)
Next.js (A React Framework)
Vite (Build tool)
React.js Boilerplate (Quick setup for new performance oriented, offline–first React.js apps)
React Starter Kit (Isomorphic web app boilerplate)
React State Management:
Redux ( Predictable State Container for JS Apps)
Context (Share data for a tree of React components)
MobX (Simple, scalable and battle tested state management solution)
Performance Tools:
Rollup (Module bundler for JavaScript)
Webpack (Webpack v4+ will minify your code by default in production mode)
React DevTools Profiler(This plugin uses React’s experimental Profiler API to collect timing information about each component that’s rendered in order to identify performance bottlenecks in React applications)
React-window and react-virtualized are popular windowing libraries.
UI Tools:
Material-UI (React components for faster and easier web development)
React-Bootstrap (React components for faster and easier web development)
Ant Design (React UI library)
Semantic UI (Semantic UI React is the official React integration for Semantic UI .)
React Icons (Popular icons for React projects)
Testing Tools:
React Testing Library (Light-weight solution for testing React components)
Enzyme (JavaScript Testing utility for React that makes it easier to test your React Components’ output)
Jest (JavaScript testing framework)
Mocha (Feature-rich JavaScript test framework)
Chai ( BDD / TDD assertion library for node and the browser)
Karma (Productive testing environment to developer)
Jasmine (Behavior-driven development framework for testing)
Cypress IO (Front end testing tool built for the modern web, e2e, integration, unit tests)
Puppeteer (Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol)
Browser Extensions
React Developer Tools (Offered by: Facebook)
Redux DevTools (Offered by: Redux DevTools)
React-Sight ( Offered by: William He, Grant Kang, David Sally)
React -detector (Offered by: Cymen Vig)
Show-me-the-react (Offered by: Kent C. Dodds)
Source: Performance Tools, Context
These are just some of the tools available but there are much more in the market.
Technology maintenance
“React has a community of millions of developers.”
React development is led by a small dedicated team working full time at Facebook but it also receives contributions from people all over the world.
Facebook’s React team has established a Code of Conduct and adopted a Contributor’s Convenant.
These must be abided by all the community members.
React’s communities
Stack Overflow (popular forum to ask code-level questions or if you’re stuck with a specific error)
ReactJS Questions
DEV’s React community
Hashnode’s React community
Reactiflux online chat
Reddit’s React community
Spectrum’s React community
All of these forums are a great place for discussion about best practices and application architecture as well as the future of React.
Each community consists of many thousands of React users.
Facebook’s React team publishes the official new updates on their blog and twitter account:
React’s Official Twitter
React’s Official Blog
This blog has started in June 2013 and has been updated until today (8years in 2021).
We can observe that the update frequency is high, with a few updates every month, until 2018. And a few updates an year, now in the most recent years, after 2018.
The React team members work on:
Core component API
Engine that powers React DOM and React Native
React DevTools
React documentation website.
React Current Team (2021) :
Andrew Clark
Brian Vaughn
Dan Abramov
Luna Ruan
Rachel Nabors
Rick Hanlon
Sebastian Markbåge
Seth Webster
React was originally created by Jordan Walke.
There is also a number of significant contributors listed in here.
A complete release history for React is available on GitHub.
React follows semantic versioning (semver) principles.
You can also check the releases on the React Blog.
Keeping Up with the Changes
To keep up with the releases the official source of react is the React Blog.
There are also a variety of popular React conferences that you can attend for the latest React information. If you can’t attend these in person, React conferences often release the talks on YouTube following the events. These include:
React Conf
Facebook-sponsored conference in the Bay Area
React Rally
Community conference in Salt Lake City
Community conference in Bratislava, Slovakia
React Amsterdam
Community conference in Amsterdam
Breaking Changes
React versioning follows the format: x.y.z. An example is 15.6.2.
When releasing breaking changes, we make a major release by changing the x number (ex: 15.6.2 to 16.0.0).
“React 15 was released in April 2016 and React 16 was released in September 2017, and React 17 was released in October 2020.”
In 2021, react announced, React 18 as the next major release.
React Team has a commitment to stability
“As we change React over time, we try to minimize the effort required to take advantage of new features. When possible, we’ll keep an older API working, even if that means putting it in a separate package. For example, mixins have been discouraged for years but they’re supported to this day via create-react-class and many codebases continue to use them in stable, legacy code.”
Development warnings are issued in preparation for future breaking changes. That way, if your app has no warnings on the latest release, it will be compatible with the next major release. Development warnings won’t affect the runtime behaviour of the app
APIs starting with unstable_. These are provided as experimental features whose APIs we are not yet confident in.
Alpha and canary versions of React. React provides alpha versions as a way to test new features early
Undocumented APIs and internal data structures. These are the ones known to avoid.
Sources used: React Community Support, React Team, React Versioning
Hiring market
The market for react is pretty abundant as it is one of the most popular web frameworks as of late, surpassing many other frameworks and moving to the top of the charts when it comes to web frameworks, which will be visible in the following graphs:
Identities that conduct surveys:
StackOverflow has been doing yearly surveys since 2011. The survey for the year 2020 has nearly 65,000 responses fielded from over 180 countries and dependent territories. This survey examines all aspects of the developer experience from career satisfaction and job search to education and opinions on open source software.
The Software House
The Software House ( conducted a study that has the participation of 4500 frontend developers. Taking a look into the React popularity amongst developers, this software-house-survey clearly shows that React acceptance is very high.
State Of JS
This year’s survey reached 23,765 people in 137 countries.
By looking at the result of all these different surveys, we can clearly see that react is taking the lead, and it has been on the rise for the last decade. The engineers community is pretty much onboard with the react framework, there is no denying it.
NPM Trends
The npm trends for the donwloads of react, vue and angular, clearly show the most popular framework and the most used by the community is react.
StackOverflow Trends
StackOverflow is one of the most known and website used by developers
Alex Banks & Eve Porcello — Learning React — Functional Web Development With React and Redux — O’Reilly
Web Pages (Visited from up until July 2021)
Frontend Security Considerations

Discussion (0)