ReactJS Version

Shreyu - React version is based on the popular frameworks Bootstrap and React. It uses the top-notch libraries, including Redux, Redux-Saga, Reactstrap, React Select, Availity reactstrap Validation and many more. The super clean and flexible layouts would enable you to easily build web applications including a quick MVP or solid product. The coding style, documentation, folder structure and best practices followed in React version along with inbuilt authentication, apps and pages, would help you to quickly learn and implement your project.

What's included

Extract the zip file you received after purchase and you would find the exact below files and folders:

shreyu/react --
  • ├── src
    • ├── assets
      • ├── fonts - fonts files
      • ├── images- images files
      • ├── scss - all scss (sass) files
    • ├── components - Reusable components
    • ├── constants - App level constants
    • ├── helpers - Helper Utilities - including fake-backend, api utils, etc
    • ├── layouts
      • ├── Auth - Default layout - having no topbar, sidebar or footer - mainly used in auth pages
      • ├── Vertical- Left side navbar with topbar, footer and right side bar
      • ├── Horizontal - Horizontal Topbar and top navbar, footer and right side bar
    • ├── pages - All the pages available in theme
    • ├── redux - Redux folder containing module wise actions, reducers, sagas, store, etc
    • ├── Routes - Application router implementation
  • ├── public - public files
  • ├── App.js - Main application component
  • ├── package.json
  • ├── README.md
Pre-requisites

Shreyu React is created using Create React App (CLI) .

  1. Nodejs

    Make sure to have the Node.js installed & running in your computer. If you already have installed nodejs on your computer, you can skip this step.

  2. Yarn

    Yarn is a package manager and dependency management. It allows easy management of all the third party dependency and plugins.

    Make sure to have the Yarn installed & running in your computer. If you already have installed yarn on your computer, you can skip this step.

  3. Git

    Make sure to have the Git installed & running in your computer. If you already have installed git on your computer, you can skip this step

Getting Started

Once you have all pre-requisites installed and running, you are ready to get start with the template. First, go to the root folder (the folder created when you extract the zip) where the package.json is available and run the following command:

yarn install

This will download all required dependencies defined in package.json file. Once it finished running the command, it will generate a folder name node_modules where you'll be able to see downloaded packages.

Now you're good to go in running the template and view it in browser by running the command below:

yarn start

The template should be up and running in your browser.

You can also create a production ready build by running the command below:

yarn build

This will create a folder named build in same folder. You might want to take this folder and deploy on root of your web server.

Routing

Shreyu React is having routing setup based on React-Router . We have solid routing way already implemented in theme which would make your job easy when dealing with any routing related changes.

You can easily add, change or remove any route by simply making changes described below:

  1. Open src/routes/index.js file, declare your component. E.g.

    const Dashboard2 = React.lazy(() => import('./views/dashboards/Dashboard2')); .

  2. And make sure to add the entry for same with path and other properties like name, component, route, and roles in constants routes declared there. E.g.

    {path: '/dashboard2', name: 'Dashboard2', component: Dashboard2, route: PrivateRoute, roles: ['Admin'] },

    Each of these properties are explained below:

    • path - Url relative path
    • name - Name of your route
    • component - Actual component name which would get rendered when user visits the path
    • route - An actual route component which would get used. This helps to restrict the non authenticated and unauthorized users to access this path. There are two choices here: PrivateRoute and Route from react-router-dom package.

      If you specify PrivateRoute, the application would check if the user is already authenticated or not and also validate if the user is having required role assigned to it, in order to access the specified path. In order to specify which roles are allowed, you can specify them using roles property.

      If you specify Route, the application would not restrict user. Any user would be able to access the specified path.

    • roles - The roles which are allowed to access this specified path
Note that you don't need to restart the development server in order to see the menu changes getting in effect
Customization Layout and Sidebar

You can change or customize the overall layout or left side navigation easily. There are examples available for horizontal nav, dark theme, RTL, condensed side nav, fixed width (boxed), etc. You can modify the left side nav, topbar, etc.

How to change left side nav width?

In order to change the width of left side navigation bar, open a file src/scss/_variables.scss and change the value of variable $leftbar-width. The default value is set to 240px.

How to change background or menu text color?

In order to change the background color, open a file src/scss/scss/_variables.scss and change the value of variable $bg-leftbar-light the default light value is set to #ffffff, $bg-leftbar-dark the default dark value is set to #323742.

When you change the background color, you might want to change the color of menu accordingly. To change the color of menu item, change the variable $menu-item (Default is set to #4B4B5A). Similarly, change the value of variables $menu-item-hover and $menu-item-active.

You can change other styles by making modifications in src/scss/custom/structure/_left-menu.scss.

2019 © Shreyu. All Rights Reserved. Crafted with by Coderthemes