React.js Posts

The Toptal Engineering Blog is a hub for in-depth development tutorials and new technology announcements created by professional software engineers in the Toptal network.
Kamil Jakubczak
React Tutorial: Components, Hooks, and Performance

In recent years, React has established itself as the most popular library in the JavaScript universe. However, rather than rest on its laurels, the React team is still working hard to make it better.

In the second part of our React tutorial series, Toptal JavaScript Developer Kamil Jakubczak takes a closer look at some of its features, including hooks, the latest addition to React.

Continue reading →
Boris Yordanov
Working with the React Context API

The React Context API was been around as an experimental feature for a while now but finally became safe to use in production last year, solving one major problem React problem — prop drilling.

In this article, Toptal Freelance Javascript Developer Boris Yordanov will introduce us to the API and illustrate it with two basic web store apps, one built with the Context API and one without it.

Continue reading →
Kamil Jakubczak
React Tutorial: How to Get Started and How it Compares

In recent years, React went from being an also-ran in the JavaScript universe to the most popular JS library. However, how does React stack up against Angular and VueJS in 2019?

In the first part of our React tutorial series, Toptal JavaScript Developer Kamil Jakubczak outlines the reasons behind React’s popularity and explains how to get started on your first React app.

Continue reading →
Luke Tomlin
Unearthing ClojureScript for Front-end Development

ClojureScript and its multiparadigm approach (with an emphasis on functional programming) may sound esoteric to some front-end developers. But it’s amazing to work with, and getting started with it is far simpler than one might imagine. In this tutorial, Toptal Freelance Clojure Developer Luke Tomlin shows off some key features, getting straight into a React demo using Reagent and the Hiccup syntax.

Continue reading →
Alexander Zinchuk
Cordova Frameworks: Ionic vs. Framework7

Hybrid mobile apps may have their limitations, but often it’s well worth the boost in cross-platform consistency and development speed. Apps made with Apache Cordova in particular can further leverage existing web developer skills through the use of Cordova frameworks. This tutorial compares Ionic with Framework7.

Continue reading →
Johannes Stein
A Cold Dive into React Native (Tutorial for Beginners)

The development of cross-platform mobile applications has always been a source of many challenges. Although tools like Apache Cordova and Haxe do solve some of the associated issues, they are still not the ideal solution in many cases. React Native changes that by providing the power of React.js for mobile platforms and a promise of consistent developer experience across multiple platforms.

Continue reading →
Alonso Ayala Ortega
Test-driven React.js Development: React.js Unit Testing with Enzyme and Jest

Any piece of code that has no tests is said to be legacy code according to Michael Feathers. Therefore, one of the best ways to avoid creating legacy code is using test-driven development (TDD).

While there are many tools available to create unit tests in JavaScript and, in this post, we will use Jest and Enzyme to create a React.js component with basic functionality using TDD.

Continue reading →
William Wang
Efficient React Components: A Guide to Optimizing React Performance

Why does a React web app run slow? The answer often lies in when and how frequently your components re-render, and whether those re-renders were even necessary. React doesn’t promise magical performance gains, but it provides just the right tools and functionalities to make it easy.

In this article, Toptal Freelance Software Engineer William Wang walks us through some optimization techniques that can help you build performant React web apps.

Continue reading →
Ivan Rogic
React, Redux and Immutable.js: Ingredients for Efficient Web Applications

Unlike most front-end web frameworks, React’s aim is to solve the various challenges of building user interfaces that rely on changing data. Although React is a simple JavaScript library and is easy to get started with, it is still possible to misuse it in ways that deny the web app from reaping the benefits that React has to offer.

In this article, Toptal engineer Ivan Rogic demonstrates the synergy of React, Redux and Immutable.js, and shows how these libraries together can solve many performance issues that are often encountered in large web applications.

Continue reading →
Tomas Holas
Navigating the React.JS Ecosystem

In this article, I’ll go through some of the interesting features and libraries that are available to use with React. Even if you don’t plan on using React, taking a look at its ecosystem is inspiring. You may want to simplify your build system using the powerful, yet comparatively easy to configure, module bundler Webpack, or start writing ECMAScript 6 and even ECMAScript 7 today with the Babel compiler. So, let’s explore the React ecosystem!

Continue reading →
Leonardo Andrés Garcia Crespo
React.js View State Management Tutorial

One of the biggest and most common problems in front-end web development is state management. A developer is constantly focused on keeping the state object in sync with its view and the DOM representation. Users can interact with the application in many ways and it’s a big task to provide a clean transition from one view state to another.

We will see how using React JavaScript library can help us reduce application complexity and offload UI transitions from our application.

Continue reading →
Alex Rattray
Simple Data Flow in React Apps Using Flux and Backbone: A Tutorial with Examples

React.js is a fantastic library. It is only one part of a front-end application stack, however. It doesn’t have much to offer when it comes to managing data and state. Facebook, the makers of React, have offered some guidance there in the form of Flux. I’ll introduce basic Flux control flow, discuss what’s missing for Stores, and how to use Backbone Models and Collections to fill the gap in a “Flux-compliant” way.

Continue reading →