design react kit
v5.5.0
Baca ini dalam bahasa lain: Bahasa Inggris ??.
Desain React Kit adalah satu set komponen reaksi yang mengimplementasikan bootstrap Italia dan gaya pada desain kit UI. Untuk menavigasi perpustakaan dan melihat komponen, buku cerita digunakan. Versi publik dari buku cerita tersedia di sini untuk rilis stabil terbaru yang diterbitkan. Kit Bereaksi Taman Bermain tersedia untuk dimainkan dengan perpustakaan.
Untuk menggunakan desain bereaksi sebagai kecanduan aplikasi, Anda dapat menginstalnya dari NPM. Kami menyarankan menggunakan create vite untuk membuat Webapp baru bereaksi, sebagai berikut:
yarn create vite nome-app --template react
cd nome-app
yarn add design-react-kit --saveInformasi lebih lanjut untuk membuat aplikasi baru dengan React:
design-react-kit tidak termasuk file CSS dan font, dan karena itu perlu untuk menginstalnya secara terpisah:
yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save Pada titik ini, cukup impor secara eksplisit ke aplikasi CSS dan font jika Anda menggunakan create vite di dalam file ./src/App.js :
import React from 'react' ;
import './App.css' ;
import { Alert } from 'design-react-kit' ;
import 'bootstrap-italia/dist/css/bootstrap-italia.min.css' ;
import 'typeface-titillium-web' ;
import 'typeface-roboto-mono' ;
import 'typeface-lora' ;
function App ( ) {
return < Alert > This is an Alert </ Alert > ;
}
export default App ;Anda dapat berkonsultasi dengan template web ini dengan StackBlitz: Template Web
Tema Bootstrap Italia menggunakan serangkaian font jenis huruf tertentu: titillium-web , roboto-mono dan lora . Pemuatan font ini diserahkan kepada browser tetapi, jika diinginkan dapat dikontrol melalui komponen FontLoader yang sesuai. Cukup nyatakan komponen FontLoader di bagian atas aplikasi React untuk memungkinkan pemuatan.
Atau, perlu untuk mengelola pemuatan font secara manual melalui paket webfontloader :
const WebFont = require ( 'webfontloader' ) ;
WebFont . load ( {
custom : {
families : [ 'Titillium Web:300,400,600,700:latin-ext' , 'Lora:400,700:latin-ext' , 'Roboto Mono:400,700:latin-ext' ]
}
} ) ; Perpustakaan tidak termasuk react and react-dom , menghindari bentrokan versi dan peningkatan ukuran bundel yang tidak berguna. Untuk alasan ini, untuk pengembangan lokal, perlu untuk menginstal kecanduan secara manual.
Perintah yang akan dilakukan adalah
yarn install --peersatau sebagai alternatif secara manual
yarn install react react-dom? Dimungkinkan untuk berkontribusi ke perpustakaan dengan berbagai cara:
Apakah Anda ingin membantu pada desain reaksi desain? Anda berada di tempat yang tepat!
Jika Anda belum melakukannya, mulailah dengan menghabiskan beberapa menit untuk memperdalam pengetahuan Anda tentang pedoman desain untuk layanan web PA, dan lihat indikasi tentang cara berkontribusi pada desain react kit.
Persyaratan minimum lingkungan lokal Anda harus:
Kloning repositori dan lakukan yarn untuk menginstal kecanduan. Lalu lakukan
yarn storybook:serveuntuk memulai server pengembangan.
Buku cerita kemudian akan tersedia di http: // localhost: 9001/
Storybook telah diperkaya dengan beberapa addons yang membuatnya lebih berbicara.
Bagian ini akan memandu pembuatan komponen baru di repositori. Semua komponen berada di folder src : Setiap komponen memiliki folder dengan segala sesuatu yang diperlukan untuk membuatnya berfungsi. Cerita Storybook malah ada di bawah stories . Tes unit berada di folder test . Misalnya, komponen Button hadir di bawah rute src/Button dan strukturnya adalah sebagai berikut:
├── src
│ └── Button
│ └── Button.tsx
├── stories
│ ├── Components
│ │ └── Button.stories.tsx
│ └── Documentation
│ └── Button.mdx
└── test
└── Button.test.tsx
Beberapa aturan dasar untuk menyusun komponen:
.stories.tsx hanya boleh berisi apa yang terkait dengan komponen itu sendiri..mdx hanya boleh berisi dokumentasi yang berkaitan dengan komponen itu sendiri.test.tsx harus berisi hanya tes yang berkaitan dengan komponen itu sendiri.Setelah komponen baru dibuat, dengan ceritanya, memulai buku cerita akan dapat memeriksa bahwa semuanya berfungsi sebagaimana mestinya.
Dokumentasi:
Sistem pengujian menyediakan kontrol cerita yang ada, melalui teknik yang disebut pengujian "snapshot": konten dari cerita buku cerita akan disalin dalam file khusus dan dipertahankan untuk memberi tahu perubahan apa pun di masa depan. Ini berarti bahwa penambahan cerita baru bisa dalam kegagalan tugas "tes" dalam PR. Jika cerita baru telah ditambahkan atau yang sudah ada, akan perlu untuk memperbarui file snapshot sebagai berikut:
yarn test -uPada titik ini, buat komisi baru dan perbarui PR dengan file snapshot yang diperbarui. Periksa apakah perubahan yang dilakukan dikoreksi sebelum memperbarui PR.
Untuk mengisi perpustakaan dan menghasilkan file di folder dist , cukup luncurkan perintah khusus:
yarn build Kit mengikuti indikasi yang ditunjukkan dalam pedoman desain untuk layanan web Administrasi Publik, Bagian 6.3.1.2.1. Dukungan browser melalui penggunaan paket browserslist-config-design-italia .
Perpustakaan dibawa ke naskah dan jenisnya diekspor dengannya.
Terima kasih khusus kepada mereka yang memungkinkan pengembangan perpustakaan ini!
 |  |  |  |
|---|---|---|---|
| Sabatino Galasso | Marco Liberati | Matteo Avesani | Federico Turbino |
dan kontribusi laboratorium opencity
Semua kontributor ( dibuat dengan kontribusi-IMG )
