React App Development: UI, Styling, State Management, Testing

In the previous article, we talked about the main steps of starting React development. But what’s next? How to grow your application? Do you need some additional technologies and frameworks?

For sure, you will definitely want to expand your project, adding functionality and integrations. Here comes the question of what programming tools to use.

As a React JS development company, we use the most up-to-date UI frameworks, CSS styles, and state management libraries to build maintainable, sustainable, and scalable React applications. And in this article, we will share the list of these tools.

UI framework

Many developers say that the usage of UI frameworks is important. They state that it accelerates and simplifies the development process. Generally speaking, it is true. However, lots of programmers miss the primary goal of the framework's existence.

Actually, there is a good reason for using frameworks. They solve the problem of synchronizing the UI and the internal app state. So, the key to a high-quality UI lies in building the best possible graphical solution.

You may find interesting: 16 Leading UI/UX Design Trends to Dominate in 2022

Now, let’s take a look at the most popular UI frameworks that we use at Codica.

Antd

Ant Design is an open-source design system for web applications. It provides a set of high-quality out-of-the-box React components. This tool is written in TypeScript with predictable static types. Here is the list of features from the official documentation:

• Whole package of design resources and development tools;
• Internationalization support for dozens of languages;
• Powerful theme customization in every detail.

Also, Ant Design supports modern browsers and IE 9+. Here is a comprehensive tutorial on how to use Ant Design with Create-react-app.

Considering the popularity, Antd is one of the most used UI frameworks with 57.8K Github Stars and 20.9K forks (at the moment of writing).

Such big names as Alibaba, Tencent, Baidu, and Koubei actively use the design system in their products.

Material UI

Material UI is another popular ReactJS UI framework with 55.6K GitHub Stars and 15K GitHub Forks.

To be exact, it is a design language first introduced by Google in 2014. It offers grid-based layouts, flexible animation, add-ons, and depth effects. Here are the main features provided out-of-the-box:

• Blazing fast performance;
• Extensibility via a plugin API;
• Usage of CSS-in-JS in its core which works at runtime and server-side;
• Less than 15 KB in a gzip file format and no bundle size increase.

The goal of Material Design comes down to three things: Creation, Unification, and Customization.

Semantic UI React

Semantic UI React is an official React JS integration for Semantic UI. Actually, it offers almost the same features as the official tool does. However, there are still some additional ones: a Declarative API, Augmentation, and Auto Controlled State. Most importantly, this framework is jQuery-free.

If you check its GitHub repo, you can see 11K stars and 3.1K forks.

Such large companies as Snapchat, Reviewable, SunSed, and daocloud.io use this framework in their products.

Comparison of Ant Design, Material-UI and Semantic UI React

Let’s compare the mentioned UI frameworks by popularity and usage among developers. Take a look at the comparison table that shows the number of package downloads for the past 6 months.

Source: npm trends

In conclusion, all the mentioned tools perfectly work with React JS and offer a wide range of features. This way, you get fast integration with your project and lots of ready components for building an efficient user interface.

Styling in React development

Nowadays, solid ReactJS applications use a complex toolchain to write CSS code. One of the biggest benefits you can bring to your team is knowing how to style your ReactJS app correctly. A web product needs to have a unique, intuitive, and visually appealing interface as it is an important part of every UX experience.

There are different approaches to app stylization, but we want to highlight the main two options we use in practice:

• Modular Stylesheets (CSS/SCSS Modules);
• CSS-in-JS (styled-components, glamorous, emotion, etc).

Let’s discuss each CSS tool in detail.

Modular stylesheets

The similarly-named GitHub repository says: “A CSS Module is a CSS file in which all class names and animation names are scoped locally by default”.

CSS modules are not an official specification, they are not implemented in browsers. Rather, it is a task launched at the project bundle stage (for example, using a Webpack or Browserify). During this process, the class names and selectors are changed so that a kind of local scope emerges (something like a namespace).

This approach was developed to solve the problem of global scope in CSS. The modules ensure that all styles of one component are in one place and are applied only to that block.

CSS-in-JS

JSS (CSS-in-JS) is an authoring tool for CSS. It allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node. The tool consists of numerous packages: the core, plugins, framework integrations, and others.

Let’s take a look at the benefits and drawbacks of CSS-in-JS in the following table:

To conclude, both modular stylesheets and CSS-in-JS are powerful tools. They help you styling a React.js application. They provide numerous features that simplify and accelerate the development process.

Related reading: The Power of CSS Processors in Web Applications Development

State management

State management in React application development has been a subject of discussion for many years. Consequently, the tool to operate with the React.js app state management is a hot topic as well. The reason for such importance is evident. If you want to create or extend your ReactJS application, you need to manage the state of the app. Moreover, it should be scalable and maintainable for future improvements.

Now we want to cover such popular tools as Redux and MobX. We will share our vision on the pros and cons, functionality differences and when it is better to use one or the other. Let’s begin with Redux.

Redux

Redux is a tool for managing both data and interface state in JavaScript applications. It is inspired by Flux and Elm principles. Simply put, the library offers to consider your app as an initial state. It can be modified by a sequence of actions. We consider it to be a really good approach for complex web products. Generally, it provides lots of possibilities.

Redux is a perfect choice for single-page applications (SPA) where state management can become difficult over time. The tool is not related to any specific framework. Although developed for React, it can also be used with Angular or jQuery.

Related reading: Main JavaScript Development Trends

Redux has three main principles that are worth considering before you start work with state management:

• Single source of truth

Redux uses only one store for the entire application state. Since the state is stored in one place, it is called the only source of truth. The data structure of the storage is completely up to you, but for a real application, it is usually an object with several nesting levels. This single-store approach is the main difference between Redux and Flux with its multiple stores.

• State is read-only

According to the Redux documentation, “The only way to change the state is to emit an action, an object describing what happened”.

Shortly, it means that an application cannot directly change the state. Instead, pass an “action” to express the intention of changing the state in the store.

• Changes are made with pure functions

Reducers are functions that process actions and can make changes in the state. In fact, these are pure JavaScript functions that do not have side effects and their return is determined only by input values.

MobX

MobX is a library that allows managing the application state. It becomes scalable and simple with the help of TFRP. It was created by Michel Weststrate and initially released in 2015. It is mainly written in JavaScript and helps make the state consistent.

MobX generally consists of:

• State

Arrays, references, and objects are considered as the application data cells in a state.

• Derivations

Derivations are the value that can be processed by the application state automatically.

• Reactions

Reactions mainly take care of input-output operations and DOM updating. Network requests need to be handled on time automatically.

• Actions

Actions modify the state and MobX makes sure that all the changes are processed synchronically.

The library supports any modern JS environment: Node.js, React Native, Rhino and all the browsers (except for IE 8 and earlier versions). The only thing you should remember is that MobX is not a framework. It does not know how to structure your code, how to process and store the data.

To summarize, let’s compare Redux and MobX within different development aspects.

Testing

Generally, testing is one of the quality control techniques. It includes planning, test creation and running, and analysis of the received results. It is a process of validating the functionality created within the defined requirements. It becomes possible by testing a product within artificially created situations.

It’s worth noting that QA software testing services includes numerous additional activities:

• Analysis and planning;
• Development of test scenarios;
• Assessment of tests completing criteria;
• Writing reports;
• Documentation and code review;
• Static analysis.

In this chapter, we’ll cover some of the most common and effective ways to test React.js code using Jest and Cypress.

Test pyramid

When it comes to choosing a technique of testing React JS applications, you should take a look at the Agile testing pyramid. It helps you understand when to use a certain method.

Source: Hackernoon

The pyramid shows that many unit-snapshot tests can be used to validate one integration test. This way, many integration tests can be used to validate one manual test. At the peak of the pyramid, we have an end-to-end test: manual testing of the whole application.

Let’s now briefly discuss the pros and cons of each pyramid element.

• Manual testing

The main goal of this technique is to pre-verify that the defined functionality is working. Also, manual tests define whether this functionality has errors and provides the expected results. This testing method is slow and unsustainable. Also, it is rather expensive to maintain.

• Integration testing

The purpose of this technique is to expose faults in the interaction between integrated units. It can be good to test connections between components and finding bugs in these liaisons.

• Unit/Snapshot testing

This testing method is useful when you concentrate on a certain isolated element and its logic. The unit/snapshot technique is one of the easiest approaches to test components.

So, the Agile test pyramid helps you understand when to use a certain method at each stage of developing ReactJS applications. Let’s step forward and discuss the most efficient tools for testing your React.js application.

Jest

Jest is a well-known open-source library for JavaScript code unit testing. It was created and developed in Node.js by Facebook. The tool has an impressive acceptance rate in 2020 within the JavaScript community. The library has more than 1K contributors, 30.1K GitHub Stars, and 4.2K Forks.

In general, Jest allows you to write tests with an approachable, familiar and feature-rich API that gives you results quickly. Everything you need is to come up with input parameters for your code. Then describe the output that your component should produce. The library tests your code with input parameters and checks the result against the expected one. If it matches, the test will pass.

At Codica, we started using Jest with a powerful tool called Enzyme. It provides a special testing function that makes a snapshot of your project components’ structure. When you run tests, the tool compares the new snapshots with the saved ones.

Want to read more articles about software development from experts?

Subscribe to Codica monthly newsletter.

Cypress

Cypress is an open-source tool used for automated UI and end-to-end testing of modern web applications. The platform is also popular among QA engineers and software developers around the world. It has 19K GitHub Stars and 1.1K forks.

The main task of Cypress is to check how the client part interacts with the server (end-to-end tests). Also, the tool provides integration tests of the individual page components.

One of the tool’s biggest advantages is its lightning speed. Cypress can provide you with high performance because of running inside the browser. It runs the same execution loop that your app source code does.

What are the differences between Jest and Cypress?

First, it is worth noting that Jest refers to Unit Testing and Integration Testing libraries. On the flip side, Cypress is an example of the End-to-End (e2e) testing platform. It means that you can simulate the user interaction with an app from start to end. It includes all the page clicks, navigation, and so on.

Also, Jest is more difficult and requires certain testing knowledge to use it. However, Cypress.io has such drawbacks as weak cross-browser testing, no page object, tabs switch, and iFrame support.

In a nutshell, the choice of the right testing tool depends on your code skills, project requirements, and personal preferences. You can even decide to follow a hybrid approach and use several instruments at once. For example, Cypress-Jest is an npm package that combines the features of both tools.

To discover more about the testing stage, you can view our detailed guide on custom mobile app development.

Final words

We believe our best practices will come in handy for you when you turn to React app development. We have discussed the most recent React UI development frameworks, CSS styles, and state management tools. All of them were designed to greatly simplify and accelerate the project development process of any scale and complexity.

The choice depends on the technical inquiry and your personal preferences. As a React JS development agency, we believe this information will be useful for you to choose the most relevant programming instrument for your needs.

Want to learn more about new technologies and tools and their implementation? Read more articles on our blog and subscribe to our newsletter.