Step-by-Step Tutorial: Converting HTML Template to React Js - React js Tutorial

Step-by-Step Tutorial: Converting HTML Template to React Js - React js Tutorial
GitHub repository: github.com/LennoxLondoW/html_...
Read more: www.lenntecs.com/single_blog/...
Timestamps
00:00 - Introduction to building a React website using an HTML template.
00:14 - Accessing the HTML template from 'w3-layouts.'
00:45 - Setting up your project folder and extracting template contents.
01:18 - Creating a new React application named 'school.'
01:47 - Overview of the template before conversion to React.
02:28 - Creating React components for template pages.
02:49 - Installing 'react-router-dom' for routing and Configuring routing for the pages.
04:08 - Transferring assets from the template to the React app.
04:45 - Replacing head and footer sections in 'index.html.'
05:45 - Transferring page data from HTML to JSX.
09:54 - Organizing repetitive elements into components - Creating 'Header,' 'Footer,' and 'Breadcrumbs' components, Integrating header and footer components into 'App.js.' , Using the 'Breadcrumbs' component in pages with props to enhance code reusability.
13:05 - Setting up navigation using anchor tags.
13:57 - Preventing page refresh with 'Link' elements and handling events with camel-cased event names.
14:26 - Conclusion and availability of source code.

[@juliotreinty3956]

From Argentina to thank you very much for this super practique and easy understanding tutorial. Great contribution for every one who is beginning on React JS

[@Lenntecs]

Thank you. So glad you found the tutorial helpful

[@shadrackmatata5170]

The tutorial I've been looking for.

[@Lenntecs]

I'm glad to hear that you've found this tutorial to be what you were looking for! Happy coding

[@ferescalante182]

This is amazing

[@Lenntecs]

Thank you @ferescalante182 for liking the tutorial.

[@lamvitrinh2628]

thanks you so much , hope u make more video for beginner like this

[@Lenntecs]

Welcome! I will certainly create more easy-to-follow tutorials. Stay tuned.

[@mardostreams]

I can't understand what to do after 8:49. I am not sure which file to edit to where :/

[@zaynindiafans8503]

Can u please upload a video to connect with mongob compass with react front end???

[@Lenntecs]

Hello @zaynindiafans8503, Sure. I'll create a that tutorial and get it uploaded. Stay tuned.

[@CodeCeTra]

React is a Component based Virtual DOM Frontend Framework. You just converted HTML to JSX manually which can be done using a converter which are available online. This video does not convert an HTML website to a React one it just teaches us how to manually convert html to jsx. If you really want to create something like this then make components of each part of your HTML page.

[@Lenntecs]

Thanks, @CodeCeTra, for sharing your thoughts. The tutorial begins by showing the manual conversion of HTML to JSX. Later, it guides users in decomposing the converted page into reusable components, such as the header, footer, and breadcrumb. The tutorial suggests continuing the decomposition process as that couldn't be covered fully in this tutorial.

[@user-ki3rz3xo8h]

But the dark mode button doesn't work

[@Lenntecs]

Certainly. Thank you for pointing that. Certain functions can be configured at the component level. The code within theme-change.js, handling the theme change, can be incorporated into the header component where the button for theme change resides. I've made the code modifications. Please review how to implement this, and you can apply a similar approach for other functionalities best suited for implementation at the component level. Remember to un-link the theme-change.js file as it is no longer required after the new implementation.

[@PicchiChannel]

Great

[@Lenntecs]

Thank you for finding it helpful🤙🏾