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 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: Ant Design 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. , , and other companies use this design system for their products. Alibaba Tencent, Baidu Material UI Google introduced this in 2014. It is equipped with grid-based layouts, flexible animation, add-ons, and depth effects. The main out-of-the-box features include: design language 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 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. Semantic UI React , , , and others build their products with the help of Semantic UI. Snapchat Reviewable SunSed 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 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. JSS (CSS-in-JS) 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 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 . Its numerous possibilities make Redux a suitable solution for complex web products. Redux actions 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 for the entire application state. store 2. State is read-only As per Redux documentation, “The only way to change the state is to emit an , an object describing what happened”. action 3. Changes are made with pure functions 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. Reducers MobX is a library that allows managing the app state. simplifies it and makes it more scalable. Michel Weststrate created it in 2015 to help make the state consistent. MobX TFRP The major components of MobX are: 1. State Arrays, references, and objects are considered as the application data cells in a state. 2. Derivations Derivations are the values that the application state processes automatically. 3. Reactions Reactions mainly are responsible for input-output operations and DOM updating. Network requests should be handled on time automatically. 4. Actions Actions modify the state while MobX ensures that all the changes are processed synchronically. The library supports , , 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. Node.js React Native Rhino 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 is an open-source library for JavaScript code unit testing released by Facebook. The tool has over . Jest 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. Cypress is an open-source tool used for automated UI and end-to-end testing of web applications. It has . Cypress 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

Facebook

Google

TENCENT

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Codica

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Codica

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES