Convert HTML to React From An Existing Website - #78

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.

00:00 Intro
01:14 Viewing HTML Website
03:00 Install React
04:02 Start Local using NPM
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
43:38 Clean Up
49:32 Recap

`````````````````````````````````````````````````````````````````````````````````````````````````````````````````````
`````````````````````````````````````````````````````````````````````````````````````````````````````````````````````

Applications Used

Computer Hardware:

Camera:

Audio:

DISCLAIMERS:

[DevDrawer]

Don't forget to grab the HTML for the static website prior to starting the tutorial. You will need it to convert over:

[ryanbrown]

Thank you!
I wish there was another video with the updated react-router syntex,
And overall, more Recat videos.

[yudias]

Very good ! Thanks for this video * - *
Since new version React, you can use "Routes" instead of "Switch"
More fast

[stevevoltmer]

So, do you use yarn build at this point? How do implement this on a current site?

[sabinmorris]

me i want when you take html file file there js link inside the file that connected so how to connect with react jsx inside a page?

[agustinspitaleriortega]

Your explication is very good man ! Thank YOU

[ferescalante]

I’m having compiling errors when I do the css part. What could I be doing wrong? I copied and pasted the css but I got erros

[henriux]

Hello, how do i import .js files into react project. I have a HTML template with alot of .js files with thousands of lines of code, so I cant just copy and paste it into index.js. Is therea way of doing it similarly to how we import .css files(import "./style.css")?

[mughilankp]

Hi sir, While setting up routes im getting this error:

Attempted import error: 'Switch' is not exported from 'react-router-dom' (imported as 'Switch').
ERROR in ./src/App.js 17:37-43
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_HistoryRouter, unstable_useBlocker, unstable_usePrompt, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit)

webpack compiled with 1 error



Please sir help me rectify this I'mout of time to complete my project can you please help me out?

[sabinmorris]

how to link external js with react jsx like wise in the html file because other js work in html but inside the jsx give an error so how to link it?