Building an Animated Grocery Shop Website using React JS Part-2
Welcome to Part 2 of our tutorial series on building an animated grocery shop website using React JS. In this article, we will continue where we left off in Part 1 and dive deeper into building a dynamic and interactive user interface for our website.
Adding Animation and Interactivity with React JS
One of the key features of a modern web application is its ability to provide a rich and interactive user experience. With React JS, we can easily add animation and interactivity to our website to make it more engaging for our users.
import React, { useState } from 'react';
function GroceryItem({ name, price }) {
const [quantity, setQuantity] = useState(0);
const increaseQuantity = () => {
setQuantity(quantity + 1);
}
const decreaseQuantity = () => {
if (quantity > 0) {
setQuantity(quantity - 1);
}
}
return (
{name}
${price}
{quantity}
);
}
export default GroceryItem;
In the above code snippet, we have created a GroceryItem component that represents a single item in our grocery shop. We have used the useState hook to store the quantity of the item and update it based on user interaction. This allows us to add and remove items from the user’s cart and see the quantity change in real-time.
Enhancing the User Experience
Now that we have added some basic interactivity to our website, let’s take it a step further and enhance the user experience with some animations. With React JS and CSS, we can easily add smooth transitions and animations to make our website more visually appealing.
.grocery-item {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
transition: all 0.3s ease;
}
.grocery-item:hover {
box-shadow: 0 0 10px #ccc;
transform: scale(1.05);
}
In the above CSS code, we have defined some basic styles for our GroceryItem component, including a border, padding, and margin. We have also added a transition effect that will animate these styles when they change, giving the user a smooth and engaging experience when interacting with the items
Conclusion
With React JS, we can easily build a dynamic and interactive website that provides a rich user experience. In this article, we have explored how to add animation and interactivity to our grocery shop website, making it more engaging for our users. In the next part of this series, we will continue to enhance our website with more advanced features and functionality.
Stay tuned for Part 3!
Assets pls
Code pls