Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Bringing in components from the free templates


Hello

What is the best way to bring in components from the Free Templates page (say for example this one: https://keenthemes.com/products/start-react-free).

I am currently using React Demo01.

It feels like the React version has gotten the short end of the stick when it comes to components and there are a lot more prettier ones in HTML.

Bringing over react components from another "app folder" is trickey....making sure imports and modules all OK and confirming levels etc...

Perhaps a quit doc or video or reply would help me a lot. How would one of your seasoned devs perform such thing. Thanks in advance.


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


The following is a succinct summary: The process of incorporating Templer Run 3 components from Free Templates into a React project entails the conversion of HTML components to React, the verification of accurate imports, and a comprehensive testing of the project's functionality.



Here's a concise summary:
Did you know you can play Chill Guy Clicker on any device, perfect clicker game!
Drive Mad same this



The HTML version's styles won’t interfere with your project’s existing styles. Simply import the necessary CSS files or adapt them into a modular CSS/SCSS structure.
Source: Football Bros



The way you approach these discussions is very thoughtful. Most people just skim over these topics, but you dive in. Great work!@ Osu! Mania



@Football Bros Game The styles from the HTML version won't conflict with existing styles in your project. Import only the required CSS files or convert them to a modular CSS/SCSS structure.



The @Id annotation allows you to interact with client-side templates from the server coreball side. You can use the @Id annotation to obtain a Component or Element reference for an element created in a JavaScript template.

This section explains how to use the @Id annotation to refer to a JavaScript LitElement template. The same concept applies to polymer templates.



Here's a concise summary: Integrating components Death By AI from Free Templates into a React project involves converting HTML components to React, ensuring correct imports, and testing thoroughly for proper functionality.



Hi,

Thank you for reaching out to us.

Components from our other themes were not designed to be used in Metronic, but you can easily reuse any of the components from our HTML version, All styles needed for every page are already included in our React theme all you have to do is just copy html markup from HTML version and place it into your TSX component. Please note, that some of the pages might require additional dependencies installation and initialization of js file.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



somehow i know that just copying and pasting a component from the html version to a react component that's not gonna work lollll

is there ANY WAY - we can get a quick video doing this properly or a few steps using real actual examples.



Hi,

There are some differences from the plain HTML you should fix to make it work in React component.

Primary, you should replace class attribute with className and replace HTML comments with JSX comments.

For easier plain HTML to JSX migration, you can use this transform tool: https://transform.tools/html-to-jsx

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