React Projekt und eigenes React-Package

Einleitung

Sie machen eine Komponente mit einem React-Projekt für andere React-Projekte zugänglich.

Beispiel:

Für ein Projekt wurde eine eigene Bargraph-Komponente erstellt.
Oben sehen Sie den Bargraphen eingebettet in der View.
Und unten Details zur Komponente.

Nun will man diese HorizontalBarGraph-Komponente anderen Projekten zugänglich machen.
Die Komponente wird als externes Packages bereitgestellt und via npm unter node_modules hinzugefügt. (Name wurde bewusst auf growing-bar-graph geändert.)

Projekt-Skizze

Ziel

• Sie können das Vorgehen für das Erstellen von eines React-Packages und den Import in ein React-Projekt erklären.
• Sie können ein React-Package mit mindestens einer Komponente erstellen.
• Sie können das React-Package anderen Projekten zur Verfügung stellen.
• Sie können das React-Package in ein Projekt einbinden.

Aufgabe: Recherche: React-Komponente als Packages bereitstellen

Recherchieren Sie, wie Sie eine React-Komponenten für andere zur Verfügung stellen können, so dass diese über ein React-Package in node_modules importiert werden kann.
Ein Einstieg kann diese Tutorial sein: Creating and Publishing an NPM React Component

Aufgabe: Recherche: Alternatives publish on github

Wie kann ich nun meine React-Package auf github publizieren. Ein Einstieg kann dieses Tutorial sein: Package auf github publizieren

Aufgabe: React-Package erstellen und anwenden

• Sie erstellen ein React-Package mit mindestens einer Komponente.
• Sie publizieren diese Package (auf npmjs oder github).
• Dann erstellen Sie ein zweites React-Projekt und nutzen Ihr React-Package (via node_Packages).
• Dann nutzen Sie zusätzlich ein React-Package von Ihren Lernpartnern via node_modules in Ihrem Projekt.
• Hilfe kann meine Anleitung sein: React Package erstellen

Ergebnissicherung

• Dokumentieren Sie Ihre Umsetzung.
• Es muss keine grosse Doku sein, die Essenz reicht.
• Es muss deutlich zeigen, was Sie gemacht haben.
  • klare Überschriften, Screenshots und prägnate Beschriftungen.
  • Ihr React-Package mit mindestens einer Komponente
  • Das auf npmjs oder github veröffentlichete Package.
  • Ihr Projekt mit dem eingebundenen React-Package von Ihnen.
  • Ihr Projekt mit dem eingebundenen React-Package vom Lernpartner.
• Abgabe als nur ein einzelnes PDF-Dokument