cero components

Cero -Komponenten

0️⃣ Cero a producción ist ein Projekt von Live -Coding -Sitzungen, bei denen wir AA Productivity Management App namens Reto von Grund auf Produktion entwickeln.

Die Idee dahinter

Das Ziel dieser Sitzungen ist es, eine authentische Entwicklererfahrung zu bieten, bei der wir uns mit den unzähligen Entscheidungen befassen, die ein typischer Programmierer täglich mit JavaScript und anderen relevanten Tools trifft. Die Teilnehmer werden fehlgeschlagene Tests, Code -Refactoring und die Verwendung von Suchmaschinen wie Google und Stackoverflow beobachten. Darüber hinaus können die Teilnehmer erwarten, den Prozess zu genießen und die Herausforderungen der Benennung von Variablen und Funktionen zu beobachten.

Überprüfen Sie die Videositzungen dieses Produkts hier und folgen Sie mir weiter

Inhaltsverzeichnis

• Erste Schritte
• Storybook
• Ausführen des Projekts lokal ausführen
• Die Tests ausführen
• Methoden
  • Atomdesign
  • Definition von Molekülen

Erste Schritte

Sie müssen react and react-dom installed dass dies Peer-Abhängigkeiten dieses Projekts sind.

1. Installation

Verwenden von NPM

npm install @glrodasz/components

Mit Garn

yarn add @glrodasz/components

2. Verwenden der Bibliothek

• Komponente importieren

 import { Icon , ButtonIcon } from '@glrodasz/components'

• Komponente verwenden

 < ButtonIcon icon = "arrowRight" type = "primary" >
  Cowards Agreed
</ ButtonIcon > 

Storybook

Überprüfen Sie den Rest der verfügbaren Komponenten in unserem Storybook

Ausführen des Projekts lokal ausführen

Befolgen Sie diese Schritte, um start the project

1. Klon -Repository. git clone https://github.com/glrodasz/cero-components.git
2. Installieren Sie Abhängigkeiten im Projektordner, das yarn oder npm install
3. Führen Sie das Storybook mit yarn dev oder npm run dev aus. Dieser Befehl erstellt die Token und das offene Storybook.

Die Tests ausführen

1. Run yarn run test oder npm run test
2. Um die Tests am Laufen zu halten, laufen Sie yarn run test:watch

Methoden

Atomdesign

Für dieses Projekt wird die Methodik verwendet, um Komponenten als Atomdesign zu erstellen. Die Komponentenbibliothek erstellt nur Atome und Moleküle mit den folgenden Definitionen:

Atome Definition

Für dieses Projekt ist ein Atom eine Komponente, die aus einem einzigartigen Atom mit oder ohne HTML -Tags oder nur HTML -Tags besteht.

Definition von Molekülen

Für dieses Projekt ist ein Molekül eine Komponente, die aus mindestens 2 verschiedenen Atomen besteht.