Tutorial: New React project with Uisum

With Uisum I arranged a library, which should make it easy to create a new Web App project with React. As a base, Uisum uses the popular CSS framework Bootstrap and provides a number of components that are helpful for modern Mobile First applications.

Lars Gerrit Kliesing / LGK

Published in

LGK Blog

4 min readApr 17, 2019

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.

This tutorial will give you an introduction to creating a new Uisum project. Prerequisite is that you have at least a little experience with the development and workflow with React. I also recommend that you use the code editor Visual Studio Code, because in the tutorial I use the extension Uisum Snippets.

Create React App

The easiest way to create a React project is with Create React App.
Install the latest version globally with this command:

npm i -g create-react-app

In the console, navigate to where your project is to be created and run the following command to create the project:

create-react-app my-uisum-app

You can now open your new project by using this command with Visual Studio Code:

code my-uisum-app

The next step is optional and depends on how you favor the formatting of your code. The code created by create-react-app is formatted by default to use two spaces for indents and single-quotes (') for strings. I prefer four spaces for indents and double quotation marks (") for strings in my code, so I wrote the lgk-code-format script, which automatically translates code into that format.
This is how to install the script:

npm i -g lgk-code-format

You should now run the script within Visual Studio Code. After opening the project, open the terminal.
In the terminal now do this:

lgk-code-format

Then your code should be formatted accordingly and you have a fresh React project.

With npm start you start the development server. All other information can also be found on the website of Create React App.

Let’s get started with Uisum

First, you should install the Uisum Snippet Extension. Snippets in Visual Studio Code are shortcuts that can help you save time while developing.

Then install Uisum in your project with:

npm i -S uisum

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

Add the stylesheet from Uisum by including this line in src/index.js:

import "uisum/dist/style.css";

**src/index.js** should now look like this

The backbone

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:

The Grid component is the backbone of Uisum. In your project, remove the entire code from the src/App.js file and use the snippet ui-app to get the following code:

Click here to get the code, so can copy it

The property expandSidebar of <Grid /> ensures that the sidebar is extended by default in the desktop mode.
With pages you register all navigable subpages. With your pages, you specify with name, under which address the page can be reached (with “home” the page will be accessible via “#/home”). component defines the page component. <HomePage /> we have to create and import in the next step.

The Grid component can be adjusted by many other properties. Take a look at the documentation for more information.

With <SidebarMenu /> and <MenuItem /> the sidebar is filled with links to the subpages.

Your first page

<HomePage /> is the component loaded by default as the first page. We will create it now. Put the file HomePage.js in the src folder. The Visual Studio Code Extension also offers two different snippets for creating pages: