- 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’;
