Convert HTML to React From An Existing Website - #78
2 minutes
51:36 minutes
Per a subscriber request, let's take a look at converting an existing HTML website to React. You can view the source files to get the HTML code from the existing website to get started.
In this tutorial, we learn about how to install React, how to install a React Router, and how to install React Helmet. These 3 installs will help us build out a website in React, create our page router, and finally modify the title and meta tags for SEO.
Join me as I go over how to get your HTML code from a flat-file website to react to make it more dynamic, faster, and easier to modify in the future.
View the source code: https://github.com/thedevdrawer/html-to-react
NOTE: I fixed the metadata duplication in the index.html file in the GitHub repo. I forgot to remove it at the 31:15 mark.
00:00 Intro
01:14 Viewing HTML Website
03:00 Install React
04:02 Start Local using NPM
05:16 Modify Default App.js / Folder Structure
06:33 Create React Home Page
10:46 CSS Stylesheet
11:29 Add Header and Footer
16:21 Install React Router / Setup Routes
19:57 Create Additional Pages
24:40 Add Link and NavLink
27:59 Add Init JS
31:15 Install React Helmet
32:52 Config.json
43:38 Clean Up
49:32 Recap
Become a Patreon to show support and get exclusive access to content: https://www.patreon.com/devdrawer
Applications Used
Visual Studio Code v1.43: https://code.visualstudio.com/
React: https://reactjs.org/
Computer Hardware:
Windows 10 Pro: https://amzn.to/3q5TyZw (Amazon)
Samsung 500GB External SSD: https://amzn.to/2ViAAAF (Amazon)
Samsung 970 EVO Plus SSD 1TB - M.2 NVMe: https://amzn.to/36jDwDy (Amazon)
Rosewill Hive-750S R750W PSU: https://amzn.to/36jiDbs (Amazon)
Phanteks Eclipse Tempered Glass Case: https://amzn.to/39qou0B (Amazon)
MSI Arsenal Gaming AMD Ryzen Motherboard: https://amzn.to/36hpAKm (Amazon)
MSI Gaming GeForce RTX 2060 Super 8GB: https://amzn.to/36hMyRm (Amazon)
LG 34UM69G-B 34-Inch 21:9 UltraWide IPS Monitor: https://amzn.to/2HSRxyI (Amazon)
Corsair 64GB (4 x 16GB) DDR4 Memory: https://amzn.to/3mlmQkI (Amazon)
AMD Ryzen 7 2700X Processor: https://amzn.to/3qdQIBF (Amazon)
Dell XPS 15 9500 15.6" Laptop / Windows: https://amzn.to/3fKEz2w (Amazon)
Lenovo ThinkPad T15 15.6" Laptop / Linux: https://amzn.to/2Jnmn33 (Amazon)
Camera:
Fujifilm X-T3: https://amzn.to/3llKBb5 (Amazon)
Fujinon XF18-55mmF2.8-4: https://amzn.to/3mfTkNb (Amazon)
Audio:
Audio Technica AT2020: https://amzn.to/2VgxU6K (Amazon)
Blue Snowball iCE: https://amzn.to/3lo1jGC (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
Like what you see, support the channel.
Get Merch Buy Me A Coffee Join Patreon Watch on YouTube View Projects on GitHub
