DEV Community

wimdenherder
wimdenherder

Posted on

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.

template screenshot

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
Enter fullscreen mode Exit fullscreen mode

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!

Check the github here:
https://github.com/wimdenherder/react-bootstrap-template

Discussion (0)