Converting html template to React project


  1. First lets find the template that we want to use. This is the perfect place to find really good html5 responsive site template. https://html5up.net/
  2. I am choosing this theme for this example. https://html5up.net/striped
  3. Go ahead, download the zip file, and extract to your local folder.
  4. Lets create a startup react app. I am using, https://github.com/facebook/create-react-app . But you can use any other tool or you can configure your project.
  5. After installation, run create-react-app your-project-name . I have given my project name, "templatetoreact"
  6. You can simply run the app with command, npm start. for other options please check the create react app documentation. After, npm start, react project will be lunched http://localhost:3000 
  7. Open the project in your code editor. Preferred code editor https://code.visualstudio.com/
  8. After opening the project, copy your template's assets and images folder to your project public folder. And also, you can copy whole template's content onto public > template folder.
  9. Now, you can browse the template, with this url, http://localhost:3000/template/ . Your template should be up and running.
  10. Now, first copy the head section of template html to project's index.html ( under public > index.html ). You can replace all or preserve something like favicon.
  11. Now loads all the scripts tag from template index.html to projects index.html after body tag ends. ( It looks like jquery lite with react bundle overriding the template jquery configuration if we put scripts in the body) Your project should still be running without any problem. Check on : http://localhost:3000/
  12. Now, its time to fix the template html so that it will be easier to move them in jsx file. If you don't know what are jsx file in react, please refer to https://reactjs.org/docs/introducing-jsx.html
  13. Open template's index.html and 
    1. Remove all html comments line
    2. Remove the content inside app.js > render > html like elements, and replace with your fixed template index.html divs. Make sure to wrap all divs to parent div.
    3. Find and replace "class" with "className"
    4. Browse, http://localhost:3000/ and look at the console for additional error related to html. Fix them. In my case it was "colspan" to "colSpan"
    5. Just Save
  14. Your app, should be up and running. Now, we can start componizing the template html elements to react component.

Comments

Post a Comment