Start Building Your Web-App

This documentation will guide you throughout building your web-app, providing the steps and procedure to customize.

Contents discussed in this section:

How to add a new Component?
How to add a new Stylesheet?

How to add new Component

Create a new folder, say NewComponent and place it under /src/components/.
Create a new file index.js , within this folder.
Name the class the same as that of the folder name.

class NewComponent extends Component {
    . . .
    . . .
}

How to add new Stylesheet

Create a new file styles.js , place it under /src/components/NewComponent/

Using Material UI

import { makeStyles } from "@material-ui/core/styles";
export const useStyles = makeStyles((theme) => ({
      . . .
}));

Using Styled Components

import styled from "styled-components";
export const NewStyle = styled.div`
    . . .
;

import the newly created StyleSheet into the Component.

import styles from './styles';
class NewComponent extends Component {
    . . .
}

Theming Your Web-App

Customizing the web-app will be a cakewalk for you. That is due to the fact, we provide you well prepared code shape. This makes it quite simple to be able to dig through the code and hence without problems customizable.

The theme has categorized its screens into different sections.
The theme has a separate file inclusive of color scheme.
The theme also allows you to customize the name for your web-app.

Change Web-App Color Scheme

The Dashboard comes with its color scheme. To change scheme:

Change in file src/constants/color.js

import styles from './styles';
export const color {
     primary: ”#ED473F”
    secondary: ”#CA3B3B”
}

Rename Web-App

CRA Renaming any Create React App is very easy. You just need to rename the name attribute in package.json.

{
        "name":"Dating App",
        . . .
}

Guide