Tutorial: Neues React-Projekt mit Uisum

Mit Uisum habe ich eine Library zusammengestellt, die es (ursprünglich in erster Linie mir selbst) erleichtern soll, ein neues Web-App-Projekt mit React zu erstellen. Als Basis nutzt Uisum das beliebte CSS-Framework Bootstrap und liefert eine Reihe an Komponenten, die für moderne Mobile-First-Anwendungen hilfreich sind.

Beitragsbild: Pixabay, Quelle: Pexels

Dieses Tutorial soll dir eine Einführung darin geben, ein neues Uisum-Projekt zu erstellen. Voraussetzung ist, dass du zu mindest ein wenig Erfahrungen mit der Entwicklung und dem Workflow mit React hast. Ich empfehle dir außerdem, den Code-Editor Visual Studio Code zu benutzen, da ich im Tutorial die Extension Uisum Snippets verwende.

Create React App

Die einfachste Art, ein React-Projekt zu erstellen, ist mit dem Tool Create React App.
Installiere die neueste Version global mit diesem Befehl:

npm i -g create-react-app

Navigiere in der Konsole dann dorthin, wo dein Projekt erstellt werden soll und führe folgenden Befehl aus, um das Projekt anzulegen:

create-react-app my-uisum-app

Du kannst dein neues Projekt jetzt durch diesen Befehl mit Visual Studio Code öffnen:

code my-uisum-app

Der folgende Schritt ist optional und ist davon abhängig, wie du die Formatierung deines Codes favorisierst. Der Code, der von create-react-app angelegt wird, ist standardmäßig so formatiert, dass für Einrückungen zwei Leerzeichen und für Strings einfache Anführungszeichen (') verwendet werden. Ich bevorzuge bei meinem Code vier Leerzeichen für Einrückungen und doppelte Anführungszeichen (") für Strings. Deswegen habe ich das Script lgk-code-format geschrieben, der automatisch Code in dieses Format umwandelt.
So installierst du das Script:

npm i -g lgk-code-format

Ausführen solltest du das Script jetzt innerhalb von Visual Studio Code. Nachdem du das Projekt geöffnet hast, öffne das Terminal (Windows: Strg + Ö, macOS: Shift + Control + ´).
Im Terminal führe jetzt das aus:

lgk-code-format

Danach sollte dein Code entsprechend formatiert sein und du hast ein frisches React-Projekt.

Mit npm start startest du den Entwicklungsserver. Alle weiteren Infos findest du auch auf der Webseite von Create React App.

Los geht's mit Uisum

Als erstes solltest du die Uisum Snippet Extension installieren. Snippets in Visual Studio Code sind Kurzbefehle, mit denen du beim Entwickeln viel Zeit sparen kannst.

Anschließend installiere Uisum in deinem Projekt mit:

npm i -S uisum

Füge das Stylesheet von Uisum hinzu, indem du diese Zeile in src/index.js einfügst:

import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import * as serviceWorker from "./serviceWorker";

import "uisum/dist/style.css";

ReactDOM.render(, document.getElementById("root"));

// If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();

Das Grundgerüst

Die Grid-Komponente ist das Grundgerüst von Uisum. Entferne in deinem Projekt in der Datei src/App.js den gesamten Code und nutze das Snippet ui-app und du erhältst folgenden Code:

import React from "react"; import { Grid, SidebarMenu, MenuItem } from "uisum";

class App extends React.Component { render() { return ( <Grid expandSidebar pages={[ { name: "home", component:} ]} >