Step-by-Step Tutorial: Converting HTML Template to React Js - React js Tutorial
GitHub repository: https://github.com/LennoxLondo....W/html_template_to_r
Read more: https://www.lenntecs.com/singl....e_blog/post/e4e2e774
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.