React Fundamentals
JSX (JavaScript XML) - JSX allows embedding HTML-like code
inside JavaScript. It makes React components expressive and
easy to write. - Example: function Welcome() { return Hello React!;
}
Components - Functional components return JSX and are the
building blocks of React apps. - Props are read-only inputs to a
component. - State is mutable data managed inside a component.
Example: function ProductCard({ name, price }) { return {name} - ${price}; }
In FreshCart: ProductCard is used to display product data dynamically.
Event Handling - React normalizes events into a SyntheticEvent
system. - Example: alert("Clicked!")}>Click Me
In FreshCart: 'Add to Cart' buttons use onClick handlers.
Conditional Rendering - Render different UI depending on
conditions.
Example: {isLoggedIn ? : }
In FreshCart: Navbar and Footer are hidden on seller pages.
--------------------------------------------------
React Router (v6)
- replaces from v5. - Dynamic routes allow parameters in URL.
Example: } /> const { id } = useParams();
- Nested routes allow dashboards with multiple child pages. - Index routes define default child
components.
In FreshCart: - /products/:category/:id loads ProductDetails. - /seller routes use SellerLayout with
Outlet.
--------------------------------------------------
State Management
useState const [cart, setCart] = useState([]);
useEffect - Executes side-effects after render. useEffect(() => {
fetchProducts(); }, []);
Context API - Provides global state without prop drilling. const
AppContext = createContext();
In FreshCart: AppContext manages login modal, cart, axios instance.
--------------------------------------------------
Styling with TailwindCSS - Utility-first CSS classes.
- Responsive utilities (md:, lg:, xl:).
Example: Button
--------------------------------------------------
API Handling with Axios - Axios is used for HTTP
requests to backend. - Supports interceptors for
auth tokens.
In FreshCart: Axios instance connects to backend via VITE_BACKEND_URL.
--------------------------------------------------
Forms and User Input - Controlled components
bind state to input fields.
Example: setEmail(e.target.value)} />
In FreshCart: Login, Add Address, Add Product are controlled forms.
--------------------------------------------------
Performance and Optimization - React.memo
prevents re-render when props do not change. -
Lazy loading improves performance by splitting
code.
--------------------------------------------------
Frontend-Backend Integration - Auth tokens stored
in Context or localStorage. - Axios sends
Authorization headers. - Protected routes redirect
if not logged in.
In FreshCart: Seller routes are protected by isSeller flag.
