React Web Development
Subscribe to this collection and be first to get notified when new content arrives.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Subscribe to this collection and be first to get notified when new content arrives.
A complete and practical guide to React web development for CTOs and tech executives.
ARTICLES IN THIS COLLECTION
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).
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.
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.
Let’s gather up 6 reasons why development teams choose React for frontend development:
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.
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.
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.
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:
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.
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.
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.
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 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:
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:
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.
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.
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.
These libraries will help you expand your React app:
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.
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.
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.
