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
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.
05:45 - Transferring page data from HTML to JSX.
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.

[ajitkumarkv]

Amazing Experiance, Very crispy and elegent explanations 💯

[shadrackmatata]

The tutorial I've been looking for.

[juliotreinty]

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

[lamvitrinh]

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

[raninitya]

thanks for guiding of using templates.!!
but I have multiple errors with document.querySelector. should I set it all in the useEffect in App.js?

[revindz]

Hello, my template came with javascript file and when i try to link it to the index.html inside public folder, the js wont apply.. got any idea why is that?

The javascript is also inside the public folder...

[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.

[zaynindiafans]

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

[shivakumar-vste]

Great video you have done. But how to change the meta Description and meta titles

[mardostreams]

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

[kirzxoh]

But the dark mode button doesn't work