Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)


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.



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.



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



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
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(