Wir haben React, Storybook und Tailwind für die Zusammenarbeit in diesem Abschnitt eingerichtet.

Konfiguration

React-App erstellen!

Wir werden create-react-app verwenden, um ein React-Projekt für uns zu booten. Aktualisieren Sie my-app auf Ihren Projektnamen und führen Sie den folgenden Befehl aus.

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

Es gibt viele andere interessante Vorlagen wie redux-typescript . Diese CRA-Vorlage enthält ein Demoprojekt, das einen guten Überblick darüber gibt, was wir mit Redux machen können. Das ist besonders hilfreich, wenn Sie Redux noch nicht kennen oder Redux nach der Überarbeitung des Redux-Toolkits erneut besuchen. Vor diesem Hintergrund ermutige ich Sie, die Redux-Vorlage von CRA zu erstellen und damit herumzuspielen. Da wir Redux in diesem Tutorial ausgiebig verwenden werden.

Die Ausführung des obigen Befehls kann einige Minuten dauern. Wenn Sie fertig sind, fahren Sie mit dem nächsten Schritt fort.

Märchenbuch

Storybook hat mein mentales Modell, wie ich Webkomponenten sehe, optimiert. Die Entwicklung von Komponenten in einer isolierten Umgebung erfordert möglicherweise etwas Aufwand bei der Einrichtung und Wartung, liefert uns jedoch dauerhafte Ergebnisse.

• Dadurch können wir uns jeweils auf eine Komponente konzentrieren.
• Wir werden mehr autarke Komponenten bauen, die sich darauf konzentrieren, was sie bekommen und was sie rendern.
• Lassen Sie uns die extremen Prop-Szenarien testen. Szenarien wie wird diese Karte reagieren, wenn sie eine wirklich lange Zeichenfolge für einen Namen erhält?

Chromatic bietet ein enormes Sicherheitsgefühl vor unerwarteten UI-Änderungen. Es schützt uns vor „Eine CSS-Datei aktualisiert und es hat verdammt viele andere Komponenten kaputt gemacht!“ Szenarien.

Bei jedem Push müssen wir sofort die UI-Änderungen genehmigen. Es wird wirklich schwierig sein, sie selbst manuell zu fangen. Ich ermutige Sie, dies zu überprüfenhttps://www.chromatic.com/mehr wissen. Lassen Sie uns mit der Installation des Storybooks in unserer Anwendung fortfahren.

npx sb init

Rückenwind

Die offizielle Rückenwind-Dokumentation für CRA ist gut geschrieben. Befolgen Sie die Schritte in der unten verlinkten Dokumentation sorgfältig, und Sie werden mit Ihrem Rückenwind-Setup gut sein.

Fühlen Sie sich frei zu kommentieren, wenn Sie Probleme bei der Rückenwindinstallation haben.

Anmerkungen:

1. Verwenden Sie die VSCode-Erweiterungen Headwind von Ryan Heybourn . (Sortiert die Klassen eigensinnig) und Tailwind CSS IntelliSense von Brad Cornes . (Bietet IntelliSense von Rückenwindklassen)
2. Craco: Wir werden Craco verwenden, um einige der Webpack-Konfigurationen zu überschreiben, ohne einfach unser React-Scripts-Setup auszuwerfen.

Ich habe die App.tsx auf die untenstehende einfache Komponente reduziert.

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

export default App

npm start

Rückenwind mit Bilderbuch

Da das Storybook eine separate Entwicklungsumgebung nutzt, müssen wir auch für unser Storybook Rückenwind aufbauen.

Schritt 1 : Fügen Sie die webpackFinal-Eigenschaft in den .storybook/main.js-Exporten hinzu.

// .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
  },
})

Schritt 2 : Importieren Sie index.css in die Datei .storybook/preview.js.

// .storybook/preview.js

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

npm run storybook

Der npx sb init hat uns eine Beispielseite und eine Einführung gegeben, wie oben gezeigt. Ich ermutige Sie, die in der Einleitung angegebenen Links zu überprüfen.

Sehen wir uns die Komponenten Button, Header und Page an. Die drei sind verbunden. Die Schaltfläche hat einige Variationen. Die Header-Komponente verwendet die Schaltfläche. Die Page-Komponente verwendet die Header-Komponente zusammen mit der Schaltfläche.

Aufgabe:

Jede Geschichte ist isoliert. Stellen Sie sich diese Situation vor und denken Sie darüber nach.

1. Die untergeordnete Komponente erhält 5 Argumente .
2. Die übergeordnete Komponente erhält 5 Argumente . Außerdem muss die übergeordnete Komponente die Argumente übernehmen, die für die untergeordnete Komponente erforderlich sind, die sie rendert.

Erkunden Sie das Demo-Komponenten-Storybook, das die Antwort liefert.

Vielen Dank.