- Create React App
npx create-react-app app-namecd app-namenpm 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';
No comments:
Post a Comment