hand lthand lthand lthand lthand lthand lt
08Jun, 2020
Language blog :
Thai
Share blog : 
08 June, 2020
Thai

สร้าง Design System สำหรับ React โดยใช้ Styleguidist

By

6 mins read
สร้าง Design System สำหรับ React โดยใช้ Styleguidist

หลายๆ บริษัทหรือ developer หลายๆ คนต่างก็รู้จัก UI library มาแล้วทั้งนั้น ซึ่งแต่ละ library ก็มีหน้าตา วิธีใช้งาน หรือข้อจำกัดที่แตกต่างกันออกไป หลายบริษัทจึงหันมาสร้างเป็น design system เป็นของตัวเองเพื่อให้ใช้งานได้ตามจุดประสงค์มากขึ้น ซึ่งการสร้าง design system / UI library ขึ้นมานั้นก็ควรมี document อธิบายการใช้งานด้วย ซึ่ง Styleguidist เป็น tool ที่จะช่วยให้คุณสร้าง design system / UI library เป็นของตัวเองได้อย่างง่ายขึ้น

รู้จักกับ Styleguidist

Styleguidist เป็น tool ที่ช่วยให้เราสร้าง UI components ของ React framework ได้ง่ายขึ้น ซึ่งมีข้อดีคือทำให้เราสร้าง document ได้ง่ายมากๆ เพียงแค่สร้างไฟล์ markdown ที่หลายๆ คนคงรู้จักกันดีอยู่แล้วนั่นเอง

มาเริ่มทำ Design System ไว้ใช้เองกันเถอะ

ในบทความนี้จะพาทำ Styleguidist โดยใช้ React ซึ่งก่อนอื่นเลยเราต้อง project ขึ้นมาก่อน โดยในที่นี้จะสร้างโดย Create React App

npx create-react-app my-design-system
cd my-design-system

หลังจากนั้นก็ทำการติดตั้งพระเอกของเราเข้าไป คือ Styleguidist นั่นเอง

npm install react-styleguidist --save-dev// or
yarn add react-styleguidist --dev

เมื่อทำการติดตั้งเรียบร้อยแล้ว ให้ทำการเพิ่ม scripts ใน package.json เพื่อให้รันคำสั่งได้ง่ายขึ้น

"styleguide": "styleguidist server","styleguide:build": "styleguidist build"

ทีนี้ก็ลองใช้คำสั่งเพื่อรัน Styleguidist ขึ้นมาแล้วดูผลลัพธ์ที่ http://localhost:6060

npm run styleguide// or
yarn styleguide

เราจะพบกับหน้าตาแบบนี้ ซึ่งไม่ต้องตกใจ ที่มันขึ้นแบบนี้เนื่องจากเรายังไม่มี component เลยนั่นเอง

Styleguidist

ทีนี้เรามาลองสร้าง component เป็นของตัวเองเลยดีกว่า โดยในที่นี้จะสร้างเป็น input component เพื่อให้เข้าใจง่าย

เริ่มต้นคือสร้าง component ขึ้นมาก่อน โดยในที่นี้จะสร้างไว้ที่ src/components/Input.js

// src/components/Input.js
import React from 'react'
const Input = ({ style, ...props }) => ( <input   {...props}   style={{     color: 'deepskyblue',     border: '2px solid deepskyblue',     outline: 'none',     fontSize: 20,     borderRadius: 10,     width: 500,     padding: 10,     ...style   }} />) 
export default Input

และเมื่อลอง refresh หน้า browser ดูเราก็จะพบว่าหน้าตาของเว็บเราเปลี่ยนไปแล้ว

 

ซึ่งที่เห็นโล่งๆ แบบนี้เพราะว่าเรายังไม่ได้ทำการสร้าง document ให้กับ component โดยวิธีการสร้าง document ก็ง่ายมากๆ เพียงแค่สร้างไฟล์ markdown ที่มีชื่อเดียวกับ component ที่ต้องการ

โดยในที่นี้เราต้องการสร้าง document ให้กับ input component เราก็สร้างไฟล์ Input.md ไว้ที่เดียวกับไฟล์ component ได้เลย

<!-- src/components/Input.md -->
Input with placeholder:```js<Input placeholder="without value" />```
Input with value:```js<Input value="with value" />```

ทีนี้เราก็ได้ document หน้าตาสวยๆ มาแบบง่ายๆ แล้ว

แต่เดี๋ยวก่อน! Styleguidist ทำอะไรได้มากกว่านั้น มันสามารถทำ document เพื่อบอกรายละเอียด props ของ component ได้อีกด้วย~ โดยวิธีการทำก็ไม่ได้ยาก เพียงใช้งานร่วมกับ prop-types เท่านั้น

เริ่มต้นต้องทำการติดตั้ง prop-types เข้า project ก่อน

npm install prop-types// or
yarn add prop-types

จากนั้นทำการเพิ่ม prop-types ให้กับ component

// src/components/Input.js
import React from 'react'
import PropTypes from 'prop-types' // add this line
const Input = ({ style, ...props }) => (  <input    {...props}    style={{      color: 'deepskyblue',      border: '2px solid deepskyblue',      outline: 'none',      fontSize: 20,      borderRadius: 10,      width: 500,      padding: 10,      ...style    }}  />)// add this codes
Input.propTypes = {  value: PropTypes.string,  placeholder: PropTypes.string}
export default Input

เมื่อลอง restart server จะพบว่ามีรายละเอียด props ขึ้นมาแล้ว

แล้วถ้าเราอยากใส่คำอธิบายให้กับ component หรือ props ละทำยังไงล่ะ? คำตอบคือไม่ยาก ก็ใส่ comment ให้มันสิ!

// src/components/Input.js
import React from 'react'
import PropTypes from 'prop-types'/** * This is simple `Input` component */
const Input = ({ style, ...props }) => (  <input    {...props}    style={{      color: 'deepskyblue',      border: '2px solid deepskyblue',      outline: 'none',      fontSize: 20,      borderRadius: 10,      width: 500,      padding: 10,      ...style    }}  />)
Input.propTypes = {  /** Value of `Input` */  value: PropTypes.string,  /** Placeholder of `Input` */  placeholder: PropTypes.string}
export default Input

เพียงเท่านั้นเราก็ได้ description ของทั้ง component และ props มาอ่านให้เข้าใจง่ายๆ แล้ว

Design System Style Guide

บทสรุป

Styleguidist เป็น tool ที่ช่วยให้เราสร้าง design system / UI library ของ React framework ได้ง่ายขึ้น อีกทั้งยังสามารถทำ document ได้อย่างสะดวกรวดเร็ว ซึ่งในบทความนี้เป็นเพียงการสอนการทำ Styleguidist แบบง่ายๆ เท่านั้น ซึ่งหากทุกท่านสนใจสามารถลองเอาไปพัฒนาต่อได้

 

ติดตามบทความอื่นๆ จากเราได้ที่ SennaLabs Blogs

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

16
April, 2024
JS class syntax
16 April, 2024
JS class syntax
เชื่อว่าหลายๆคนที่เขียน javascript กันมา คงต้องเคยสงสัยกันบ้าง ว่า class ที่อยู่ใน js เนี่ย มันคืออะไร แล้วมันมีหน้าที่ต่างกับการประกาศ function อย่างไร? เรามารู้จักกับ class ให้มากขึ้นกันดีกว่า class เปรียบเสมือนกับ blueprint หรือแบบพิมพ์เขียว ที่สามารถนำไปสร้างเป็นสิ่งของ( object ) ตาม blueprint หรือแบบพิมพ์เขียว( class ) นั้นๆได้ โดยภายใน class

By

4 mins read
Thai
16
April, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
16 April, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
ผู้ให้บริการเครือข่ายในสหรัฐฯ ได้เปิดตัว 5G ในหลายรูปแบบ และเช่นเดียวกับผู้ให้บริการเครือข่ายในยุโรปหลายราย แต่… 5G มันคืออะไร และทำไมเราต้องให้ความสนใจ บทความนี้ได้รวบรวม 15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G เพราะเราปฏิเสธไม่ได้เลยว่ามันกำลังจะถูกใช้งานอย่างกว้างขวางขึ้น 1. 5G หรือ Fifth-Generation คือยุคใหม่ของเทคโนโลยีเครือข่ายไร้สายที่จะมาแทนที่ระบบ 4G ที่เราใช้อยู่ในปัจจุบัน ซึ่งมันไม่ได้ถูกจำกัดแค่มือถือเท่านั้น แต่รวมถึงอุปกรณ์ทุกชนิดที่เชื่อมต่ออินเตอร์เน็ตได้ 2. 5G คือการพัฒนา 3 ส่วนที่สำคัญที่จะนำมาสู่การเชื่อมต่ออุปกรณ์ไร้สายต่างๆ ขยายช่องสัญญาณขนาดใหญ่ขึ้นเพื่อเพิ่มความเร็วในการเชื่อมต่อ การตอบสนองที่รวดเร็วขึ้นในระยะเวลาที่น้อยลง ความสามารถในการเชื่อมต่ออุปกรณ์มากกว่า 1 ในเวลาเดียวกัน 3. สัญญาณ 5G นั้นแตกต่างจากระบบ

By

4 mins read
Thai
16
April, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
16 April, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
ในปัจจุบันนี้ ปฏิเสธไม่ได้เลยว่าภาษาที่ถูกใช้ในการเขียนเว็บต่าง ๆ นั้น คงหนีไม่พ้นภาษา Javascript ซึ่งเป็นภาษาที่ถูกนำไปพัฒนาเป็น framework หรือ library ต่าง ๆ มากมาย ผู้พัฒนาหลายคนก็มีรูปแบบการเขียนภาษา Javascript ที่แตกต่างกัน เราเลยมีแนวทางการเขียนที่หลากหลาย มาแบ่งปันเพื่อน ๆ เกี่ยวกับการจัดการ Array ด้วยภาษา Javascript กัน เรามาดูตัวอย่างกันเลยดีกว่า โดยปกติแล้วการ copy ค่าจาก value type ธรรมดา สามารถเขียนได้ดังนี้

By

4 mins read
Thai

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.