React Application Development Tools: UI, Styling, State Management, Testing

This article was originally published on Codica blog.

If you have chosen React for building a web app, you will still need additional technologies and frameworks to expand and grow your project, add functionality and integrations.

At Codica, we specialize in building maintainable, sustainable, and scalable React applications. We use the whole range of advanced instruments including UI frameworks, CSS tools, state management libraries, and testing tools.

In this post, we will take a closer look at each of these instruments.

UI framework

Many developers acknowledge the importance of UI frameworks. Coders admit their ability to speed up and simplify the process of building a web app. However, we have another solid reason to use frameworks. They solve the problem of synchronizing the UI and the internal app state.

An excellent UI requires creating the best possible graphical solution.

At Codica, we use the following popular UI frameworks:

Antd

Ant Design is an open-source design system for web apps with a set of high-quality out-of-the-box React components. According to the official documentation, the list of features is as follows:

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

Here is a comprehensive tutorial on how to use Ant Design with Create-react-app.

Alibaba, Tencent, Baidu, and other companies use this design system for their products.

Material UI

Google introduced this design language in 2014. It is equipped with grid-based layouts, flexible animation, add-ons, and depth effects. The main out-of-the-box features include:

• Blazing fast performance;
• Extensibility via a plugin API;
• Usage of CSS-in-JS in its core which works at runtime and server-side;

Material Design is aimed at three things: Creation, Unification, and Customization.

Semantic UI React

Semantic UI React is an official React JS integration for Semantic UI. Apart from features offered by the official tool, it has some additional functionality: a Declarative API, Augmentation, and Auto Controlled State.

Snapchat, Reviewable, SunSed, and others build their products with the help of Semantic UI.

Styling

Today, ReactJS developers require complex toolchain to write CSS code. By knowing how to style your ReactJS app properly, you can make a significant contribution to the project’s success.

Your application should have a unique, intuitive, and visually appealing interface to offer a seamless UX experience.

There are different approaches to app stylization. However, we want to focus on the two primary options we use in practice:

• Modular Stylesheets;
• CSS-in-JS.

Let’s discuss each CSS tool.

Modular stylesheets

Not being an official specification, CSS modules are not implemented in browsers. Rather, it is a task launched at the project bundle stage. During this process, the class names and selectors are altered so that a kind of local scope emerges (something like a namespace).

This approach is aimed at solving 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 particular block.

CSS-in-JS

JSS (CSS-in-JS) is an authoring tool for CSS. With its help, developers can use JavaScript to describe styles in a declarative, conflict-free, and reusable manner. It can compile in the browser, server-side or at build time in Node.

State management

There have been numerous discussions around state management in React application development. Similarly, the tool required for operating with the React.js app state management is a trending topic as well.

The most widespread instruments are Redux and MobX. We will discuss their pros and cons and functionality differences. Let’s start with Redux.

Redux

Redux is a tool that enables developers to manage both data and interface states in JavaScript apps. In a nutshell, the library offers to consider your app as an initial state. It can be modified by a sequence of actions. Its numerous possibilities make Redux a suitable solution for complex web products.

The library works for single-page applications (SPA) where an app’s growth can make state management more complicated.

Redux has three main principles :

1) Single source of truth
Redux uses only one store for the entire application state.

2) State is read-only
As per Redux documentation, “The only way to change the state is to emit an action, an object describing what happened”.

3) Changes are made with pure functions
Reducers are functions that process actions and make changes in the state. In fact, these are pure JavaScript functions without side effects. Their return is determined by input values only.

MobX

MobX is a library that allows managing the app state. TFRP simplifies it and makes it more scalable. Michel Weststrate created it in 2015 to help make the state consistent.

The major components of MobX are:

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

• Derivations
  Derivations are the values that the application state processes automatically.

• Reactions
  Reactions mainly are responsible for input-output operations and DOM updating. Network requests should be handled on time automatically.

• Actions
  Actions modify the state while MobX ensures that all the changes are processed synchronically.

The library supports Node.js, React Native, Rhino and all the browsers (except for IE). It is worth noting that MobX is not a framework. It knows nothing on how to structure your code, process and store the data.

Testing

Testing is performed when developers need to validate the functionality created within the defined requirements. The core parts of this process are planning, test creation and running, and analysis of the received results.

Software testing encompasses the following activities:

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

Test pyramid

When choosing a technique of testing React JS applications, take a look at the Agile testing pyramid. It helps you find the most appropriate 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 step forward and discuss the most efficient tools for testing your React.js application.

Jest

Jest is an open-source library for JavaScript code unit testing released by Facebook. The tool has over 1K contributors, 30.1K GitHub Stars, and 4.2K Forks.

Simply put, Jest gives you an opportunity to write tests with an approachable API that gives you results rapidly. Your task is to define input parameters and the output that should be produced by a component.

Simply put, Jest gives you an opportunity to write tests with an approachable API that gives you results rapidly. Your task is to define input parameters and the output that should be produced by a component.

Cypress

Cypress is an open-source tool used for automated UI and end-to-end testing of web applications. It has 19K GitHub Stars and 1.1K forks.

The main task of Cypress is to check the interaction of the client parts with the server (so-called end-to-end tests). Also, the tool offers integration tests of the individual page components.

Conclusion

We believe our best practices will be useful when you choose React app development for building complicated and scalable products.

UI frameworks, CSS tools, state management and testing libraries discussed above will make the project development process smooth and simple.

Want to know more about React app development? Read our full article: React App Development: UI, Styling, State Management, Testing.