About This Tutorial
It step by step covers what constitutes a basic refine CRUD app and explores fundamental refine concepts, namely: the
Most of the code is already generated by the magic of refine App Scaffolder. So, the content mainly presents low level inspections of boilerplate code to show how refine works under the hood. Units related to
resources explain how refine handles API calls and RESTful routing for implementing CRUD actions in a React admin panel. The later part of the series elaborates on the implementation of CRUD pages using Material UI components. The last unit sees how user authentication is implemented in a refine app.
This tutorial covers the following topics:
- Initializing a React admin panel app using refine App Scaffolder
dataProviderand CRUD Actions in refine
- Understanding the concept of the
resourcesprop in refine
- Adding CRUD pages to refine app
- Understanding the
authProviderprop and refine Auth Pages
👉 You can view the app we'll build during the tutorial from this link.
🏄 If you're a busy developer, you can quickly download the final version of the application by clicking on the "Build & Download" button.
What is refine?
refine is a React-based open-source framework that uses React to help developers create web applications faster and easier. It's excellent for applications that handle a lot of data, like admin panels, internal tools and dashboards, but it's versatile enough to use for any kind of CRUD application.
Think of refine as a handy tool that takes care of the monotonous parts of creating CRUD operations in web development. It comes with built-in solutions for essential project needs such as authentication, access control, routing, networking, state management, and i18n.
One of the key features of refine is that it's "headless," meaning it doesn't impose any styling or design on you. You have complete freedom to create your own unique look and feel. Plus, if you want to speed up your design process, refine comes pre-integrated with popular UI libraries like Ant Design, Material UI, Mantine, and Chakra UI .
Another great thing about refine is its ability to connect with over 15 different backend services. This includes both REST API and GraphQL, and popular services like Airtable, Strapi, Supabase, Firebase, Hasura, and Directus.
If you would rather start exploring refine with some examples before diving in, visit our examples page and choose an example to open and explore it in an online editor.
While preparing the refine's tutorial, we were quite inspired by the Astro tutorial. We thank Astro for your contributions to the open-source community 🎉