Reactjs & MUI

Reactjs & MUI guide for Trezo.

Overview

React.js

React.js is a popular JavaScript library for building user interfaces, primarily focused on creating single-page applications (SPAs). Developed by Facebook, React employs a component-based architecture and a virtual DOM, making it efficient for managing dynamic UI updates. React's declarative approach simplifies building scalable and interactive front-end applications, with support for features like state management, hooks, and seamless integration with other libraries or frameworks.

Material-UI (MUI)

MUI, formerly Material-UI, is a comprehensive library of React components implementing Google’s Material Design guidelines. It provides pre-built, customizable components like buttons, modals, and navigation bars, enabling developers to create modern, responsive, and visually appealing interfaces quickly. MUI includes theming capabilities, accessibility features, and extensive documentation, making it a preferred choice for building professional-grade React applications with consistent design.

Setup Development Environment

To kickstart the development of the web app with Trezo, at first need to setup the react development environment.

Node.js and NPM: If NodeJS is not installed then download it from https://nodejs.org. NPM comes bundled with Node.js

NPM Packages

Before proceding you'll need to install npm packages. You can do this by running npm install from the root of your project to install all the necessary dependencies.

Development Server

Run npm start for a dev server. Navigate to http://localhost:3000. The app will autometically reload if you change any of the source files.

Building

Build the project npm run build, Upload the contents of the build folder to a web server.

Local Environment Installation

Open the react-material-ui folder in Visual Studio Code and open a terminal on that folder and run these commands one by one.

1. npm install
2. npm start
3. Go To http://localhost:3000
4. Done

Pages and Components Info

eCommerce dashboard (/src/pages/dashboard/Ecommerce.js)
CRM dashboard (/src/pages/dashboard/CRM.js)
Project Management dashboard (/src/pages/dashboard/ProjectManagement.js)
LMS dashboard (/src/pages/dashboard/LMS.js)
Help Desk dashboard (/src/pages/dashboard/HelpDesk.js)
and more...
Front page (/src/pages/Home.js)
Front page features (/src/pages/Features.js)
Front page team (/src/pages/Team.js)
Front page faq (/src/pages/faq/page.js)
Front page contact (/src/pages/Contact.js)
To Do List (/src/app/pages/apps/ToDoList.js)
and more...

Common Components:

TopNavbar (/src/components/Layout/TopNavbar/index.js)
LeftSidebar (/src/components/Layout/LeftSidebarMenu.js)
Footer (/src/components/Layout/Footer.js)
Control Panel (/src/components/Layout/ControlPanel/index.js)
and more...

Dependencies

Here are the dependencies list which being used in the Trezo Reactjs Template:

"dependencies": {
    "@emotion/cache": "^11.14.0",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@fullcalendar/core": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/react": "^6.1.15",
    "@mui/icons-material": "^6.3.0",
    "@mui/lab": "^6.0.0-beta.21",
    "@mui/material": "^6.3.0",
    "@mui/x-data-grid": "^7.23.5",
    "@mui/x-data-grid-generator": "^7.23.5",
    "@mui/x-date-pickers": "^7.23.3",
    "@mui/x-tree-view": "^7.23.2",
    "apexcharts": "^4.3.0",
    "boxicons": "^2.1.4",
    "cra-template": "1.2.0",
    "dayjs": "^1.11.13",
    "react": "^19.0.0",
    "react-apexcharts": "^1.7.0",
    "react-datetime-picker": "^6.0.1",
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.1.1",
    "react-scripts": "5.0.1",
    "react-simple-wysiwyg": "^3.2.0",
    "remixicon": "^4.6.0",
    "swiper": "^11.1.15"
},

Credits

Note: All images are used for preview purpose only and not included in the final purchase files.

Images

Google Fonts

Inter

IconFont

Packages

Additional Notes

Feel free to reach out to our support team if you have any questions! Support

Angular

React + Bootstrap