• 4+ dashboard Layouts
• 5+ Use-Case App Concept
• Register, Login, Reset password & Error Pages
• Built with Bootstrap 5, React Bootstrap, SASS
• Calendar, Mailbox, Chats, Kanban apps
• Nice layout for user profile and user details page
• Cross-browser compatibility
• Fully Responsive Design
• Handmade custom icons.
• Neat, clean and simple design
• Advanced Form Elements
• Fast & Dedicated Support
• Easy to Customize with SCSS Variables
• Lifetime Free Updates
• And many more features available

• Install dependencies:

  npm install

• Run dev server:

  npm run start

• Open the link: http://localhost:3000 to view it in your browser.

Our Nioboard React application is based on Create React App. for more detailed information of the CRA, visit the official Create React App documentation website.

• 1. For production build, run the following command.
• npm run build

• 2. After run above command, a new folder will be created in root folder called build folder.
• 3. Create a subdomain on cPanel
• 4. After creating subdomain, Zip the build folder and upload it to subdomain.
• 5. Now open your subdomain in browser to view.

    
    |--docs/
    |--react/
    |--|--src/
    |--|--|--assets/
    |--|--|--|--fonts/
    |--|--|--|--images/
    |--|--|--|--scss/
    |--|--|--components/
    |--|--|--|--Chart/
    |--|--|--|--|--Charts.js
    |--|--|--pages/
    |--|--|--|--admin/
    |--|--|--|--|--Profile.js/
    |--|--|--|--Home.js
    |--|--|--|--HomeEcommerce.js
    |--|--|--router/
    |--|--|--|--index.js
    |--|--|--|--store/
    |--|--|--|--|--icons/
    |--|--|--|--|--products/
    |--|--|--|--|--users/
    |--|--|--|--utilities/
    |--|--|--|--|--timePicker.js
    |--|--|--App.js
    |--|--|--package.json
    

• 1. Create a file named ExamplePage.js inside the src/pages/ folder. note: you can give any name.
• import React from "react";
                         
  function ExamplePage() {
      return (
          <div>Hello World!</h1>
      )
  }
  export default ExamplePage;
      

• 2. Add the file to src/router/index.js
• import React from 'react'
  import { Routes, Route } from "react-router-dom";
      
  //Pages
  import Blank from '../pages/Blank';
  import Home from '../pages/Home';
  import HomeEcommerce from '../pages/HomeEcommerce';
  import HomeProject from '../pages/HomeProject';
  import HomeMarketing from '../pages/HomeMarketing';
  import HomeNFT from '../pages/HomeNFT';
  
  // 1 added here
  import ExamplePage from '../pages/ExamplePage';
                  
  function Router() {
      return (
          <Routes>
              <Route path="blank" element={<Blank />} />
              <Route path="/" element={<Home />} />
              <Route path="home-ecommerce" element={<HomeEcommerce />} />
              <Route path="home-project" element={<HomeProject />} />
              <Route path="home-marketing" element={<HomeMarketing />} />
              <Route path="home-nft" element={<HomeNFT />} />
              <Route path="app-calendar" element={<AppCalendar />} />
              <Route path="kanban/basic" element={<KanbanBasic />} />
              <Route path="kanban/custom" element={<KanbanCustom />} />
  
              // 2 added here, and gave file path named [ example-page ]
              <Route path="example-page" element={<ExamplePage />} />
  
          </Routes>
      )
  }
  
  export default Router;
      

• 3. Add the file path to Sidbar Menu src/layout/default/Sidebar/Menu.js. see we added path on to prop.
• <MenuItem>
      <MenuItemLink icon="layout" text="ExamplePage" to="/example-page" />
  </MenuItem>

Create Your First Component

When creating a React component, the component's name must start with an upper case letter. for example <Hello /> .

• Functional Components

  This is a normal JavaScript function except that it returns a JSX React element. JSX, if you’re not familiar, is just a special type of HTML that is adapted for JavaScript. for more details about of JSX see here.

  Create a Functional component called Banner you can give any name of component.

  function Banner(){
      return <div> Hello World </div>
  }
  

• Class components

  Before React Hooks, Class components were the recommended way of creating React components with full life-cycle methods and state.

  A class component must include the extends React.Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component's functions.

  The component also requires a render() method, this method returns HTML.

  import React from 'react';
   
  class Banner extends React.Component {
      render(){
          return <div> Hello World </div>
      }
  }
  

  Class components are not deprecated and will continue to live on for the foreseeable future, so they are important to learn.

• Components in Components

  We can refer to components inside other components:

  function TodoItem() {
      return <div> Hello World </div>
  }
  
  function Todos() {
      return (
          <>
              <div> Hello World </div>
  
              // Use the TodoItem component inside the Todos component
              <TodoItem />
          </>
      );
  }
  

• Components in Files

  React is all about re-using code, and it is recommended to split your components into separate files.

  To do that, create a new file with a .js file extension and put the code inside it:

  This is the new file, we named it TodoItem.js:

  function TodoItem() {
      return <div> Hello World </div>
  }
  
  export default TodoItem;
  

  Now we created a file named TodoItem. To be able to use the TodoItem component in another file, you have to import the file where you want to use.

• import TodoItem from 'relative_path/TodoItem.js';
  
  function Home() {
      return (
          <TodoItem /> 
      )
  }
  
  export default Home;
  

Folder Structure

To create an application with multiple page routes, let's first start with the file structure.

Within the src folder, we'll create a folder named pages with several files:

src\pages\:

• About.js
• Contact.js

Above Each file will contain some contents.

• Basic Usage

  Now we will use our Router in our src/router/index.js file.

  import React from 'react'
  import { Routes, Route } from "react-router-dom";
                                  
  //Pages
  import About from '../pages/About';
  import Contact from '../pages/Contact';
  
  function Router() {
      return (
          <Routes>
              <Route path="/about" element={<About />} />
              <Route path="/contact" element={<Contact />} />
          </Routes>
      )
  }
  
  export default Router
  

• Linking page

  Below is the example how to use router path URL with react router Link component.

  import { Link } from 'react-router-dom'
  
  const About = () => {
      return (
          <>
              <Link to="/contact">Contact</Link>
          </>
      )
  };
  
  export default About;