Skip to main content

Convert HTML to React From An Existing Website - #78


Published: November 03, 2021


Estimated Reading Time
2 minutes
Video Duration
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.