React.js is a fast, stable and versatile Javascript library. It allows you to create great solutions at a relatively low cost in time (and money). Recently we wrote about its advantages and applications. This time we would like to boast about the projects that we managed to complete with React.js.

React.js is one of the best tools for creating user interfaces (UI). It is a Javascript library, although it is also called a framework due to the large number of ready-made solutions available for React in external libraries.

React.js is used to design web applications (its equivalent version for the mobile channel is React Native), especially their interactive elements. Although it is simple in itself, it allows for the development of any kind of complex structures for a variety of business purposes.

The main advantages of React.js are:

• small size,
• speed,
• stability,
• use of reusable components,
• suitability for creating SPA applications,
• ease of coding,
• and a large community supporting its development.

We've discussed the pros and cons of React.js in one of the previous texts. If you haven't seen it yet, you can check it out now: "Fast, flexible and versatile. Why is React.js a business-friendly technology?".

This time we'd like to describe the application of React in practice and boast of several projects that we have managed to complete with this library.

Here we go!

PayPo

Product

We have created frontend integration for a deferred payment system of PayPo brand. The application allows you to purchase a product in an online store without paying for it at the time of purchase. The customer receives the product immediately and has 30 days to pay for it.

Challenge

The application is based on forms where the user submits data. However, the forms were not ready-made templates, we had to create them. Without the use of appropriate tools, this process would be a tedious and long-lasting effort.

Solution

React and its external libraries proved unrivaled in this task. Thanks to the use of Formik we managed to create forms in a flash. In turn, Yup was very helpful in simplifying the validation rules.

How did React contribute to this project?

It has accelerated and improved the whole process. It has enabled us to develop the Single Page Application, which is a page that updates automatically without having to be re-loaded, and has helped to deliver high-quality UX. React once again proved to be a solution created for this type of projects.

Parlor Social Club

Product

At the client's request, we have developed a social networking platform allowing users to participate in exclusive cultural events and expand the network of their contacts.

Challenge

Our goal was to create a website through which the user signs up for the club and a native application for iOS and Android. We wanted the registration process to be smooth.

Solution

React.js consists of reusable components that provide ready-to-use solutions for many problems and enable you to design functions at an "accelerated" pace. Furthermore, thanks to solutions available in external React libraries such as Redux, you can easily create user sessions and display appropriate screens based on the data entered.

How did React contribute to this project?

React has enabled us to deliver a high-quality user experience. From the user's point of view, the website works smoothly – its content changes, but the change is not disturbed by the page reloading (Single Page Application).

PLM

Product

For clothing manufacturer Haddad Brands we have created the frontend for PLM (Product Lifecycle Management) designed to manage the product's lifecycle at every stage: from the initial concept, through technical specification and creation, to the development of guidelines for factories. The solution collects data from many different sources and displays them in a clear form.

Challenge

PLM is not a simple application. The system supports many processes and retrieves data from various sources, therefore, it must have a powerful backend. The priority in this project was to enable the data to be presented with the least possible delay.

Solution

React allowed us to significantly optimize the code in terms of its length. By using this library we were able to write much less lines of code than if we were writing it in pure JS. React was used in conjunction with Redux, which allowed us to create a solution for storing a very complex state of the application, and with the React Router library, thanks to which switching between subpages does not refresh the page (Single Page Application). For the convenience of the user we introduced the drag'n'drop function, and with the React DnD library we were able to implement it efficiently in all places of occurrence.

How did React contribute to this project?

React.js allowed us to save time on coding and, above all, to create a solution that is "light" and comfortable to use. Moreover, we could easily achieve interesting UX effects.

Farmlifes

Product

For the agricultural company we have created a social networking site for farmers. The application allows for establishing contacts between farmers, e.g. from the neighborhood, posting photos or videos, as well as publishing advertisements and sales offers.

Challenge

The client needed a system where logged-in users could share content in the form of posts, photos, videos or ads. The system therefore required the creation of appropriate interaction tools.

Solution

Thanks to the components and libraries of React.js we have efficiently and quickly developed an application that met the client's expectations. In our work we used such tools as Formik (for forms creation), Yup (for forms validation), React Redux (for application state storage), Redux Thunk (for asynchronous queries management), Blueimp Load Image (for easier management of uploaded images). We also used websockets for fast data flow between the server and the browser.

How did React contribute to this project?

Thanks to React.js we managed to develop a fast application with clear code, allowing for easy updates and modifications.

React is a tool we can't imagine working without. It is irreplaceable in designing all interactive elements of web applications. With a clear conscience, we recommend it to all companies interested in creating this type of solutions – in the case of our projects it turned up trumps.

If you are looking for a partner with extensive experience in creating interactive web applications, who can implement such projects efficiently, quickly and economically – let's talk!