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(<App />, 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: <HomePage />
                    }
                ]}
            >
                <SidebarMenu>
                    <MenuItem href="#/home" icon="icon-home" label="My Page" isHome />
                </SidebarMenu>
            </Grid>
        );
    }
}

export default App;

Die Property expandSidebar von <Grid /> sorgt dafür, dass die Sidebar standardmäßig im Desktop-Modus erweitert ist.
Mit pages registrierst du alle annavigierbare Unterseiten. Bei deinen Seiten legst du mit name fest, unter welcher Adresse die Seite erreichbar ist (bei „home“ wird die Seite über „#/home“ erreichbar sein). component definiert die Seiten-Komponente. <HomePage /> müssen wir noch im nächsten Schritt anlegen und importieren.

Die Grid-Komponente lässt sich noch durch viele weitere Properties anpassen. Schau dir dafür am besten die Dokumentation an.

Mit <SidebarMenu /> und <MenuItem /> wird die Seitenleiste mit Links zu den Unterseiten gefüllt.

Deine erste Seite

<HomePage /> ist die Komponete, die standardmäßig als erste Seite geladen wird. Diese erstellen wir jetzt. Lege im src-Ordner die Datei HomePage.js an. Auch für das Erstellen von Seiten bietet die Visual Studio Code-Extension zwei verschiedene Snippets:

Wir nutzen in diesem Fall ui-new-page und nennen die Komponente „HomePage“. Dabei kommt folgender Code raus:

import React from "react";
import { Page, Body, Header, HeaderTitle } from "uisum";

class HomePage extends React.Component {
    render() {
        return (
            <Page>
                <Header>
                    <HeaderTitle logo={window.logo} appTitle={window.appTitle}>
                        HomePage
                    </HeaderTitle>
                </Header>

                <Body>

                </Body>
            </Page>
        );
    }
}

export default HomePage;

Als nächstes muss die Seite noch in der App.js-Datei importiert werden:

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

import HomePage from "./HomePage";

class App extends React.Component {
    render() {
        return (
            <Grid
                expandSidebar
                pages={[
                    {
                        name: "home",
                        component: <HomePage />
                    }
                ]}
            >
                <SidebarMenu>
                    <MenuItem href="#/home" icon="icon-home" label="My Page" isHome />
                </SidebarMenu>
            </Grid>
        );
    }
}

export default App;

Jetzt bist du startklar

Starte jetzt deine App mit

npm start

und die Seite wird in deinem Standardbrowser geöffnet.

Jetzt hast du eine perfekte Basis, um deine App-Idee umzusetzen. Nutze die Uisum Dokumentation um alle weiteren Komponenten zu entdecken.