design react kit
v5.5.0
อ่านสิ่งนี้ในภาษาอื่น: ภาษาอังกฤษ ??
Design React Kit เป็นชุดของส่วนประกอบปฏิกิริยาที่ใช้ Bootstrap Italia และสไตล์ในการออกแบบชุด UI เพื่อนำทางห้องสมุดและดูส่วนประกอบมีการใช้หนังสือนิทาน หนังสือนิทานเวอร์ชันสาธารณะมีให้ที่นี่สำหรับการเผยแพร่ที่มีเสถียรภาพล่าสุดที่เผยแพร่ ชุด React สนามเด็กเล่นมีให้เล่นกับห้องสมุด
ในการใช้การออกแบบ React เป็นการติดแอพที่คุณสามารถติดตั้งได้จาก NPM เราขอแนะนำให้ใช้ create vite เพื่อสร้าง WebApp React ใหม่ดังนี้:
yarn create vite nome-app --template react
cd nome-app
yarn add design-react-kit --saveข้อมูลเพิ่มเติมเพื่อสร้างแอพใหม่ด้วย React:
design-react-kit ไม่รวมไฟล์ CSS และ FONT ดังนั้นจึงจำเป็นต้องติดตั้งแยกต่างหาก:
yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save ณ จุดนี้เพียงนำเข้าอย่างชัดเจนไปยังแอพ CSS และ FONT หากคุณใช้ create vite ภายในไฟล์ ./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 ;คุณสามารถปรึกษาเทมเพลตเว็บนี้ด้วย StackBlitz: Web Templates
ชุดรูปแบบ Bootstrap Italia ใช้ชุดตัวอักษรแบบอักษรเฉพาะ: titillium-web , roboto-mono และ lora การโหลดแบบอักษรเหล่านี้จะถูกทิ้งไว้ในเบราว์เซอร์ แต่หากต้องการสามารถควบคุมได้ผ่านส่วนประกอบ FontLoader ที่เหมาะสม เพียงประกาศส่วนประกอบ FontLoader ที่ด้านบนของแอพ React เพื่ออนุญาตให้โหลด
อีกทางเลือกหนึ่งมีความจำเป็นในการจัดการการโหลดแบบอักษรด้วยตนเองผ่านแพ็คเกจ 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' ]
}
} ) ; ห้องสมุดไม่รวมถึง react และ react-dom หลีกเลี่ยงการปะทะกันของรุ่นและการเพิ่มขนาดของชุด ด้วยเหตุนี้สำหรับการพัฒนาในท้องถิ่นจึงจำเป็นต้องติดตั้งการเสพติดด้วยตนเอง
คำสั่งที่จะดำเนินการคือ
yarn install --peersหรือด้วยตนเองหรือด้วยตนเอง
yarn install react react-dom- เป็นไปได้ที่จะมีส่วนร่วมในห้องสมุดในรูปแบบต่าง ๆ :
คุณต้องการช่วยในการออกแบบ React Kit หรือไม่? คุณอยู่ในสถานที่ที่เหมาะสม!
หากคุณยังไม่ได้ทำเช่นนั้นให้เริ่มต้นด้วยการใช้เวลาสักครู่เพื่อเพิ่มความรู้ของคุณเกี่ยวกับแนวทางการออกแบบสำหรับบริการเว็บ PA และอ้างถึงข้อบ่งชี้เกี่ยวกับวิธีการมีส่วนร่วมในการออกแบบชุดรีแอนด์
ข้อกำหนดขั้นต่ำของสภาพแวดล้อมในท้องถิ่นของคุณจะต้อง:
โคลนที่เก็บและดำเนินการ yarn เพื่อติดตั้งการเสพติด จากนั้นแสดง
yarn storybook:serveเพื่อเริ่มต้นเซิร์ฟเวอร์การพัฒนา
หนังสือนิทานจะวางจำหน่ายที่ http: // localhost: 9001/
หนังสือนิทานได้รับการตกแต่งด้วย addons บางอย่างที่ทำให้การพูดคุยมากขึ้น
ส่วนนี้จะเป็นแนวทางในการสร้างส่วนประกอบใหม่ในที่เก็บ ส่วนประกอบทั้งหมดอยู่ในโฟลเดอร์ src : แต่ละส่วนประกอบมีโฟลเดอร์ที่มีทุกสิ่งที่จำเป็นเพื่อให้มันใช้งานได้ เรื่องราว Storybook แทนอยู่ภายใต้ stories การทดสอบหน่วยอยู่ในโฟลเดอร์ test ตัวอย่างเช่นส่วนประกอบ Button อยู่ภายใต้เส้นทาง src/Button และโครงสร้างของมันมีดังนี้:
├── src
│ └── Button
│ └── Button.tsx
├── stories
│ ├── Components
│ │ └── Button.stories.tsx
│ └── Documentation
│ └── Button.mdx
└── test
└── Button.test.tsx
กฎพื้นฐานบางประการในการจัดโครงสร้างส่วนประกอบ:
.stories.tsx ควรมีสิ่งที่เกี่ยวข้องกับส่วนประกอบเท่านั้น.mdx ควรมีเอกสารที่เกี่ยวข้องกับส่วนประกอบเท่านั้น.test.tsx ไฟล์ควรมีการทดสอบที่เกี่ยวข้องกับส่วนประกอบเท่านั้นเมื่อมีการสร้างส่วนประกอบใหม่ด้วยเรื่องราวของเขาการเริ่มต้นหนังสือ Storybook จะสามารถตรวจสอบได้ว่าทุกอย่างทำงานได้ตามที่ควรจะเป็น
เอกสาร:
ระบบทดสอบให้การควบคุมเรื่องราวที่มีอยู่ผ่านเทคนิคที่เรียกว่าการทดสอบ "Snapshot": เนื้อหาของเรื่องราวเรื่องราวจะถูกคัดลอกในไฟล์พิเศษและเก็บรักษาไว้เพื่อแจ้งการเปลี่ยนแปลงใด ๆ ในอนาคต ซึ่งหมายความว่าการเพิ่มเรื่องราวใหม่อาจอยู่ในความล้มเหลวของงาน "ทดสอบ" ในการประชาสัมพันธ์ หากมีการเพิ่มเรื่องราวใหม่หรือมีอยู่แล้วในปัจจุบันจำเป็นต้องอัปเดตไฟล์ snapshot ดังนี้:
yarn test -uณ จุดนี้ให้สร้างค่าคอมมิชชั่นใหม่และอัปเดต PR ด้วยไฟล์สแน็ปช็อตที่อัปเดต ตรวจสอบว่าการเปลี่ยนแปลงได้รับการแก้ไขก่อนอัปเดต PR
ในการกรอกข้อมูลในไลบรารีและสร้างไฟล์ในโฟลเดอร์ dist เพียงแค่เรียกใช้คำสั่งเฉพาะ:
yarn build ชุดตามข้อบ่งชี้ที่แสดงในแนวทางการออกแบบสำหรับบริการเว็บของการบริหารสาธารณะส่วนที่ 6.3.1.2.1 การสนับสนุนเบราว์เซอร์ผ่านการใช้แพ็คเกจ browserslist-config-design-italia
ห้องสมุดถูกนำไปยัง TypeScript และประเภทจะถูกส่งออกด้วย
ขอขอบคุณเป็นพิเศษสำหรับผู้ที่พัฒนาห้องสมุดนี้เป็นไปได้!
 |  |  |  |
|---|---|---|---|
| Sabatino Galasso | Marco Liberati | Matteo Avesani | Federico Turbino |
และการมีส่วนร่วมของ OpenCity Labs
ผู้มีส่วนร่วมทั้งหมด ( ทำด้วยผู้สนับสนุน-IMG )
