React components
Hi Guys, so I have reviewed the demo1 in metronic 8. I have looked at both the HTML version as well as the React version. What I am wondering about is that from what I can see, the HTML version is quite richer in terms of components and UI as compared to the React version. For example, in the HTML version you have a lot of UI and components for eCommerce. Whilst in the React version you guys have 0 to none eCommerce components, at least from what I can view both on your website as well as from the folder structure and the code that is included in there.
If I want to build an eCommerce platform, I'd love to use and fetch inspiration from your HTML version because it almost has everything we need to build an eCommerce platform. However, the build will be in React on the front end and nodejs on back end. Since I can't find all of the UI I find in the HTML version inside the React version, what should I do? Do I have to create those components manually in React? Like if I for example find the order listing and order detail page very nice and appropriate for our application, should I convert your HTML code into JSX and create components manually? Or is there any magic place I can get those same components in React? Is the case that the HTML version is supposed to be richer in terms of UI or am I missing something? If yes, could you please advise a smart and effective way to use the HTML components/UI in a React app?
Looking forward to your reply guys!
Replies (9)
Hi,
The HTML and React versions of the Metronic have different sets of functionality (mostly cause HTML version development started 4 years earlier than the React v. Also if the functionality is based on jQuery we don't have it in the React version).
But all CSS styles from the HTML version are included in React version also. It means if you create the same HTML make-up in React version - the component will look the same as in the HTML version. But functionality needs to be written by yourself.
Regards,
Keenthemes support
Hi Carmelo, thank you for getting back to me quickly, appreciate it!
Does that mean I can literally copy paste the markup of UI elements in the HTML version and create React components that looks the exact similar? Without having to stress with responsiveness and CSS styling?
Hi,
Yes, you're right. If you copy markup from the HTML version the view of the component will be similar. (Styles are common for all versions React/HTML/Angular/Vue).
Regards,
Keenthemes support
Unfortunately this did not work. I downloaded on of the html demos (demo11) and copied the markup from listing.html and used jsx converter (https://magic.reactjs.net/htmltojsx.htm) to create a react component and render. But there so many src tags inside that html markup that is referencing to the html template hierarchy that I am not being able to run it in my react version of metronic... And also there are thousands of lines on each .html doc inside the html template. The listings.html contains in total over 10k lines of code..
Now how can I easily extract components from the html template and make them ready for my react template?
Hi,
Try to describe which concrete component you are trying to copy from the HTML version? Not sure why you are trying to copy the whole page hierarchy.
Regards,
Keentheems support
Could you please also clarify, which demo of the React application you use?
Regards,
Keenthemes support
I am using React demo 4. And I tried to copy the HTML markup of order listing page from the demo1 HTML version https://preview.keenthemes.com/metronic8/demo1/apps/ecommerce/sales/listing.html in order to create an order listing component. I tried to copy the entire markup of this inside the code files from demo1 HTML version but it seems like its not the correct way to do it? I obviously used a JSX converter first to convert it into React compatible syntax. https://magic.reactjs.net/htmltojsx.htm
Could you please correct me if I am doing it the wrong way?
Looking forward to your reply.
It's hard to give an exact solution to 'how you have to handle this.
I would say, you need to copy HTML markup more carefully.
For example: First copy the tag with CARD class, then CARD HEADER, CARD BODY (then TABLE, TABLE ROW, COLUMNS), not everything at once.
Regards,
Keenthemes support
Hi CHTech how you doing I hope you are doing well have you solved your issue
If so how do you solve it I am having similar issue
