Create React App Integration

This is a step by step guide for how to simply integrate Dashboard UI Kit into your CRA project. You will also find the full example source code in the zipped file bundle.

Installation

This is a guide that follows instructions on the official github repository.

npx create-react-app dashboard-ui-kit-demo
cd dashboard-ui-kit-demo
// to check if it's working
npm start

Adding new files

All should be fine, so now let's copy some files. We will simplify this to copying the whole compiled file. In the zipped package, you will find necessary folder in your_unzipped_folder/dist/lib in which you will find index.js and styles.css files. We are going to copy these files into our newly created project into dashboard-ui-kit-demo/src/@uik

Simplifying our imports

We want to make the code a little bit more convenient. We could probably use dot annotation to import files, however we can create an alias, so we don't have to write and guess how many dots we have to add like this

import { Component } from '../../@uik'

Our goal is to minize this so we can import components from our library like so wherever we are importing our components:

import { Component } from '@uik'

This can be easily achived with creating file with name '.env' in our root folder of the project. So, let's create it and the content of the file is:

NODE_PATH=src

CRA will create aliases for us so whatever is in src folder, you can reach it without wiriting '.../' dot annotation. Now we are ready to importing some components from the UI Kit!

New file structure

Our file structure in newly created CRA app looks something like this (remember if you are alerady running npm start, you need to kill the process and run it again to restart):

dashboard-ui-kit-demo
├── README.md
├── node_modules
├── package.json
├── .env // <--- new
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── @uik
    │   ├── index.js // <--- new
    │   └── styles.css // <--- new
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

Importing UIK components

Let's modify the src/App.js file, we want to display a UikButton on the example page. We just have to add three extra lines. The full code looks like this:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import { UikButton } from '@uik' // <--- new
import '@uik/styles.css' // <--- new

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
          <br />
          <UikButton primary>UikButton</UikButton> // <--- new
        </header>
      </div>
    );
  }
}

export default App;

As you can see, we imported the UikButton component, as well as the styles. Note that you have to import the styles only once in the root of the application! Check more here.

Let's run it

Before we actually start, we need to install dependencies. Then finally we can start the project and that's it!

npm install --save classnames
npm start