refine

Halaman Beranda | Dokumentasi | Contoh | Perselisihan | Blog

Titik sweet antara kode rendah/tidak ada dan "mulai dari awal" untuk aplikasi yang berat.
Refine adalah sebagai sumber terbuka, bereaksi meta-kerangka kerja untuk perusahaan. Ini memberikan solusi tanpa kepala untuk semuanya mulai dari panel admin hingga dasbor dan alat internal.

Apa itu Refine?

Refine adalah meta-kerangka reaksi untuk aplikasi web yang berat. Ini membahas berbagai kasus penggunaan perusahaan termasuk alat internal, panel admin, dasbor dan aplikasi B2B.

Kait dan komponen inti Refine merampingkan proses pengembangan dengan menawarkan solusi standar industri untuk aspek-aspek penting dari suatu proyek, termasuk otentikasi , kontrol akses , perutean , jaringan , manajemen negara , dan I18N .

Arsitektur Tanpa Kepala Refine memungkinkan pembangunan aplikasi yang sangat dapat disesuaikan dengan memisahkan logika bisnis dari UI dan perutean. Ini memungkinkan integrasi dengan:

• Setiap desain khusus atau kerangka kerja UI seperti tailwindcss, bersama dengan dukungan bawaan untuk desain semut, material UI, mantine, dan chakra UI.

• Berbagai platform, termasuk Next.js, Remix, React Native, Electron, dll., Dengan antarmuka perutean sederhana tanpa perlu langkah pengaturan tambahan.

⚡ Cobalah perbaiki

Mulai proyek baru dengan Refine in detik menggunakan perintah berikut:

npm create refine-app@latest my-refine-app

Atau Anda dapat membuat proyek baru di browser Anda:

Awal yang cepat

Berikut ini Refine In Action, kode di bawah ini adalah contoh dari aplikasi CRUD sederhana menggunakan Refine + React Router + Material UI:

 import React from "react" ;
import { Refine , useMany } from "@refinedev/core" ;
import { ThemedLayoutV2 } from "@refinedev/mui" ;
import dataProvider from "@refinedev/simple-rest" ;
import routerProvider from "@refinedev/react-router" ;
import { BrowserRouter , Outlet , Route , Routes } from "react-router" ;

import CssBaseline from "@mui/material/CssBaseline" ;

export default function App ( ) {
  return (
    < BrowserRouter >
      < CssBaseline />
      < Refine
        dataProvider = { dataProvider ( "https://api.fake-rest.refine.dev" ) }
        routerProvider = { routerProvider }
        resources = { [
          {
            name : "products" ,
            list : "/products" ,
          } ,
        ] }
      >
        < Routes >
          < Route
            element = {
              < ThemedLayoutV2 >
                < Outlet />
              </ ThemedLayoutV2 >
            }
          >
            < Route path = "/products" >
              < Route index element = { < ProductList /> } />
            </ Route >
          </ Route >
        </ Routes >
      </ Refine >
    </ BrowserRouter >
  ) ;
}

// src/pages/products/list.tsx

import { List , useDataGrid , DateField } from "@refinedev/mui" ;
import { DataGrid , GridColDef } from "@mui/x-data-grid" ;

export const ProductList = ( ) => {
  const { dataGridProps } = useDataGrid ( ) ;

  const { data : categories , isLoading } = useMany ( {
    resource : "categories" ,
    ids :
      dataGridProps ?. rows ?. map ( ( item ) => item ?. category ?. id ) . filter ( Boolean ) ??
      [ ] ,
    queryOptions : {
      enabled : ! ! dataGridProps ?. rows ,
    } ,
  } ) ;

  const columns = React . useMemo < GridColDef [ ] > (
    ( ) => [
      { field : "id" , headerName : "ID" , type : "number" } ,
      { field : "name" , flex : 1 , headerName : "Name" } ,
      {
        field : "category" ,
        flex : 1 ,
        headerName : "Category" ,
        display : "flex" ,
        renderCell : ( { value } ) =>
          isLoading
            ? "Loading..."
            : categories ?. data ?. find ( ( item ) => item . id === value ?. id ) ?. title ,
      } ,
      {
        field : "createdAt" ,
        flex : 1 ,
        headerName : "Created at" ,
        display : "flex" ,
        renderCell : ( { value } ) => < DateField value = { value } /> ,
      } ,
    ] ,
    [ categories ?. data , isLoading ] ,
  ) ;

  return (
    < List >
      < DataGrid { ... dataGridProps } columns = { columns } />
    </ List >
  ) ;
} ;

Hasilnya akan terlihat seperti ini:

Menggunakan kasus

Perbaiki bersinar pada aplikasi intensif data B2B perusahaan seperti panel admin , dasbor , dan alat internal . Berkat dukungan SSR bawaan, itu juga dapat memberi daya pada aplikasi yang menghadap pelanggan seperti etalase .

Anda dapat melihat beberapa contoh langsung yang dapat dibangun menggunakan Refine From Scratch:

• Aplikasi CRM yang berfungsi penuh
• Panel admin fungsional penuh
• Panel Admin Gaya Win95?
• Generator Faktur PDF
• Medium Clone - Contoh Dunia Nyata
• Contoh multitenancy
• Etalase
• Lihat halaman template untuk lebih banyak contoh
• Lebih banyak penyempurnaan skenario penggunaan yang berbeda dapat ditemukan di sini

Fitur utama

• Refine DevTools - Menyelam lebih dalam ke aplikasi Anda dan memberikan wawasan yang bermanfaat
• Konektor untuk 15+ layanan backend termasuk REST API, GraphQL, NestJS CRUD, Airtable, Strapi, Strapi V4, Supabase, Hasura, Appwrite, NestJS-Query, Firebase, Sanity, dan Directus.
• Dukungan SSR dengan Next.js & Remix dan Routing Lanjutan dengan Perpustakaan Router Pilihan Anda
• Auto-Generasi UI CRUD berdasarkan struktur data API Anda
• Manajemen & mutasi negara yang sempurna dengan kueri bereaksi
• Penyedia arus otentikasi dan akses yang mulus
• Dukungan out-of-the-box untuk aplikasi langsung / real-time
• Log Audit Mudah & Versi Dokumen

Belajar memperbaiki

• Arahkan ke tutorial tentang membangun aplikasi CRUD yang komprehensif memandu Anda melalui setiap langkah proses.
• Kunjungi Panduan & Konsep untuk mendapatkan informasi tentang konsep -konsep mendasar.
• Baca lebih lanjut tentang tutorial canggih untuk berbagai skenario penggunaan.

Kontribusi

Lihat dokumen kontribusi untuk informasi lebih lanjut.

Jika Anda memiliki keraguan terkait dengan proyek atau ingin mendiskusikan sesuatu, maka bergabunglah dengan server Discord kami.

Kontributor ♥ ️ Terima kasih

Kami menyampaikan rasa terima kasih kami kepada semua kontributor kami yang membuat plugin, membantu dengan masalah dan menarik permintaan, dan menanggapi pertanyaan tentang diskusi perselisihan dan github.

Refine adalah proyek yang digerakkan oleh komunitas, dan kontribusi Anda terus meningkatkannya.

Lisensi

Lisensi Di Bawah Lisensi MIT, Hak Cipta © 2021-Present Relfinedev