I want to make my React application with a Metronic template, but I don't know how to initialize it
I have already done the correct installation of Metronic's React templates, but I want to implement it in a project that I have done, but I don't see any tutorial to do it with react, urgent help please
Replies (8)
Navigate to the React folder inside the extracted Metronic package. This folder contains everything you need to start your React application using the Metronic template.
Connections Unlimited
And how would you do it?
I want to know how to do it, it is urgent please, give me a more direct contact or a more detailed video please
to my email miguel.guevara@glinseal.com
Hi Miguel,
Could you please provide us with more information about your project?
Here are some straightforward instructions for you:
Styles Overview
Ensure you globally import the primary mandatory style file, which contains all the essential theme styles required for all pages.
import "./_metronic/assets/sass/style.scss"In Metronic, we import this file in src/index.ts. Inside this file, you'll find additional imports:
For keenicon styles, include them if you plan to use keenicons in your project.
import "./_metronic/assets/keenicons/duotone/style.css"
import "./_metronic/assets/keenicons/outline/style.css"
import "./_metronic/assets/keenicons/solid/style.css"For React plugins and theme plugin styles, include them if you intend to utilize plugins preset in Metronic.
import "./_metronic/assets/sass/plugins.scss"
import "./_metronic/assets/sass/style.react.scss"You can adopt these style imports based on the specific plugins you want to use.
By including the styles mentioned above, you can easily reuse most of our components in your project.
Router Overview
We provide two router files for registering public routes and private routes (routes that require authentication).
To register public routes, use src/app/routing/AppRoutes.tsx. For private routes, turn to src/app/routing/PrivateRoutes.tsx.
Layout Overview
All layout files reside in src/_metronic/layout. You can configure the sidebar menu with src/_metronic/layout/components/sidebar/sidebar-menu/SidebarMenu.tsx and the header menu with src/_metronic/layout/components/header/header-menus/MenuInner.tsx
Please let us know if you have any further questions on this topic or anything else.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I just want to know the correct way to implement the metronic templates with React to a project that I'm thinking of doing, it doesn't say the correct way in the documentation, please help me
Hi Miguel,
There is no correct or wrong way to implement our theme. Everything depends on your project requirements, if you already have your own project and you want to reuse some of the theme parts then you can just include the main style files and then copy a separate component from our theme. If you want to base your project on Metronic then you can fully reuse our theme and just adapt it to your requirements.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I would like a training, so I can correctly implement the Metronic template with React to a personal project, if not, please tell me what is the correct way to customize the template to my liking. There is nothing specific in the documentation, please tell me which is the correct way, urgent please.
Hi,
Could you please let us know which part you would like to customize and our support team will guide you further? Please specify more details.
Regards.
Hi,
You can use Metronic's React App as a base and incorporate your custom product code into it. However, we are not sure about custom project code and can not give any guide.
Metronic React App is provided as it's shown and advertised in the preview and every buyer utilizes it differently as per their project requirements.
If you need any further help please ask specific questions that are related to the Metronic React app and we will guide you.
Just in case Metronic Angular does not fulfill your project requirements you may request a refund using Themeforest Refund Form. 100% money back is guaranteed.
Regards.
