Create Responsive Image Gallery in React JS using Ant Design Components | Image Grid React JS App
HTML-код
- Опубликовано: 28 янв 2023
- #reactjs #antd #imagegallery #responsivewebsite #grid #codewithaamir
In this video tutorial I have explained how to create a responsive Image Gallery in React JS using Ant Design Components and explained how to implement search on top of it by integrating server API. This video focuses on the following functions
- How to create a responsive Image Gallery in React JS using Ant Design Components
- How to integrate server API to fetch and search in Image Grid React JS App
- How to add hover effect on photo cards in react photo gallery app using react js and antd system
- How to create a react gallery grid app using antd components like antd Card, antd Space, antd Image, antd Input, antd List and antd Typography
- How to implement search using server APIs for react photo gallery app in reactjs
- How to show preview of multiple photos or images in react
- How to use ant design Image PreviewGroup component in reactjs
- How to make antd List columns responsive for desktop and mobile resolutions
- How to show less cards on smaller resolutions and more cards on larger resolutions using grid prop on antd list component UI System
- How to add remove preview from photo/image using antd Image component
- How to use antd Input Search component in react app to create a searchable image grid react applications
- How to use useState and useEffect react hooks
If you are new to ant-design, I have already added an intro video on ant-design and overview of its components at • Ant Design UI library ... link, please go through that video to set up the ground for further components implementation.
Also in this video we will be using different ant design components, so if you have not gone through those already here are their specific videos to see how those components are being used in react app
Ant Design Card: • How to Create React JS...
Ant Design Typography: • Ant Design Typography ...
Ant Design Input: • How to use Ant Design ...
Also used different hooks and react/javascript concepts based on these videos
useState Hook: • Learn React useState H...
useEffect Hook: • Learn React useEffect ...
JavaScript Promise: • JavaScript Promises Tu...
React Flexbox: • React FlexBox Tutorial...
For more details on ant-design, please visit its documentation at ant.design/components/overview
Happy Coding!
I am blown away by the creativity and effort put into this video. It was well-produced and engaging from start to finish. Thank you for creating such wonderful content.
Glad you enjoyed it 👍
Thank you for such a nice feedback this keeps me motivated !
Nice one!
Thanks @Arnaud POUTIEU
Very professional application a very good example for eCommerce application.
Thank you @Andy,
For a detailed eCommerce application I have a separate video on that at below link ruclips.net/video/maTYhCuHEGw/видео.html I hope you will enjoy that too.
Thanks
@@CodeWithAamir OK thanks
Always welcome !
Nice 👍👍
Thanks 👍
Hey 🎉, I have implemented everything, which works perfectly. Thanks. But am inquiring how I get something like, if the user types I'm some text to search, and submits, it should appear in the url like say, localhost:3000/posts/searched?q='searchedvalue' , how can I achieve this boss
Thank you so much mutebi ug official.
For adding the query searched value you can update the url based on input field change or something like that.
Below is one simple example, the idea here is that you will be navigating with updated query value
const navigate = useNavigate();
{
navigate(`/posts/searched?q=${e.target.value}`);
}}
/>
Please let me know if that worked for you or need any more help on that.
Thank you
@@CodeWithAamir I see it's works but it routes to a not found page!.
@mutebi ug official it should work because we are only adding the query search param not updating any path, but can you please show the corresponding route, means where you have declared the with path /posts/searched?
@@CodeWithAamir I had used context hook to share state, then in my posts component, I did something like
Let path =`/api/v1/posts/search?q=¢{searched Text}
then in the dependency array [searchedText]
This searched text I have shared it with use context hook.
I will try again I see