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

Using code from html version in reactjs


Hi Team,

There are some pages in HTML demos that don't exist in react demos so I want to know if there is a way I can reuse code from HTML demos codebase in reactjs

Thanks in advance.

Ebrahim


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 (3)


Hi,

Thank you for your interest in Metronic.

Please note that Metronic's different versions, such as HTML, React has own preview as can be seen hereand in the download package, the same advertised features will be included.

For example, the Demo7 React version preview you can check here.

As can be seen in the preview, the React features are limited compared to the HTML version features. However, in each update, we try to add more features for React and other SPA frameworks as well. Currently, our React version serves as a solid starter kit and can be extended further according to project requirements. Also, all HTML features can be reused in the React version as those features are globally available in the styles.bundle.css for the React version.

In the Themeforest download zip, you will get only Demo 1 for HTML, React, Vue, Angular, etc. To get other demos just go to Metronic Downloads page and enter your purchase code once and download all demos and new updates anytime.

Just in case you are not satisfied with Metronic React you may request a refund using Themeforest Refund Form.
100% money back is guaranteed.

If you like to move on with Metronic and need further direction please ask our support team here. We are always glad to help you out.

Regards.



Hi Sean,

Thank you for your reply

"Also, all HTML features can be reused in the React version as those features are globally available in the styles.bundle.css for the React version."

This is what I want to do is there any documentation describing this process?

I mean is there a way to use the static HTML code from the HTML version in the react demo for example I want to copy the

Home -> eCommerce -> Catalog -> Add Product

from the HTML version and use it in the react demo I know that the HTML from the dist folder can be copied but it is a time-consuming process to do it needs a lot of searches and fixes I'm looking if there is a better and faster way to do it.
I really appreciate any help you can provide.



Hi,

This is the only way as React integration requires manual work based on the HTML template markup. So you can reuse the HTML code of the eCommerce app but the JS code you will need to adapt it for React. The HTML code of the pages is available as it is for all SPA versions.

If you need any further clarifications please us know. I assigned your case to our React guru.

Regards.


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  :(