document.txt

1. create an app using vite and then install tailwind css just by following instructions from official document.
2. cleaning useless files and folders like public, app.css and content of index.css.
3. creating folder for components and create Gallery.jsx component inside it.
4. signup in unsplash developers for having free image API.
5. create a div inside gallery.jsx and a img tag inside the div.
6. create a useState hook to store images and assign an empty array to it.
7. then we use useEffect hooks to import images. catch and then ... 
8. inside the return and inside {} we check if the image is available then map through each of them and create an image tag.

    {images && images.map((image, index) => {
        <img
            key={index}
            src={img.download_url}
            loading={lazy}
            className=""
        />
    })}

9. images means an array of images.
10. .map() in js means go through every items in the array and create a new output for each of them.
11. image each time is one photo and index is number of that photo inside the array.
12. key={index} , in react each item of the list must have a unique key so the react can easily follow the changes . for this purpose we used index which is the most easy one.
13. src={img.download_url} this is the address of the photo which comes from img object . in this case its in picsum.photos .
14. loading={lazy} is to load the photos slowly so the website works smoothly and prevent long time delay to load all the photos.
15. inside App.jsx we define a div as container for the <Gallery /> 
16. start using lightbox   "18:00 in the video"