HTML to React App — Convertion Steps

  • Create React App

npx create-react-app app-name

cd  app-name

npm start

Steps of conversion

  • Copy paste css to index.css
  • Copy paste contents inside <body> to App.js  return data
  • Replace “class” with “className”    (since class is a reserved keyword and cannot be used inside the js file)
  • Create images folder inside public then move images to that
  • rename images path   to   /images/name.jpg

Define functions  

const openMenu = () => {    document.querySelector(“.sidebar”).classNameList.add(“open”);  }  const closeMenu = () => {    document.querySelector(“.sidebar”).classNameList.remove(“open”);  }

function call replace  onclick=”closeMenu()” to onClick={closeMenu}
Change onclick to onClick

Add  transition: all .5s;   to css

static to dynamic product list – JSX

<ul className="products">
              {                data.products.map(product =>
	<li>
		<div className="product">
			<img className="product-image" src={product.image} alt="product" />
			<div className="product-name">
				<a href="product.html">{product.name}</a>
			</div>
			<div className="product-brand">{product.brand}</div>
			<div className="price"> ${product.price}</div>
			<div className="product-rating"> {product.rating} Stars ({product.reviewCount} reviews)</div>
		</div>
	</li>                                )              }                            
</ul>


Routing in React

npm install react-router-dom

Wrap the return contents in <BrowserRouter> </BrowserRouter>
import { BrowserRouter, Route } from ‘react-router-dom’;

  • Product page

#root{ height: 100%; }

  • Change the link code / replace <a> with <Link>

<Link to=”/”> Amazon Store </Link>
<a href=”index.html”> Amazon Store</a>
import {Link} from ‘react-router-dom’;

About the Author: smartcoder

You might like

Leave a Reply

Your email address will not be published. Required fields are marked *