React Web Development: A Practical Guide for CTOs

React Web Development

In this collection you'll learn

  • What are the business benefits from using React?
  • What products is React best for?
  • Are React apps scalable and easy to maintain?
  • How does React compare to Angular and Vue?
  • How to migrate to React?
  • How to solve React app problems?

Introduction

Since React is one of the most popular solutions for frontend development, decision-makers often wonder if its popularity equals quality and how exactly a project can benefit from React.

React’s real power lies in how it makes you write your code.

Tom Occhino, Engineering Director at Facebook

React code gives you confidence and reliability. The library doesn’t force any code patterns or tech stack solutions. But of course, it’s not a perfect fit for every project and every team. However, this article should give you an answer whether it’s perfect for yours. 

Note: To support the decision-making process, we created a complex handbook for CTOs, combining business point of view with tips and precautions from our most experienced developers.

The article below is only the beginning.

To receive notifications when new chapters are published, sign up for updates.

Let’s start with the crucial info about React (and a glimpse of what you can find in the chapters).

CHAPTER 1:

Key things to know about React web development 

React.js is a JavaScript library used for handling the view layer of web applications. It gives complete flexibility in terms of tooling and architecture. An excellent community and big players’ support make React reliable. For frontend developers, it’s easy to learn React and work with it.

React code is written in JavaScript and JSX. But what’s crucial is that the code is written declaratively. It means you describe the result, not the way to achieve it.

A primary building block in React is a component. It’s what allows developers to reuse the code, make it easier to test, scale, and maintain an application. Declarative code and components are the gold of React.

CHAPTER 2:

React security, scalability, maintenance & performance

Scalability and maintainability are one of the most important business aspects when choosing technology. Of course, React is suitable for complex applications, which was tested by the biggest players like Bloomberg, Airbnb, or Codecademy. 

Thanks to component-based architecture, developers can easily make changes and updates that won’t affect the whole application but only one module.

It’s also convenient to introduce new developers to the team. With modularity, developers can simply extract a separate module and delegate the workload to a new team member.

Also, React is really fast thanks to Virtual DOM. On the contrary to the Real DOM, it exists entirely in memory, intelligently determining what changes to make. The library is also light, which improves the performance even more.

Key take-away: Thanks to components React apps scale easily and are easy to maintain. Virtual DOM helps the app stay light and positively impacts its performance.

CHAPTER 3:

6 reasons to choose React

Let’s gather up 6 reasons why development teams choose React for frontend development:

  • it’s easy to learn, especially for frontend developers,
  • it allows to build rich, high-quality User Interfaces,
  • it increases developers’ productivity and speeds up the development,
  • it is supported by many big companies like Facebook, Uber,
  • it is popular so its community is big and active.

What apps is React best for?

SPA (Single-Page Applications) is a default in the case of React but if we use it with external libraries, it becomes perfect also for other solutions.

Large-scale applications

Since React is built with components, the library makes it easy and convenient to create large-scale apps. Composing and combining components the right way allows developers to take control even over the most difficult architecture. Also, the library is stable and has big players’ support, so it’s a safe solution.

Real-time applications

For real-time applications, we need a highly reactive UI, because the changes need to be displayed quickly. React and Redux is a perfect team for that. React works perfectly with event-oriented architecture, when events are sent over web sockets. Redux manages the elements’ state, updates the view when something changes, and allows us to describe what happened declaratively. 

CHAPTER 4:

Examples of apps built with React

It’s time for a few examples of React web development. We’re pretty sure you’re using React applications every day while scrolling through Facebook, Instagram, or watching your favorite tv series on Netflix

But there are a lot more well-known players who used it. Asana switched from Luna to React when they started to experience problems, especially with scaling.

Among companies using React you’ll also find:

  • Khan Academy,
  • Yahoo Mail,
  • Paypal,
  • Atlassian,
  • New York Times.

How does React compare to other alternatives?

Angular, React and Vue are the JavaScript frameworks/libraries that are present on the market for a while. Most often, when tech leaders need to choose a frontend framework for a new project, the battle is between those three.

CHAPTER 5:

Angular vs React

Angular and React are more similar than you think. That’s because the Angular team did an excellent job with modernizing the framework and decreasing code bundles.

What differs them, is that Angular is a big ecosystem that enforces code patterns and the usage of specific tools, while React is a library for creating UIs that support flexibility in terms of tools and code patterns.

Also, Angular has a different model of thinking, which lies closer to the backend languages. That is why it is easy for backend developers to understand it and code with it. The React learning curve is flatter for frontend developers.

CHAPTER 6:

Vue vs React

Both frameworks are modern, unopinionated, and support building applications with components. They also use Virtual DOM which improves performance.

What differs React and Vue, is that React has a great community that supports developers. React contributors already created a lot of useful solutions that speed up and ease the development. Since Vue is still fairly new, the community is small and there are not many ready-made solutions.

CHAPTER 7:

React and React Native – How are they connected?

React Native is a framework based on React.js for writing multi-platform apps for Android and iOS. 

The apps are written using JavaScript and JSX. Then, under the hood, a bridge invokes the native rendering API in Objective-C and Java. Therefore, an app renders using real mobile UI components, not webviews. Thanks to that it looks and feels like any other mobile app.

If you plan to develop a web and a mobile app, using React and React Native is a perfect solution. Much of the code can be shared between those two, and React developers will catch up with React Native quickly.

React web development with various backends

React is flexible in terms of backend stack. You can choose a technology that fits your project or, for example, location (maybe in your area are lots of Node.js developers and no Golang ones). 

Node.js seems to be the most convenient choice for backend development because your team can share some JavaScript code. It may be sufficient then to hire full-stack JavaScript developers who will take care of the frontend and backend.

React frontends can be paired with such backends as:

  • Node.js
  • Laravel
  • Ruby on Rails
  • Django
CHAPTER 8:

Migrating to React from other technologies

When a legacy app starts to become a problem, React is a solution. It’s modern, it’s constantly improved, and can be paired with any technology stack. 

The migration process is easy and thanks to components it can be performed gradually.

Therefore, even large-scale apps can be migrated to React easily. The only catch to a painless migration lies in doing it step by step, one component at a time. Careful planning and strategy make the process easier, more efficient, and prevent breaks in your app’s functioning.

The technologies companies often choose to migrate to React from include:

  • PHP
  • Python
  • Angular
CHAPTER 9:

How to deal with common React JS problems

React performance problems 

Let’s start with the fact that Virtual DOM already solves many common performance problems. However, a repeating performance issue in ReactJS is connected to a complex, long list of items. Luckily it is fairly easy to fix – by using virtualized lists.

However, before you choose React, you should know that adding it atop an existing application won’t make it faster or lighter. Quite the opposite. Your team needs to replace a part of the frontend codebase with React ‐ then you will see the expected results.

Search engine indexing problems 

Typical React apps, Single-Page Applications, work smoothly but are not SEO-friendly.

If we want our app to be indexed by Google, we need server-side rendering. The best tool for that is Next.js.

With server-side rendering, we prerender the HTML on our server. Then, the crawling bot properly indexes our site, while we maintain the speed and fast loading for our visitors.

CHAPTER 10:

Expanding React apps

The big benefit of React is that you can start small and add more tools to it when you need them.

React is painlessly extensible and doesn’t force developers to use any particular solutions. Also, the React community created many solutions that fit typical use cases such as styling, routing, or state management.

Third-party tools that fit React perfectly:

  • Redux for state management
  • Socket.io for using web sockets
  • Next.js for server-side rendering
  • Gatsby to create static websites
CHAPTER 11:

React libraries

These libraries will help you expand your React app:

  • Create React App – a command line interface to create a React project easily.
  • Material UI – a UI package.
  • Styled Components – helps to build small, reusable components responsible for the app’s look.
  • MobX – a library for state management.
  • Enzyme – a library to test React components, created by AirBnB.
  • React Virtualized – it helps to improve the efficiency of the large list and tabular data rendering.
CHAPTER 12:

Using React with Redux

Redux is a state container for JavaScript applications, plus it’s a flexible, stand-alone library. It stores the entire state of an application in one,  centralized location. The goal is to allow developers to keep the data in one place, and access it anywhere in the application.

If you’re new to React and Redux combination, here’s a quick tutorial that shows the process of creating a simple React-Redux app step by step.

CHAPTER 16:

Top React web development companies

If you experience problems with expanding your React app, migrating from the old stack, or simply seek mentorship and advice, some companies can help you.

The popularity of React can be an advantage and the opposite. On the one hand, many experienced developers know all the best practices and tricks. On the other, popularity makes it hard to find the gems in the crowd. 

While choosing a partner for your project, even though it may be challenging, look for the ones who assess your vision, pointing its pros and cons, and show the best possible direction.

Your next steps

Making tech stack decisions is a serious task. If you need to explore React more, the next chapters get into details about React features, and then its scalability, security, and maintenance (crucial points from the business point of view). 

Also, remember to subscribe to handbook updates if you liked what’s already here.

Get smarter in engineering and leadership in less than 60 seconds.

Join 300+ founders and engineering leaders, and get a weekly newsletter that takes our CEO 5-6 hours to prepare.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.