Convert any web into React web

Tram Ho

The following is an article that converts any HTML website into a website / app based on ReactJS components. If you are building a completely new single page application and need a starting point, this article is for you.

While building a website that only knows HTML, CSS and Javascript is quite enough, it is worth mentioning that the following companies have decided to switch to a React site:

and some other subsidiaries of these companies.

This article will show you how to covert your site to ReactJs (using samples from ColorLib to complete this exercise). Disclaimer: For copyright reasons, these models are for practical use only and if you want to use them, you may have to pay a fee to click download.

1. Download the template

Download the Creative Template as this will be a standard site to use for converting into React

2. Create React Application

Create a React Application that runs the following commands in your Terminal or Console:

NOTE: Node version must be greater than 6.0 and NPM greater than or equal to 5.2.

3. Convert the required files

Move all folders (css /, fonts /, img /, js /) in Creative Template into public folder and import them into public / index.html file in your React application. Then you open the index.html file in both projects and reference them together: copy styles and fonts from the template to your application:

The end result will look like this:

Once you have completed this step, all functionality from the Template has been transferred to your new ReactJS Application. Your entire site will be embedded in the <div id=”root”> above. Now comes the fun part.

4. Convert the layout into a component.

Open the file /src/App.js in your application, where the main component is located. In this file, you’ll see the app () function and the return statement containing ONE node with HTML including the React Logo displayed when you start your server.

What we’re about to do next is completely optional, but what we want is to convert this App function into an App class. So, we do the following:

  • Change the function App() the class App extends React.Component
  • Give the class App a render() function.
  • Copy the return statement from the App () function to the App Render () function of the class.

Result:

Therefore, we should have the same layout as before with the React logo rotated still in the middle of the screen. By converting this component into a class, we can include a state variable so we can change the display in your application. Alternatively, you can visit React’s Lifecycle Methods to learn how to add logic between mounting and unmounting of components.

5. Fix errors and see results

Next, add content to this component. First, delete their node and child headers to delete the site.

Once cleared component, return to index.html from inside Creative Template. Copy everything in the <body> element and paste it into the <div className=”App”> in your React project. And we see countless errors 😉 . Because we have chosen a fairly large sample (better for practice), this will take a bit of patience. To clear an error, do the following:

  • Make sure you did not copy the <script> tags. These will not be needed in the React Component.
  • Make sure you remove all " <! -->" comments from within the component as these errors can cause errors.
  • Make sure all <img /> and <input /> have a “/”
  • Every instance of style = < string> , must be converted to style={<object>} . Each style attribute must be an attribute of an object. This is how you will change the style in the lines . For example, the background-image attribute changes to “backgroundImage”

  • Unlike the “class app” instance, you will need to update all the instances of the class in the file into className

If done correctly, this will eliminate all errors. Once saved, we will convert the sample website into a very large ReactJS component. This is the final result for reference .

Following these steps carefully will convert any regular website into a ReactJS application.

Above is the useful article I want to share for everyone. Hope to help you 😃

Source: How to convert any web page into a React web page

Share the news now

Source : Viblo