Cách tạo thành phần giao diện người dùng với React và Storybook
Trong bài viết trước, tôi đã giới thiệu về Storybook và cách sử dụng nó để tổ chức và xây dựng các thành phần JavaScript. Storybook là một thư viện giao diện user được dùng để ghi lại các thành phần. Trong bài viết này, tôi sẽ giải thích cách xây dựng một thành phần giao diện user tương tác bằng cách sử dụng React và Storybook. Ta sẽ tạo thành phần giao diện user bằng Storybook và React và ở phần cuối của hướng dẫn, ta sẽ triển khai storybook dưới dạng một ứng dụng độc lập để phục vụ như một hướng dẫn phong cách.
Trong hướng dẫn này, ta sẽ:
- Tạo một dự án React
- Thêm sách truyện / phản ứng dưới dạng phụ thuộc
- Tạo Thư viện thành phần giao diện user với Storybook
- Tùy chỉnh chủ đề
- Triển khai dưới dạng một trang web tĩnh
Bước 1 - Cài đặt yêu cầu
Để bắt đầu, ta cần tạo một dự án React mới và đối với điều này, ta sẽ sử dụng create-react-app , một công cụ tuyệt vời cho các ứng dụng React giàn giáo.
- npx create-react-app storybook-app
- cd storybook-app
Và bước tiếp theo sẽ là cài đặt gói truyện vào dự án của ta :
- npx -p @storybook/cli sb init
Lệnh có thể tự động phát hiện khung mà ta đang sử dụng từ file package.json và cài đặt version truyện của khung đó. Sau khi chạy cả hai lệnh, ta có thể xác nhận ta đã cài đặt các phần phụ thuộc storybook-react bằng cách truy cập file package.json để xem các gói đã được cài đặt chưa và sau đó ta có thể chạy ứng dụng cũng như chạy truyện.
- npm start
- npm run storybook
Sau khi chạy cả hai lệnh, Ta sẽ có cả ứng dụng phản ứng và ứng dụng sách truyện chạy trên các cổng khác nhau.
Bước 2 - Thêm câu chuyện vào ứng dụng React
Bây giờ ta đã hoàn tất việc cài đặt , ta có thể tạo các thành phần bằng Storybook. Ý tưởng ở đây là trước tiên hãy cài đặt sách truyện nếu ta làm theo các bước được nêu ở trên, sau đó nó đã được cấu hình sẵn cho ta nếu ta cài đặt gói storybook/react trong một dự án phản ứng đã có, thì ta cần làm theo các bước sau để cài đặt sách truyện. Trước tiên, ta sẽ muốn tạo một folder .storybook trong folder root của dự án React của ta và sau đó tạo một file trong folder có tên config.js và thêm các dòng mã sau:
import { configure } from '@storybook/react'; function loadStories() { require('../src/stories'); } configure(loadStories, module); Khối mã trên là một cấu hình cho storybook và nó yêu cầu Storybook tìm các câu chuyện trong folder src/stories . Ta sẽ tiếp tục và tạo folder đó nếu ta chưa cài đặt nó. Trong folder src tạo một folder có tên là các stories . Đây là nơi đặt tất cả các thành phần mà ta sẽ tạo ra các câu chuyện. Trong hướng dẫn này, ta sẽ tạo một thành phần Nút và đối với thành phần này, ta sẽ ghi lại các câu chuyện cho chúng trong folder stories . Hãy tiếp tục và tạo Thành phần Nút trong folder thành phần với các dòng mã sau:
import React from 'react'; import './Button.css'; const Button = props => ( <button onClick={props.onClick} style={props.style}> {props.label && <span>{props.label}</span>} </button> ) export default Button; Bây giờ, ta có thể thêm một câu chuyện cho thành phần nút đã tạo. Trong stories folder tạo ra một file và gọi nó là buttonStories.js và sau đó thêm dòng mã sau đây vào file:
import React from 'react'; import { storiesOf } from '@storybook/react'; import Button from '../components/Button'; storiesOf('Button', module) .add('with primary', () => <Button label="Primary Button" />) .add('with outline', () => <Button label="Ouline Button" style={{ background: 'transparent', border: '3px solid #fecd43' }} />) .add('with rounder corners', () => <Button label="Rounded Button" style={{ borderRadius: '15px' }} />) .add('disabled', () => <Button disabled label="Disabled Button" style={{ background: 'gray' , border: 'gray', cursor: 'not-allowed' }} />) Tiếp theo, tạo một index.js sẽ đóng role là file cơ sở với tất cả các câu chuyện, sau đó ta có thể nhập tất cả vào file này. Tiếp tục và nhập file buttonStories.js và sau đó đối với mỗi file mới được tạo trong folder buttonStories.js , ta sẽ nhập chúng vào file này.
import './buttonStories'; Bước 3 - Tích hợp Addons
Addons with Storybook giúp triển khai các tính năng bổ sung để làm cho chúng hữu ích và tương tác hơn. Trong bài viết này, ta sẽ thêm Action addon vào các câu chuyện đã tạo. Phần bổ trợ Hành động được dùng để hiển thị dữ liệu mà trình xử lý sự kiện nhận được trong Storybook . Bạn có thể tìm thấy danh sách đầy đủ tất cả các addon có sẵn với Storybook tại đây . Ta có thể cài đặt addon nếu nó chưa được thực hiện theo mặc định, bạn cần làm theo các bước sau. Cài đặt gói addon bằng lệnh này.
- npm i -D @storybook/addon-actions or yarn add @stroybook/addon-actions
Sau đó, thêm nội dung sau vào .storybook/addons.js :
import '@storybook/addon-actions/register'; Để làm cho câu chuyện Nút của ta tương tác với Storybook, ta có thể thêm mã sau vào buttonStories.js :
import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import Button from '../components/Button'; storiesOf('Button', module) .add('with primary', () => <Button onClick={action('click')} label="Primary Button" />) .add('with outline', () => <Button label="Ouline Button" onClick={action('click')} style={{ background: 'transparent', border: '3px solid #fecd43' }} />) .add('with rounder corners', () => <Button label="Rounded Button" onClick={action('click')} style={{ borderRadius: '15px' }} />) .add('disabled', () => <Button disabled label="Disabled Button" onClick={action('click')} style={{ background: 'gray' , border: 'gray', cursor: 'not-allowed' }} />) Đây là bạn có nó. Để thấy điều này hoạt động khi bạn chạy Storybook, trên tab bên dưới, bạn sẽ thấy Actions tab nơi hành động được ghi lại khi nào ta tương tác với các node :
Bước 4 - Tùy chỉnh chủ đề
Với Storybook, ta có khả năng tùy chỉnh chủ đề mặc định được sử dụng và sách truyện đi kèm với chủ đề sáng mặc định. Bây giờ ta hãy xem cách ta có thể tùy chỉnh điều này thành một cái gì đó khác nhau. Chủ đề tối có thể hoặc một cái gì đó hoàn toàn khác. Để bắt đầu, ta cần sửa đổi các cấu hình mà ta đã đặt trong file config.js bằng cách thêm các dòng mã sau:
import { addParameters } from '@storybook/react'; import { themes } from '@storybook/theming' addParameters({ options: { theme: themes.dark } }) Với chủ đề tối được cấu hình , ta có thể thấy toàn bộ chủ đề sách truyện trông khác và đã chuyển sang chủ đề tối. Tại bất kỳ thời điểm nào, điều này có thể được chuyển trở lại chủ đề sáng hoặc tối tùy thuộc vào sở thích của ta .
Ta cũng có thể tiếp tục và xác định một chủ đề động nếu ta muốn một chủ đề hoàn toàn khác. Hãy xem làm thế nào ta có thể đạt được điều này. Bước đầu tiên là tạo một file cho chủ đề của ta , trong folder .storybook tạo một file mới có tên yourTheme.js . Tôi sẽ sử dụng pinkPanther làm tên chủ đề của ta . Bước tiếp theo là tạo một chủ đề mới bằng cách sử dụng hàm create() từ storybook/theming
import {create} from '@storybook/theming' export default create ({ base: 'light', colorPrimary: 'hotpink', colorSecondary: 'deepskyblue', // UI appBg: 'rgb(234, 0, 133)', appContentBg: 'white', appBorderColor: 'white', appBorderRadius: 4, // Typography fontBase: '"Open Sans", sans-serif', fontCode: 'monospace', // Text colors textColor: 'rgb(255, 250, 250)', textInverseColor: 'white', // Toolbar default and active colors barTextColor: 'white', barSelectedColor: 'white', barBg: 'rgb(246, 153, 190)', // Form colors inputBg: 'white', inputBorder: 'silver', inputTextColor: 'black', inputBorderRadius: 4, brandTitle: 'Pink Panther Storybook', brandUrl: 'https://example.com', brandImage: 'https://botw-pd.s3.amazonaws.com/styles/logo-thumbnail/s3/0019/2539/brand.gif?itok=97rSwE0a', }); Sau đó, ta có thể tiếp tục và nhập pinkPanther.js vào file cấu hình sách truyện của ta .
import pinkPanther from './pinkPanther'; addParameters({ options: { theme: pinkPanther } }) 
Điều này cho ta một chủ đề hoàn toàn khác như đã thấy trong hình trước.
Bước 5 - Triển khai Storybook
Một tính năng đi kèm với Storybook là thực tế là ta có thể triển khai truyện của bạn dưới dạng một trang web tĩnh mà ta có thể triển khai cho bất kỳ tùy chọn lưu trữ nào mà ta chọn. Để cấu hình điều này, ta cần thêm tập lệnh build-storybook vào package.json của ta :
{ "scripts": { "build-storybook": "build-storybook -c .storybook -o .out" } } Những gì tập lệnh này sẽ làm là nó sẽ xây dựng folder sách truyện của ta thành một ứng dụng web tĩnh và xuất nó trong folder .out . Ta có thể chạy tập lệnh này và triển khai nội dung của folder .out khi quá trình xây dựng hoàn tất. Tiếp tục và chạy lệnh:
- npm run build-storybook
Khi quá trình xây dựng hoàn tất, bây giờ ta có thể triển khai nội dung của folder bằng cách sử dụng bất kỳ lưu trữ nào mà ta lựa chọn. Để kiểm tra tính năng này hoạt động local , ta có thể chạy lệnh sau và lệnh này sẽ phân phát nội dung của folder dưới dạng một trang web tĩnh:
- npx http-server .out
Kết luận
Trong bài viết này, ta đã học cách xây dựng các thành phần tương tác bằng Storybook và React. Bây giờ ta đã thấy những gì có thể với Storybook và cũng có hướng dẫn về cách tích hợp storybook làm thư viện thành phần trong các dự án phản ứng của ta . Phát triển với Storybook đóng role như một nguồn chân lý duy nhất cho cả nhà phát triển và nhà thiết kế làm việc trong một group và nó có thể được tích hợp với các khuôn khổ giao diện user khác. Bài đăng này chỉ trình bày cách nó được sử dụng với React.
Trong trường hợp bạn đang tìm kiếm hướng dẫn về các khung công tác khác, vui lòng xem tài liệu chính thức của Storybook . Bạn cũng có thể tìm thấy mã cho bài viết này trên GitHub .
Các tin liên quan
