In 2021, Facebook said goodbye to Jordan Walke, an author of React — the technology lying at the heart of FB. The software engineer announced plans to run his own business. He did it via Twitter. Which, by the way, is also built upon React.
Let’s wish Jordan every success and focus on the project that long ago surpassed its creator. In a recent survey by StackOverflow, React ranks as the second most popular web building technology, after jQuery. Almost 69 percent of software engineers are willing to continue working with it. Another talking point: Over ten million people download the latest version of React from npm registry weekly.
Good luck, Jordan!
What makes React so sought-after — despite the existence of numerous alternatives? How to set up a React project? And when does it make sense to build an app with React? This article provides a glimpse into the tool trusted by Netflix, PayPal, BBC, and many other giants that need no introduction.
What is React?
Formerly known as ReactJS, React is a front-end JavaScript library developed by Facebook (namely, by Jordan Walke) for building responsive user interfaces. It’s used in web versions of FB and FB-owned products — Instagram and WhatsApp.
Since 2013, when Facebook open-sourced the library, millions of developers and thousands of tech companies have taken to it, and for a reason.
The key advantage of React-based projects lies in their capability for changing data elements — like news feeds or geolocations — without reloading the entire page. This makes apps faster and users happier.
React top users and benefits that attract them.
Other benefits appreciated by companies and developers are fast project building, versatility (having expertise in React, it’s easier to grasp its close relative, React Native, and start building apps for iOS and Android), and flexibility. Unlike JS frameworks such as Angular or Vue.js, React doesn’t dictate how to structure an app and lets you choose additional technologies at your discretion.
You can learn more about the differences between JS libraries and frameworks from our article React vs Angular Compared. Otherwise, let’s proceed with advantages and limitations of React app development.
Benefits of React that make the library stand out
Of course, React magic that's so attractive to both engineers and businesses doesn’t happen by itself. It stems from thought-out concepts and approaches that deserve explanation in greater detail.
React components: Build once, use endlessly
Value brought: fast project development
React is based on components or isolated pieces of code to be reused within an app or across multiple projects. Each component contains all the logic for displaying a small portion of UI.
Due to the high level of encapsulation, independent elements can be easily updated, plugged in, unplugged, and rearranged, leaving other modules unaffected. This approach simplifies and speeds up interface development.
A lot of ready-made elements: Don’t reinvent the wheel
Value brought: fast project development
React developers can create components by themselves or take advantage of available UI libraries with ready-made common elements: buttons, sidebars, icons, tables, and many more. The list of popular libraries includes but is not limited to
React Bootstrap, using templates and themes of Bootstrap, the world’s most popular UI component library;
Blueprint particularly suitable for desktop applications;
Semantic UI for creating responsive web pages with human-friendly HTML.
Examples of dashboards created with Material Kit React.
The use of libraries dramatically accelerates the speed of development and is especially favorable for creating admin panels, running a proof of concept, and doing projects without designers.
However, if your project requires interface customization or, for some reason, generic UI patterns don’t meet your needs, your team may build, manage, and share an internal library of reusable components with such tools as Bit or Lerna.
One-way data flow: Stick to one source of truth
Value brought: high app performance, fewer bugs, easy-to-test code
In React applications, data flows only in one direction — top to bottom, from parent to child components. Data kept in a parent component is called a state and determines what you see on the screen. The portion of the state transmitted to a child is called a prop (property). Props are read-only values.
Unidirectional flow used in React is also called “data down, actions up.” Let’s see how it works step by step.
How data flows in a one-directional scenario.
1. A parent component passes a snapshot of the initial state (a prop) to child components.
2. A child component renders the UI based on the current prop value.
3. A user reacts with an action (say, a click on the button or a name input).
4. The user’s input doesn’t directly change the view. Instead, it triggers an update of the state in the parent component.
5. The change in the state travels downward through a prop to a child component.
6. The UI is re-rendered to reflect the current state.
A common real-life example of a React component is an online store's shopping cart. User actions — such as adding or deleting items — will first change the state of a high-level component. The information on updates will flow downwards via props and eventually leads to re-rendering of some UI elements like the list of chosen items and their total price.
In large applications, high-level components have not a single child but rather a complex hierarchy of descendants nested within it. Yet, no matter the number of "relatives," the subordination is always the same: Child components can’t affect their siblings or parents. This produces a range of advantages including
a single source of truth that makes it easier to trace where data goes wrong and fix bugs;
more predictable changes; and
low to zero risk of new bugs when adding features or scaling the app.
Ultimately, you’ve got better control over your data. In complex apps, this effect can be amplified by the state container called Redux, but we’ll talk about it in a later section describing tools to be used with React.
React virtual DOM: Keep reloads to a minimum
Value brought: high app performance, interactivity
A virtual DOM was introduced to make React-based apps really fast and interactive. To understand how this know-how works, let’s first get a sense of a real or browser DOM.
Standing for a document object model, a DOM is a representation of a web page as a tree structure, generated by a browser.
The DOM representation of a web page. Source: Semantics3 Blog
JavaScript links to the DOM to manipulate the content and styles of the website. Alterations in the different parts of the tree trigger the relevant updates on the screen. This makes web pages dynamic or responsive to user actions, such as mouse button clicks or key presses.
On the dark side, even a minor tweak (say, you want to change a user’s age) entails the resource-intensive recalculation of the entire tree structure and repainting of all UI components. React addresses this problem with a virtual DOM, which is an in-memory snapshot of the real DOM.
In fact, React uses simultaneously two virtual DOMs, generated just before and after the update. The so-called diffing algorithm compares two copies against each other to spot differences. Only these differences are to be processed and updated in the real DOM — and consequently on the web page.
Recalculations of a state change with a Virtual DOM. Source: O’Reilly
While the virtual DOM scenario seems to take more effort, in reality, it reduces the computation burden and boosts app performance. The good news is that all DOM operations happen behind the scenes.
React Hooks: Split the complex logic
Value brought: enhanced code readability and testability, smaller app’s bundle size, logic reusability
To a great extent, React owes its popularity to reusable UI components. As we’ve said before, you can write a piece of UI once and then implement it again and again. But what if you are interested only in the logic (or behavior) behind the template?
Before the 2019 and 16.8 release of the library, the React team offered no way to extract the stateful logic from one component to another. Hooks were introduced as a solution to this problem. Now, when writing the code, developers can split the complex behavior into reusable pieces to be independently updated and shared across the app.
Let’s explain this idea with an example. Say, you want to embed a date picker, a calendar that lets a user choose a single date, into your app. Obviously, somebody has already created this feature, so you just find a UI library that contains what you need and provides a few props to customize the design and functionality (color, size, highlighting of a current day, etc.)
A standard date picker component with customizable props from Blueprint UI library.
Imagine that you don’t like the design of the proposed calendar at all. You wish you could change how it looks but preserve how it works. Before Hooks, React had no simple way to "separate concerns." Today, developers can write a piece of logic (behavior) and then "hook" it into any other component.
This approach allows you to avoid logic duplication, write fewer lines of code, and reduce an app’s bundle size. Components become easier to read, test, and refactor.
The component code before and after implementing Hooks. Source: KendoReact
Though Hooks don’t dramatically change a way React works, they do have their learning curve. However, it doesn’t mean you must rewrite older apps. The React team only recommends that developers try the new method when writing new components.
Short learning curve: Take advantage of JavaScript
Value brought: a wide pool of talent
React is often praised for its short learning curve. However, to master the library as quickly as it is promised, you need to be familiar with
HTML,
CSS,
JavaScript (ES6 or later versions), and
programming concepts like functions, objects, arrays, and classes.
What makes React even simpler to study is the huge community of developers who can answer any questions that arise.
Large community and ever-growing ecosystem: Find a solution to any problem
Value brought: fast issue resolution, technology support
Despite the fact that React is a small front-end library with limited functionality, it’s getting more popular year by year thanks to the enormous support from Facebook and a large number of active developers. It seems that almost any problem can be addressed with the help of the dev community and proper third-party technologies created with React in mind.
You can find answers to almost 300,000 questions related to React app development on StackOverflow or ask something about best practices or solutions to code-level problems yourself.
React repository on GitHub has over 1,500 contributors and is used by more than 6.2 million people.
You can also find other big React communities ready to help out with any issue on
Already huge, the vibrant React ecosystem is growing and changing all the time, introducing new ways of software designing. And that’s where you'll find the root of the key problems associated with React.
React drawbacks
Like with any popular technology, React receives not only praise but a lot of criticism as well. The most common complaints boil down to the following.
Too many extra technologies
‘‘I have to install 12 different packages and an external library to make React useful." (Reddit forum)
Though React per se is a lean, easy-to-learn library, you need to know and install tons of other things before starting to work with it. The only rule of thumb here is: Don’t include any new technology on top of React until a pressing need arises.
One more problem is that some technologies can be poorly supported, getting no updates. Over time, such solutions become obsolete and noncompatible with newer versions of React. It’s critical to choose products from reliable providers if you aim at developing sustainable, long-run software — rather than at experimenting with different cool tools.
Too much freedom
“React opens up lots of possibilities to drown yourself in.” (Reddit forum)
React still doesn't provide a clear, unified roadmap for creating web apps. This gives you lots of freedom — but at a price.
Due to a range of options and no strict instructions on how to arrange things, the success of your project will heavily rely on the experience of your developers in JavaScript, their ability to learn fast and grasp new concepts. For large-scale projects, it makes sense to hire a software architect to take care of the app structure, so you won’t end up with spaghetti code and poor UI.
Overly verbose code
“My main issue is with verbosity and general readability. Especially if the code is written by developers that are just starting to learn React." (Reddit forum)
This problem logically results from the previous one. With so many technologies and approaches available, and no rules dictated, the resulting code can be hard to understand for newcomers. So, it can take extra time to onboard new developers for a large React project.
However, this issue can be solved by introducing comments, strict code styles and structure from the start. This, again, depends on the experience of your team.
How to start with React
The best place to get acquainted with React is its official website.
Getting Started page gives you a quick overview of how to install React, learn it, and launch your first React project. It also links to main concepts, FAQs, version documentation, verified courses, and other important information.
To sample the technology, go to the Hello World page, which is the first chapter of the step-by-step guide about React building blocks and concepts.
Tutorial: Intro to React is another, more practical option for getting acquainted with the library. Here, you will learn by doing — through building an interactive tic-tac-toe game.
The next logical step is to try how React works with an existing website. For this, no additional tools are required — a few lines of code are enough to bring a bit of interactivity to an HTML page. The Add React to a Website manual will give you more detailed information.
However, React alone is not sufficient to build a fully-fledged app The library doesn’t work out of the box. So, first of all, you need to set up a proper development environment.
Setting up a React environment
You can either create the environment from scratch or use a solution with a pre-configured toolchain.
In any case, the first thing you have to do is to download Node.js 10.16.0 or later version for loading React assets in the browser and running building tools.
If you want to build an environment from scratch, you have to manually set up and configure the following third-party tools:
a package manager — npm (comes pre-bundled with Node.js) or Yarn — to download and install React and React DOM packages along with component and other third-party libraries;
a module bundler — Parcel, Webpack or Browserify — to merge code into a single bundle (file); and
a compiler — Babel — to convert new ES6 features and JSX (a syntax sugar used in React) into regular JavaScript so that all browsers can understand your code.
Many developers prefer to skip a large part of tedious preparations, taking advantage of the pre-configured environments. Here are several ready-to-use toolchains, recommended by the React team.
Create React App provides a convenient CLI tool with Webpack, Babel, and ESLint (a popular tool to find and fix problems in JavaScript code) under the hood. It’s advisable to opt for this solution to learn React and build single-page apps (SPAs.)
Next.js is a lightweight framework for developing single page apps and deploying them to production. It adds server-side rendering to React projects which typically load their content on the client side. This allows you to speed up page load times and improve ranking in Google search results — if compared with client-site rendering.
Gatsby is another React-based toolchain, officially recognized as the best way to create static websites.
Essential tools to be paired with React
Besides the basic environment, React requires engaging third-party libraries and tools to address various tasks arising in the course of development . Luckily, there is a large ecosystem of React-compatible technologies, which is growing every year. Developers are free to mix and match them, depending on the project need.
However, such a wide range of options can be a challenge for newbies. So, before going any further, let’s consider solutions traditionally teamed up with React.
JSX or JavaScript XML is a syntax extension to JS that looks like regular HTML. Though pairing React with JSX is not mandatory, most developers stick to this practice as it simplifies the creation of UI elements inside JavaScript, making them more visual and declarative.
Redux is the most famous state management library used with React. It preserves state data in a store, enabling any component to access it — no matter its place in the parent-child hierarchy. Basically, Redux helps developers trace updates, answering the questions: “When did a certain part of the state change, and what caused these changes?” As a result, Redux simplifies testing and keeps code more maintainable.
Redux is compatible with any JavaScript library or framework. Though it’s a common practice to couple the tool with React, not any app actually needs it. As Dan Abramov, one of the Redux’s authors says, 'Don’t use Redux until you have problems with vanilla React.'
Flow is a type checker that supports React by default and understands JSX syntax. It spots type errors in the code as you write it.
TypeScript is another option for finding and fixing bugs at build time. Serving as a primary language for Angular, it can be also used with other JS technologies including React. Read our article on the pros and cons of TypeScript that explains why you should consider it for large projects.
Where to use it: React examples
Intended to create interactive single-page apps, React has a variety of use cases. The most popular applications of the library are
social networks — besides Facebook and Instagram, Twitter, built as a progressive web app, relies on React, with Node.js and Express on the backend;
Generally speaking, use cases for React are almost endless. So, it’s easier to say when not to consider the library. It is evidently a bad fit for simple landing pages with static elements. Another big reason not to use React is lack of experience in JavaScript and poor knowledge of design patterns among your engineers. Yet, this applies to almost any JS technology.
