Refine é uma estrutura baseada em React que permite o desenvolvimento rápido de aplicativos da web. Ele elimina as tarefas repetitivas exigidas pelas operações CRUD e fornece soluções padrão do setor para partes críticas de um projeto, como autenticação, controle de acesso, roteamento, rede, gerenciamento de estado e i18n.
O Refine é headless por design, oferecendo opções ilimitadas de estilo e personalização. Fora isso você pode escolher o seu framework de Interface de usuário favorito para trabalhar em seus aplicativos, como Material UI, Ant Design, Chakra UI, Mantine e o padrão Headless.
Outra escolha que você pode fazer é a plataforma React que deseja trabalhar. Entre as disponíveis estão Vite, Remix e Next.js. Estas escolhes abrem um leque enorme para te ajudar a criar e desenvolver suas próprias aplicações CRUD de um jeito muito mais rápido e dinâmico.
O Refine é Open Source, de código aberto, e você pode criar o seu ambiente de desenvolvimento local em poucos passos. A documentação é muito completa e repleta de tutoriais para ajuda-lo.
Criando o CRUD com Refine
É possível utilizar a plataforma refine.new ou local no seu computador.
Com a plataforma refine.new as partes segue:
Parte 1: Seleciona entre Vie, Remix, Next.js
Parte 2: Seleciona UI Framework entre Material UI, Ant Design, Chakra UI, Mantine Headless
Parte 3: Seleciona o Backend entre REST API, Supabase, Strapi, NestJS, Appwrite, Airtable, Hasura
Parte 4: Seleciona o provedor de autenticação entre Google Auth, Keycloak, AuthO, Subabase, Appwrite, Strapi, Custom Auth, No Auth
Aparecerá um resumo das etapas que escolheu, confirme e irá redirecionar no projeto gerado com Refine.
No ambiente local no seu computador
Premissas: Ter o Node.js instalado
npm create refine-app@latest npm run dev
No browser http://localhost:3000 você irá ver uma tabela com dados fictícios de posts de blog e categorias com paginação.
Mas o Refine não se limita apenas a isso, pode criar partes de componentes do formulário que for desenvolver.
Veja alguns exemplos de componentes que pode criar campos de formulário.
Custom Input
npm create refine-app@latest -- --example input-custom
useSelect
npm create refine-app@latest -- --example field-antd-use-select-basic
useSelect com lista infinita
npm create refine-app@latest -- --example field-antd-use-select-infinite
useAutocomplete
npm create refine-app@latest -- --example field-material-ui-use-autocomplete
useCheckboxGroup
npm create refine-app@latest -- --example field-antd-use-checkbox-group
useRadioGroup
npm create refine-app@latest -- --example field-antd-use-radio-group
Base64 Upload
npm create refine-app@latest -- --example upload-material-ui-base64
Multipart Upload
npm create refine-app@latest -- --example upload-antd-multipart
Date Picker
npm create refine-app@latest -- --example input-date-picker
Search
npm create refine-app@latest -- --example search
Google Auth
npm create refine-app@latest -- --example auth-google-login
Login
npm create refine-app@latest -- --example customization-login Referências
Feito!
Nenhum comentário:
Postar um comentário