7 Facts to Know About React Development

Summary: This article tries to explain some of the most common misconceptions about React and shows its growing popularity not only among developers but also among businesses.

React’s market share has been growing ever since Facebook first released his JavaScript library for building user interfaces in 2013. But there’s still a lot of confusion surrounding React development. Below are a lists seven facts I feel you need to know about React before you use it to develop your next app and why it may be important and how it might benefit your organization in the long run.

1. React is both a library and a framework

A library is essentially a set of functions that you can call, while a framework embodies some abstract design that dictates how to accomplish a certain task while taking control from the developer, forcing him or her to follow certain design decisions or patterns. That’s why the term “inversion of control” is often used to describe what happens to code when using a framework. Simply put, the framework does the heavy lifting while the developer fills in the provided skeleton.

While React’s website clearly states that React is a JavaScript library, which it certainly is, evidence suggests that it’s also a framework. When an instance of a component is being created and inserted into the DOM, multiple methods are called, inverting control to React. Even React’s documentation says that React is “the premier way to build big, fast Web apps with JavaScript,” which doesn’t make React sound like a library at all.

On the other hand, React gives developers the freedom to specify what changes go into the DOM by bypassing the virtual DOM, an essential concept to which React owns much of its performance.

2. Virtual DOM

React keeps a virtual representation of HTML in memory (virtual DOM). When a state changes, it simply reacts to the change and automatically updates the real DOM as needed in a process called reconciliation, which is how React got its name. Because React always figures out the minimal amount of changes necessary to sync up with the DOM, each reconciliation is fast and efficient.

Virtual DOM is what makes React declarative, allowing developers to declare what state they want the UI to be in and let React make sure the DOM matches that state, abstracting out attribute manipulation, event handling, and manual DOM updating.

3. Reusability

User interfaces in React are described in terms of components. “Components let you split the UI into independent, reusable pieces, and think about each piece in isolation,” explains React’s official website. “Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called ‘props’) and return React elements describing what should appear on the screen.”

The reusable nature of React components meets the need of modern businesses to complete complex projects both within budget and on time. Instead of writing everything from scratch, developers can reuse the same components over and over again to accomplish more in less time and ensure flawless performance without wasting too much time on optimization.

4. SEO Friendly

Businesses can’t expect customers and business partners to come knocking on their doors without being visible in search engines. Indeed, search engine optimization has never been more important, and React was designed with SEO in mind, using Node for server-side rendering.

Server-side rendering with Node provides a simple way how to build all the HTML for a page on the server, instead of waiting for visitors to build them in the browser. This ensures that search engine crawlers won’t have trouble indexing your content, especially when loading external data. As a nice bonus, server-side rendering can improve performance, which is another important ranking factor.

React apps can also be isomorphic and automatically detect if the JavaScript is disabled on the client-side. When isomorphic React apps detect that JavaScript is disabled on the client, they render content on the server-side and send the result to the client. This provides compatibility with older browsers and different crawlers while delivering a smoother user experience.

5. Strong Community

Commits to React’s GitHub repository.

React isn’t the only JavaScript library/framework backed by a large company (Angular is backed by Google) but it has, by far, the most contributors. Its GitHub repository has over 135,000 stars, and it’s watched by 6,600 GitHub members. Every week, React is downloaded nearly 6 million times, proving that it’s much more than a fad.

In fact, React is so popular that major web browsers closely follow React updates and instantly optimize their JavaScript engines when new React features are introduced. “Some of these collaborations are currently driven by Chrome, but we’ve worked with Mozilla, Apple, and Microsoft too on the topics where they were interested in our input,” said Dan Abramov, a member of the React core team.

React developers readily share their insights and experience on various community websites and discussion forums, which include DEV’s React community, Hashnode’s React community, Reactiflux online chat, Reddit’s React community, and Spectrum’s React community. Beginners have a vast amount of resources to learn from, and React’s own documentation is comprehensive and easily digestible.

6. Accessibility

React apps tend to get a lot of bad rap for being inaccessible, but it’s not fair to blame React itself because there’s nothing stopping React developers from making their apps accessible. In fact, the React ecosystem provides excellent accessibility tooling for designing apps that can be used by everyone and on any device.

Being a dynamic and loosely-typed language, JavaScript is especially prone to formatting and syntax errors, which is why most experienced React developers swear by eslint-plugin-jsx-a11y, an open-source abstract syntax tree checker for accessibility rules on JSX elements that watches for and reports any potential accessibility issues.

With eslint-plugin-jsx-a11y, it’s possible to prevent many errors from reaching the codebase, but React developers can do even better than that by taking advantage of the React-axe library for automated accessibility testing. React-axe testing results show in the Chrome DevTools console, allowing developers to get real-time feedback on issues related to accessibility.

As I previously showed, component-driven development is a key characteristic of React, and React developers can use open-source tools like Storybook to build UI components in isolation and develop hard-to-reach states and edge cases without getting tripped up over business logic and plumbing.

7. Great Business Decision

Search interest in React, Angular, Backbone, Knockout, and Ember over time.

Unlike other JavaScript libraries and frameworks, such as Angular, Vue, Backbone, Knockout, and Ember; React grew out of solving business problems. Being an agile business whose products are used by over a billion users around the world, development speed, performance, and stability are of utmost importance to Facebook.

With React, businesses can create reusable components to easily develop and maintain applications and achieve a consistent look and feel across the whole project. Excellent app performance isn’t something businesses have to spend extra money on to obtain because React is performant by default, using several clever techniques to minimize the number of costly DOM operations required to update the UI.

React is also a safe bet for businesses that don’t want to switch technologies every other year or so. Even in the face of rising competition, React has remained stable, and the list of high-profile brands that rely on it in production now includes names such as Asana, Airbnb, BBC, Cloudflare, Dropbox, Feedly, Instagram, Netflix, Reddit, Salesforce, Twitter, Uber, Wired, Wix, WordPress, and Zendesk.

Takeaway

There are many other JavaScript libraries that provide similar “learn once, write anywhere” approaches, but none of them has a community of millions of developers and the backing of the largest social network in the world, Facebook. This, together with React’s accessibility, strong community, SEO-friendliness, reusability, and performance makes it a great choice for all businesses wanting to build modern apps users will actually want to use.