Accelerate your React development with Refine

Develop quickly, efficiently, and on a limited budget?

That was the challenge the UFE set for us: to create a tool for managing its members.

To meet it, we chose Refine, a React meta-framework designed for CRUD applications. It is compatible with many frameworks, UI libraries, and backends, and makes it easy to quickly set up structured projects.

Here is some feedback on a tool that proved to be a decisive asset in the success of this project: it allowed us to save time, simplify the code, and integrated perfectly with our existing tools.

What is Refine?

Refine is a React meta-framework for CRUD applications. It simplifies the creation of applications such as dashboards, admin panels, and internal tools. It is currently compatible with React versions 17 and 18.

It works with React frameworks such as Next.js, React Native, Vite or Remix.

It supports various UI frameworks such as TailwindCSS, Ant Design, Material UI and Chakra UI.

Finally, it supports many backends such as REST APIs, GraphQL, as well as solutions like Supabase, Airtable and Strapi.

Refine offers various templates that give you an idea of the types of applications that can be developed easily and help you quickly start development.

Refine in practice

Getting started

You can create a new Refine project with:

npm create refine-app@latest

Or add it to an existing project:

npm i @refinedev/core @refinedev/simple-rest

Data access

Refine provides a common code mechanism by resources corresponding to the standards of a CRUD REST API: create, retrieve, update, and delete an item or a list of items. This code, for example, retrieves any item from a resource:

We use it in our pages via a hook. There are different hooks corresponding to the different types of calls (useOne, useMany, useCreate, useUpdateMany…).

Display

Refine provides components to simplify the creation of pages, notably for displaying a list of items in a table format, and including standard actions like adding and editing items, as well as importing and exporting in CSV format. It offers filtering, sorting, and searching features on data.

Thus, the following code is enough to fetch data and display a basic table. We just define the resource to retrieve and map its attributes with the table columns:

It also simplifies creating forms for adding or editing items, since it manages fetching and updating data. A complete edit page might look like this. Note that the id of the edited item here is automatically retrieved from the route.

Authentication

Refine provides components to simplify user management: login page, management of related endpoints, role and access rights management…

It supports among others Auth0, Google OAuth, Amazon Cognito and Okta.

With the linked UI libraries and the AuthPage component, it is trivial to implement login, registration, or password recovery pages:

Refine provides a component that handles all account management calls, as well as various hooks that allow access to session information and user access rights:

Other features

We will not go much further into details here, as this article is not meant to be a summary of the Refine documentation, but it is worth noting that Refine also provides solutions for:

• Routing
• Notifications
• Logs
• CSV import/export
• Internationalization
• Real-time data updates
• Multi-tenant systems

Limitations

Refine is not suitable for all applications. If you are developing an application with complex business rules and endpoints that do not fit CRUD operations, Refine will not bring much value.

Having common code for all endpoints can save development time if your endpoints are similar, but can quickly become unreadable if you need to handle many specific cases.

Moreover, if you are building a public-facing application rather than an internal tool, you may need to develop custom UI components instead of relying on the compatible UI frameworks.

However, it is perfectly possible to develop standard React pages that do not use any Refine features if they are not relevant. Using Refine can therefore save time even if it is only used occasionally in your application.

Also note that Refine can be integrated into existing projects without impacting previously developed pages.

Conclusion

Refine allowed us to deliver a complete solution to the UFE within the given deadlines and budget, and even exceed the initial functional expectations.

It is not a miracle solution for all projects, but when it comes to structured CRUD applications, it offers an excellent balance between flexibility, development speed, and maintainability.

If you are looking for a way to accelerate your React development without sacrificing quality, Refine clearly deserves your attention.