Developing mit React

Dieses Tutorial führt dich durch die Erstellung einer React-App mit dem Cranach Design System.

Zielgruppe
Vorraussetzungen
Jetzt starten

Zielgruppe

Dieses Tutorial richtet sich an Personen die im Web entwicklen möchten. Konkret richtet sich dieses Tutorial an Personen die React-UI-Pattern/Komponenten in ihre Webseite integrieren möchten. Wenn du direkt zum Code möchtest, kannst du dieses Tutorial überspringen und zu Jetzt loslegen

Vorraussetzungen

React

Das ist ein Tutorial für die Webentwicklung in dem Cranach Design React-UI-Pattern integriert werden. Wenn du noch nicht ganz vertraut mit React bist, lese zuerst das offizielle Intro des React-Tutorials. Eine Schritt-für-Schritt Anleitung für React gibt es ebenfalls.

Npm

In diesem Tutorial wird Npm als Dependency Manager verwendet. Stelle sicher, dass du Npm installiert hast bevor du mit dem Tutorial beginnst, damit du Schritt für Schritt vorgehen kannst.

React Projekt erstellen und starten

Erstelle ein React-Projekt (Create React App) über die Kommandozeile.

npx create-react-app your-app-name

Navigiere anschließend zu deinem Projekt.

cd your-app-name

Starte das Projekt.

npm start

Das Projekt kannst du mit der Tastenkombination ctrl + c beenden.

Ressourcen installieren

cranach-design-react-pattern - React UI Pattern

Installiere React UI-Pattern über die Kommandozeile

npm install cranach-design-react-pattern

Ressourcen importieren

cranach-design-react-pattern - React UI Pattern

Importiere einen Button aus dem Cranach Design in dein React-Projekt, um zu testen, ob das Dependency odnungsgemäß funktioniert. Importiere oben in der App.js folgendes:

src/App.js
import { Button } from 'cranach-design-react-pattern';

Ersetze in der App.js-Komponente den Bereich zwischen den ersten div:

src/App.js
<div>
  ...
</div>

mit:

src/App.js
<Button/>

Herzlichen Glückwunsch, du hast deine erstes Pattern importiert! Auf der Seite sollte eine Button im Cranach-Stil angezeigt werden. Weitere Informationen zu diesem Pattern oder zu anderen Pattern findest du unter dem Punkt Pattern und Komponenten

Developing: Developer Ressourcen

Design: Überblick