Hello! New Front/Backend dev here
Hello there
I've taken interest on refine etc and I want to learn it
I know it's based on React Js but what's the Min Requirements to start learning refine itself? Sorry if I sound dumb
5 Replies
Hi @Mique. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hello! It's great to hear that you're interested in learning Refine. Don't worry, there's no such thing as a dumb question when you're learning something new!
Refine is indeed a React-based framework, so a solid understanding of React.js is a prerequisite to start learning Refine. You should be comfortable with concepts like JSX, components, hooks, and state management in React.
Refine is designed to help you build data-intensive applications like admin dashboards and internal tools. It provides out-of-the-box functionality for routing, authentication, state management, networking, and internationalization[^1^][^4^][^5^][^6^]. Therefore, having a basic understanding of these concepts will also be beneficial.
Refine integrates with popular design systems and UI frameworks like Material UI, Chakra UI, Mantine, and Ant design[^1^][^4^][^5^][^6^]. So, familiarity with any of these would be a plus, but it's not a strict requirement as Refine is a "headless" framework, which means it's not opinionated about your styling and design choices[^1^].
Finally, since Refine allows for easy integration with custom backend APIs and popular backend services like Strapi, Hasura, etc[^2^][^3^], some knowledge about working with APIs and backend services would be helpful.
Once you're comfortable with these, you can start exploring Refine's documentation (https://refine.dev) and tutorials to get a hands-on understanding of how to work with it.
Happy learning!
^1^]: [Building a React Admin Dashboard with Refine (https://refine.dev/blog/building-react-admin-dashboard#introduction)
^2^]: [React Admin Panel Tutorial with Chakra UI and Strapi (https://refine.dev/blog/react-admin-tutorial#introduction)
^3^]: [Build internal tools using Low-Code with Refine, React-based framework (https://refine.dev/blog/build-internal-tools-using-low-code-with-refine)
^4^]: [Building a React Admin Dashboard with Tremor Library (https://refine.dev/blog/building-react-admin-dashboard-with-tremor#what-is-refine)
^5^]: [How to create a notification provider with react-toastify (https://refine.dev/blog/react-toastify#what-is-refine)
^6^]: [Building React admin panel with NextUI and Refine (https://refine.dev/blog/next-ui-react-admin-panel#what-is-refine)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@826033340901097533> kapa.ai is still learning and improving, please let us know how it did by reacting below
afraid-scarlet•3mo ago
@kapa.ai so let's say fellow ai, I just need "jsx, components, hooks, state management" to start using refine right?
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, a fundamental understanding of "JSX, components, hooks, and state management" in React is a good starting point for learning Refine. However, it's also beneficial to have:
- Basic knowledge of TypeScript, as Refine is a TypeScript-first library[^2^][^3^][^7^].
- Familiarity with Node.js[^2^][^3^][^7^].
- Understanding of UI libraries like Ant Design or Material UI, as Refine integrates well with these[^4^].
- Knowledge of backend technologies, as Refine is backend agnostic[^5^][^6^].
Once you're comfortable with these, you can start exploring Refine's documentation (https://refine.dev) and tutorials to get a hands-on understanding of how to work with it.
^1^]: [Building a React Admin Dashboard with Refine (https://refine.dev/blog/building-react-admin-dashboard#introduction)
^2^]: [React Hook Form Validation with Complete Examples (https://refine.dev/blog/react-hook-form-validation-examples#prerequisite)
^3^]: [Using Material UI DataGrid component with Refine app (https://refine.dev/blog/mui-datagrid-refine#prerequisites)
^4^]: [The Anatomy of the Web Development in 2024 (https://refine.dev/blog/web-development#refines-core-is-headless)
^5^]: [Using React Hot Toast as a Notification Provider for CRUD apps (https://refine.dev/blog/react-hot-toast#what-is-refine)
^6^]: [How to Create Dynamic Forms in React CRUD app with Ant Design (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design#what-is-refine)
^7^]: [Build a Progressive Web App (PWA) with Next.js (https://refine.dev/blog/next-js-pwa#prerequisites)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@826033340901097533> kapa.ai is still learning and improving, please let us know how it did by reacting below