What You Will Learn?
Home Page:
Display products with options to filter (e.g., category, price) and search.
Sort products (e.g., price: low to high, high to low).
Product Details Page:
Show detailed information about a selected product.
Use useParams to fetch specific product details dynamically.
Shopping Cart:
Add/remove items and update quantities.
Use Context API and useReducer for global cart state management.
Navigation:
Navigate between pages using useNavigate.
Responsive Design:
Ensure the UI is optimized for different screen sizes.
API Integration:
Use useEffect to fetch product data from a mock API or backend.
Search & Filtering:
Use React Hook Form for handling user inputs for search and filters.
Performance Enhancements:
Use useRef for focusing on search bars or triggering animations.
Utilization of React Hooks:
React Hook Form: For advanced form handling (e.g., filter options, search inputs).
useContext: For global state management of products and cart.
useReducer: For managing cart logic (add, remove, update quantity).
useEffect: For fetching and syncing product data with an API.
useParams: For product detail routing.
useNavigate: For handling navigation between pages (e.g., product list to product details).
useRef: For adding features like auto-scrolling or focusing on input elements.
Expandability:
You can start simple and grow the project by adding:
Sorting options.
Payment gateway integration.
User authentication.
Resources:
Install Plugins: Tailwind CSS IntelliSense, es7+ (ES7+ React/Redux/React-Native snippets)
Browser: Use the latest version of Google Chrome/Microsoft Edge.
Version Control: GitHub
Create a React Project: Create a project folder "React" and open it in VS Code
Creating a Vite Project Using React
www.tailwindcss.com -> Framework Guides -> Vite -> Using React -> Run the commands
> npm create vite@latest
> Projectname: react-car-rental-website
> Select a framework: React
> Select a variant: JavaScript
> cd react-car-rental-website
> npm install
> Run your build process with "npm run dev" -> http://localhost:5173/
Delete "App.CSS" & Remove everything from index.css files.
Installing Tailwind CSS:
www.tailwindcss.com -> Framework Guides -> Vite -> Using React -> Run the commands
> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init -p
Configure your template paths:
Add the paths to all of your template files in your tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
Add the Tailwind directives to your CSS:
Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Installing Dependencies:
>npm install react-icons react-router-dom react-hook-form
NOTE: Encapsulate the 'App' component with 'BrowserRouter' in the 'main.jsx'
createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>,
)Add Global styles in "tailwind.config.js" file
Creating your own components...
GitHub Commands:
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/codingZ2M/dummy.git
git push -u origin main
Comments