Rewriting a template to a react app

It's a nice challenge. You take a template you like, for example this one (live demo) and you create a react app with this template.

PS: If you want to see the result in react, scroll down for the github repository!

PS2: This tutorial assumes you have followed the Getting started tutorials on the react site and know a little bit of typescript. I'm not very precise here and you have to interpret some steps with experience in react.

To permit browsing (the url changes when clicking the menu) you can use react-router-dom. The easiest step here is to start with this template that includes the router (I found it here). I choose to have it in typescript.

npx create-react-app react-template --template react-router-dom-typescript
cd react-template
npm install
code . // this launches visual code studio

Now you'll have to:

clean up, make the pages/files empty
This template uses bootstrap. So copy all style and javascript links to the index.html file in the dist folder (this is the production final page where react is applying the code on). So in <head> you add links to css, and in this template the js is loaded at the bottom of the body tag, so just copy it there as well.
copy all assets (like css, js, media) to the dist folder
First you just copy all template html to the HomePage.js return function
replace all occurences of class to className (this is because React cannot deal with class, because that's a reserved word in javascript, and react uses JSX so it could confuse things)
check all errors that typescript returns. Tags should have an enclosing tag. So <br> becomes <br /> and <img ...> becomes <img .../>
replace <a href="blabla"> tags by <Link to=""> and
add: import {Link} from "react-router-dom" on top
The Link tag refers to a new route, for example <Link to="/contact"> will bring the url to localhost:3000/contact. This page does not yet exists, but you can add this later.
extract some sections and make new react components for them, for example VideoHeader
In the VideoHeader i've added the possibility to show a youtube video fullscreen as the background
Make new pages and adjust the menu ... well you can see my example below, have fun!