React is a popular JavaScript library now. It is mainly used to update the front view of the page only and it works faster than other website for using virtual DOM. How you can change the a HTML template into a react project and run from react server are shown in this tutorial. You have to download any free HTML template and create a fresh react app before starting this tutorial.
Steps:
1.The HTML template that I have used in this tutorial is downloaded from the following link. You can download it to use for your testing purpose.
https://www.free-css.com/free-css-templates/pit age232/landscaper
2. I have created a new react app named reactapp. You can store the in any location of your drive. But I will apply mysql and PHP in my next tutorial, so I have stored the folder under htdocs folder. If you are new in react then you can click here to know the steps for installing reactjs.
3. Copy all the folders from the HTML template folder and paste in the public folder of reactapp folder.
4. Create a folder named pages under src folder of recatapp. You have to create necessary js files depends on the html pages contains in HTML template. I have used one page template here and there is only one html file in the template folder.
5. Open the index.html file from HTML template folder and copy the content inside <head> tag and paste the content inside the <head> tag of index.html file under public folder of reactapp.
6. Create a file named Home.js under src/pages/ folder. Copy the following content in the file.
import React, {Component} from 'react';
class Home extends Component {
render() {
return (
<div className="row ">
<div className="medium-12 columns">
</div>
</div>
);
}
}
export default Home;7. Copy the content of <body> tag of index.html without script links from the template and paste inside the <div> tag of return() of Home.js file. Add the script link below the <body> tag of index.html of public folder.
8. Now, replace all <hr>, <br>, <img> and <input> tag by <hr/>, <br/>, <img/> and <input /> in Home.js file.
9. Open app.js file from the src folder and replace the code with the following code.
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './pages/Home';
function App() {
return (
<Home />
);
}
export default App;10. Run the react server and check the template is running as a react project.
Hope, you have converted the template successfully. In the next tutorial I will show how you can make this project dynamic by using PHP and MySQL.
