Configuramos react, storybook e tailwind para trabalhar juntos nesta seção.

Configurar

Crie o aplicativo React!

Vamos usar create-react-app para inicializar um projeto react para nós. Atualize o my-app para o nome do seu projeto e execute o comando abaixo.

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

Existem muitos outros modelos interessantes como redux-typescript . Este modelo CRA vem com um projeto de demonstração que dá uma boa visão geral do que podemos fazer com redux. Isso é especialmente útil se você é novo no redux ou mesmo revisitando o redux após a reforma do redux-toolkit. Com isso dito, encorajo você a criar o modelo redux do CRA e brincar com isso. Como estaremos usando redux neste tutorial extensivamente.

O comando acima pode levar alguns minutos para ser concluído. Feito isso, prossiga com o próximo passo.

Livro de histórias

O Storybook simplificou meu modelo mental de como vejo os componentes da web. Desenvolver componentes em um ambiente isolado pode exigir um pouco de esforço para configurar e manter, mas nos fornecerá resultados duradouros.

• Isso nos permite focar em um componente de cada vez.
• Construiremos componentes mais autossuficientes com foco no que eles obtêm e no que renderizam.
• Vamos testar os cenários extremos de props. Cenários como como este cartão reagirá se receber uma string muito longa para um nome?

O Chromatic oferece uma enorme sensação de segurança contra as alterações inesperadas da interface do usuário. Ele nos protege de “Atualizou um arquivo css e quebrou muitos outros componentes!” cenários.

Em cada push, exige imediatamente que aprovemos as alterações da interface do usuário. Será muito difícil pegá-los manualmente. Eu encorajo você a verificarhttps://www.chromatic.com/Para saber mais. Vamos prosseguir para instalar o livro de histórias em nosso aplicativo.

npx sb init

Vento de cauda

A documentação oficial do vento de cauda para o CRA está bem escrita. Siga as etapas cuidadosamente na documentação vinculada abaixo e você ficará bem com sua configuração de vento de cauda.

Sinta-se à vontade para comentar se tiver problemas ao fazer a instalação do tailwind.

Notas:

1. Use as extensões do VSCode Headwind de Ryan Heybourn . (Classifica as classes de forma opinativa) e Tailwind CSS IntelliSense de Brad Cornes . (Fornece o IntelliSense de classes de vento de cauda)
2. Craco: usaremos o craco para substituir algumas das configurações do webpack sem simplesmente ejetar nossa configuração de scripts de reação.

Reduzi o App.tsx para o componente simples abaixo.

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

export default App

npm start

Vento de cauda com livro de histórias

Como o livro de histórias usa um ambiente de desenvolvimento separado, também precisamos configurar o vento de cauda para nosso livro de histórias.

Etapa 1 : Adicione a propriedade webpackFinal nas exportações .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
  },
})

Etapa 2 : Importe index.css para o arquivo .storybook/preview.js.

// .storybook/preview.js

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

npm run storybook

O npx sb init , nos deu uma página de amostra e introdução como mostrado acima. Convido você a verificar os links fornecidos na introdução.

Vamos visitar os componentes Button, Header e Page. Os três estão conectados. O botão tem algumas variações. O componente de cabeçalho usa o botão. O componente Página usa o componente de cabeçalho junto com o botão.

Tarefa:

Toda história é isolada. Imagine essa situação e pense a respeito.

1. O componente filho recebe 5 argumentos .
2. O componente pai recebe 5 argumentos . Além disso, o componente pai precisa receber os argumentos necessários para o componente filho que está renderizando.

Explore o livro de histórias dos componentes de demonstração que forneceu a resposta.

Obrigada.