Chúng tôi thiết lập phản ứng, sách truyện và tua nhanh để làm việc cùng nhau trong phần này.

Cài đặt

Tạo ứng dụng React!

Chúng tôi sẽ sử dụng ứng dụng tạo-phản ứng để khởi động một dự án phản ứng cho chúng tôi. Cập nhật ứng dụng của tôi thành tên dự án của bạn và chạy lệnh dưới đây.

npx create-react-app my-app --template cra-template-pwa-typescript

Có nhiều mẫu thú vị khác như redux-typecript . Mẫu CRA này đi kèm với một dự án demo cung cấp một cái nhìn tổng quan tốt về những gì chúng ta có thể làm với redux. Điều đó đặc biệt hữu ích nếu bạn mới làm quen với redux hoặc thậm chí truy cập lại redux sau khi trang điểm lại bộ công cụ redux. Với điều đó đã nói, tôi khuyến khích bạn tạo mẫu redux của CRA và thử nghiệm với điều đó. Vì chúng ta sẽ sử dụng rộng rãi redux trong hướng dẫn này.

Lệnh trên có thể mất vài phút để hoàn thành. Sau khi thực hiện xong, bạn tiến hành bước tiếp theo.

Quyển truyện

Storybook đã sắp xếp hợp lý mô hình tinh thần của tôi về cách tôi nhìn thấy các thành phần web. Việc phát triển các thành phần trong một môi trường biệt lập có thể tốn một chút công sức để thiết lập và duy trì nhưng nó sẽ mang lại cho chúng ta kết quả lâu dài.

• Nó cho phép chúng tôi tập trung vào một thành phần tại một thời điểm.
• Chúng tôi sẽ xây dựng các thành phần tự cung tự cấp hơn tập trung vào những gì chúng nhận được và những gì chúng hiển thị.
• Hãy để chúng tôi kiểm tra các tình huống chống đỡ cực đoan. Các tình huống chẳng hạn như thẻ này sẽ phản ứng như thế nào nếu nó nhận được một chuỗi thực sự dài cho một cái tên?

Chromatic mang lại cảm giác an toàn rất lớn trước những thay đổi giao diện người dùng không mong muốn. Nó bảo vệ chúng tôi khỏi "Đã cập nhật tệp css và nó đã phá vỡ rất nhiều thành phần khác!" các tình huống.

Trong mỗi lần thúc đẩy, Nó ngay lập tức yêu cầu chúng tôi phê duyệt các thay đổi về giao diện người dùng. Sẽ thực sự khó để tự mình bắt chúng bằng tay. Tôi khuyến khích bạn kiểm trahttps://www.chromatic.com/để biết thêm chi tiết. Chúng ta hãy tiến hành cài đặt truyện trong ứng dụng của mình.

npx sb init

Gió cùng chiều

Các quan chức tài liệu tailwind cho CRA cũng được viết. Hãy làm theo các bước một cách cẩn thận trong tài liệu được liên kết bên dưới và bạn sẽ thành công với việc thiết lập tailwind của mình.

Vui lòng bình luận nếu bạn gặp khó khăn khi cài đặt tailwind.

Ghi chú:

1. Sử dụng phần mở rộng VSCode Headwind của Ryan Heybourn . (Sắp xếp các lớp theo cách cố ý) và Tailwind CSS IntelliSense của Brad Cornes . (Cung cấp IntelliSense của các lớp tailwind)
2. Craco: chúng tôi sẽ sử dụng craco để ghi đè một số cấu hình webpack mà không chỉ cần loại bỏ thiết lập tập lệnh phản ứng của chúng tôi.

Tôi đã giảm App.tsx xuống thành phần đơn giản bên dưới.

function App() {
  return (
    <div className='p-5 bg-blue-200 text-blue-900 shadow-lg'>
      Hello World
    </div>)
}

export default App

npm start

Đuổi theo sách truyện

Vì cuốn truyện sử dụng một môi trường phát triển riêng biệt, chúng tôi cũng phải thiết lập luồng gió riêng cho cuốn truyện của mình.

Bước 1 : Thêm thuộc tính webpackFinal trong tệp xuất .storybook / main.js.

// .storybook/main.js

const path = require('path')

module.exports = {
  stories: [
    '../src/**/*.stories.mdx', 
    '../src/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: [
              require('tailwindcss'),
              require('autoprefixer'),
            ],
          },
        },
      ],
      include: path.resolve(__dirname, '../'),
    })
    return config
  },
})

Bước 2 : Nhập index.css vào tệp .storybook / preview.js.

// .storybook/preview.js

import "../src/index.css"
// There are code after this...

npm run storybook

Các npx sb init , đã cho chúng ta một trang mẫu và giới thiệu như trên. Tôi khuyến khích bạn kiểm tra các liên kết được đưa ra trong phần giới thiệu.

Hãy truy cập vào các thành phần Nút, Tiêu đề và Trang. Cả ba được kết nối với nhau. Nút có một vài biến thể. Thành phần tiêu đề sử dụng nút. Thành phần Trang sử dụng thành phần tiêu đề cùng với nút.

Nhiệm vụ:

Mọi câu chuyện đều bị cô lập. Hãy tưởng tượng tình huống này và suy nghĩ về nó.

1. Thành phần con có 5 đối số .
2. Thành phần mẹ nhận được 5 đối số . Ngoài ra, thành phần mẹ cần lấy các đối số cần thiết cho thành phần con mà nó đang hiển thị.

Khám phá câu chuyện về các thành phần demo đã cung cấp cho câu trả lời.

Cảm ơn bạn.