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.
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";
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:
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:
ui-new-page
– Creates new empty pageui-new-page-action-menu
– Creates new page withActionMenu and ActionMenuItem.
In this case we use ui-new-page
and call the component “HomePage”.
Next step is to import the page into App.js with:
import HomePage from "./HomePage";
Now you are ready to go
Start your app now with
npm start
and the site opens in your default browser.
Now you have a perfect base to implement your app idea. Use the Uisum documentation to discover all other components.
Originally published at https://neue.st on April 17, 2019.