title
In-Depth React Tutorial: Build a Hotel Reservation Site (with Contentful and Netlify)

description
Learn React by building a beach resort website project. The project uses React router for routing, React context API for state management, Contentful headless CMS for data management, and Netlify to host the application. 💻 Setup Files: https://github.com/john-smilga/setup-files-react-beach-resort 💻 Finished Project: https://github.com/john-smilga/react-beach-resort-project 🎥 Tutorial from Coding Addict. Check out the Coding Addict YouTube channel: https://www.youtube.com/codingaddict 🔗 React Udemy course from Coding Addict: https://www.udemy.com/react-tutorial-and-projects-course/?couponCode=REACTJSONLYTEN -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://www.freecodecamp.org/news

detail
{'title': 'In-Depth React Tutorial: Build a Hotel Reservation Site (with Contentful and Netlify)', 'heatmap': [{'end': 846.125, 'start': 632.476, 'weight': 1}], 'summary': 'This tutorial series covers building a hotel reservation site using react with features like room filtering, contentful headless cms, netlify hosting, react router, context api, responsive design, navbar setup, dynamic components, react jsx rendering, state lifting, image components, dynamic room rendering, context, higher order components, room filters, react form setup, content management with contentful, and deploying with netlify.', 'chapters': [{'end': 250.077, 'segs': [{'end': 66.134, 'src': 'embed', 'start': 0.407, 'weight': 0, 'content': [{'end': 8.214, 'text': "Hey guys and welcome to React Beach Resort project where we'll display hotel rooms and set up functionality so the user can filter them as well.", 'start': 0.407, 'duration': 7.807}, {'end': 15.58, 'text': "During this project, we'll use React Router for our routing, React Context API for our state management,", 'start': 8.955, 'duration': 6.625}, {'end': 20.865, 'text': 'Contentful Headless CMS for our data management and Netlify to host our application.', 'start': 15.58, 'duration': 5.285}, {'end': 24.2, 'text': 'what in the world we will build.', 'start': 22.279, 'duration': 1.921}, {'end': 28.803, 'text': 'Well, first and foremost, I do want to let you know that project will be responsive.', 'start': 24.641, 'duration': 4.162}, {'end': 35.087, 'text': "And since I don't want to jump back and forth for every section that I'm showing you, I might as well tell you that right away.", 'start': 29.504, 'duration': 5.583}, {'end': 39.71, 'text': "And for the navbar on a smaller screen size, we're going to have a toggle button.", 'start': 35.728, 'duration': 3.982}, {'end': 43.273, 'text': 'So this is how the navbar will be displayed on the smaller screen size.', 'start': 40.031, 'duration': 3.242}, {'end': 48.136, 'text': 'But then once we go to the bigger one, we will going to have our traditional navbar.', 'start': 43.793, 'duration': 4.343}, {'end': 55.509, 'text': "right after navbar on the homepage, there will going to be a hero component that we're going to have a background image.", 'start': 48.706, 'duration': 6.803}, {'end': 62.953, 'text': "And in the middle of the hero component, we're going to have a banner that has a link to route to our rooms page.", 'start': 56.15, 'duration': 6.803}, {'end': 66.134, 'text': "Since we're not done with the homepage, we're going to head over back.", 'start': 63.393, 'duration': 2.741}], 'summary': 'Building a responsive react beach resort project using react router and context api, with contentful cms and netlify for data and hosting.', 'duration': 65.727, 'max_score': 0.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA407.jpg'}, {'end': 175.089, 'src': 'embed', 'start': 148.455, 'weight': 2, 'content': [{'end': 152.117, 'text': "Now once we're done with the homepage, notice these are the sections we're creating.", 'start': 148.455, 'duration': 3.662}, {'end': 155.1, 'text': "Now let's head over here to a rooms page.", 'start': 152.638, 'duration': 2.462}, {'end': 162.823, 'text': "where we're going to have all the rooms that currently hotel provides, as well as, since we have multiple rooms,", 'start': 155.66, 'duration': 7.163}, {'end': 165.665, 'text': 'the user will also going to have an option of filtering them up.', 'start': 162.823, 'duration': 2.842}, {'end': 170.507, 'text': "So let's say I'm not interested in all the rooms, I would just be interested in the family rooms.", 'start': 166.125, 'duration': 4.382}, {'end': 175.089, 'text': 'This displays me all the family rooms that hotel provides.', 'start': 171.027, 'duration': 4.062}], 'summary': 'Creating sections for hotel homepage and filtering options for rooms.', 'duration': 26.634, 'max_score': 148.455, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA148455.jpg'}, {'end': 207.507, 'src': 'embed', 'start': 183.513, 'weight': 3, 'content': [{'end': 191.325, 'text': "Then once we look at the family rooms, this is what we're interested, we also have an option of filtering even more, let's say judging by the price.", 'start': 183.513, 'duration': 7.812}, {'end': 199.036, 'text': "And if I'm going to go below the price that I'm looking for, notice it says unfortunately, no rooms match your search parameters.", 'start': 191.866, 'duration': 7.17}, {'end': 200.318, 'text': 'Now, what does that mean?', 'start': 199.497, 'duration': 0.821}, {'end': 205.664, 'text': "If we're going to have no rooms to display that would match the search parameter.", 'start': 200.839, 'duration': 4.825}, {'end': 207.507, 'text': 'this is going to be our error message.', 'start': 205.664, 'duration': 1.843}], 'summary': 'The filtering option allows users to search for family rooms based on price, with an error message displayed if no matches are found.', 'duration': 23.994, 'max_score': 183.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA183513.jpg'}], 'start': 0.407, 'title': 'React beach resort project, hotel website page structure, and room filtering interface', 'summary': 'Introduces the react beach resort project, emphasizing its use of react router, context api, contentful headless cms, and netlify for hosting, as well as its responsive design and toggle button for the navbar. it also outlines the page structure of a hotel website, including the layout and navigation. additionally, it discusses the creation of a user-friendly rooms page with filtering options for different room types.', 'chapters': [{'end': 43.273, 'start': 0.407, 'title': 'React beach resort project', 'summary': 'Introduces the react beach resort project, covering the use of react router, react context api, contentful headless cms, and netlify for hosting, emphasizing its responsive design, and the inclusion of a toggle button for the navbar on smaller screens.', 'duration': 42.866, 'highlights': ['The project will use React Router for routing, React Context API for state management, Contentful Headless CMS for data management, and Netlify for hosting. The project will utilize React Router for routing, React Context API for state management, Contentful Headless CMS for data management, and Netlify for hosting.', 'The project will be responsive and include a toggle button for the navbar on smaller screen sizes. The project will prioritize a responsive design and feature a toggle button for the navbar on smaller screen sizes.']}, {'end': 147.834, 'start': 43.793, 'title': 'Hotel website page structure', 'summary': 'Outlines the page structure of a hotel website, including the layout of the homepage, services, featured rooms, room components, and the use of react router for navigation.', 'duration': 104.041, 'highlights': ['The homepage will include a traditional navbar, a hero component with a background image, and a banner linking to the rooms page.', 'Featured rooms will be displayed separately, and all rooms, whether featured or not, will use a room component to display the room details.', 'The React router will be used to navigate to a single room page, and a custom 404 page will be created for non-existent pages.']}, {'end': 250.077, 'start': 148.455, 'title': 'Hotel room filtering interface', 'summary': 'Discusses the creation of a rooms page with filtering options for different room types, including family rooms, price, and amenities, allowing for a user-friendly interface to find suitable accommodations.', 'duration': 101.622, 'highlights': ['The user interface includes a rooms page with filtering options for various room types and amenities, providing a user-friendly experience for finding accommodations.', 'The filtering options allow users to narrow down their search based on specific criteria such as room type, price, and amenities, enhancing the efficiency of the search process.', 'The error message is displayed when no rooms match the search parameters, indicating the absence of suitable accommodations based on the selected criteria.']}], 'duration': 249.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA407.jpg', 'highlights': ['The project will use React Router for routing, React Context API for state management, Contentful Headless CMS for data management, and Netlify for hosting.', 'The project will be responsive and include a toggle button for the navbar on smaller screen sizes.', 'The user interface includes a rooms page with filtering options for various room types and amenities, providing a user-friendly experience for finding accommodations.', 'The filtering options allow users to narrow down their search based on specific criteria such as room type, price, and amenities, enhancing the efficiency of the search process.', 'The homepage will include a traditional navbar, a hero component with a background image, and a banner linking to the rooms page.']}, {'end': 2205.042, 'segs': [{'end': 323.896, 'src': 'embed', 'start': 293.604, 'weight': 0, 'content': [{'end': 296.185, 'text': "And what's really cool about Contentful?", 'start': 293.604, 'duration': 2.581}, {'end': 302.728, 'text': "that regardless of the application that you're building, whether that would be with vanilla JS, whether with a Gatsby project,", 'start': 296.185, 'duration': 6.543}, {'end': 307.15, 'text': 'whether a React project, which be our case, we can set up our data.', 'start': 302.728, 'duration': 4.422}, {'end': 310.752, 'text': "And then using the CDN, we're going to be able to consume our data.", 'start': 307.61, 'duration': 3.142}, {'end': 313.333, 'text': "What's really cool about Contentful?", 'start': 311.232, 'duration': 2.101}, {'end': 319.474, 'text': "that once we're done with our application, once we're going to set up all our data within the Contentful,", 'start': 313.333, 'duration': 6.141}, {'end': 323.896, 'text': 'it will be possible for us just to add changes within the Contentful.', 'start': 319.474, 'duration': 4.422}], 'summary': 'Contentful allows easy data setup and updates for various web applications.', 'duration': 30.292, 'max_score': 293.604, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA293604.jpg'}, {'end': 359.982, 'src': 'embed', 'start': 332.594, 'weight': 1, 'content': [{'end': 339.416, 'text': "Last but not least, like I said, we're going to use free tier Netlify to host our amazing application so the whole world can see it.", 'start': 332.594, 'duration': 6.822}, {'end': 343.658, 'text': 'As far as setup files go, they will be located on my GitHub account.', 'start': 339.876, 'duration': 3.782}, {'end': 347.319, 'text': 'So you can search for setup files React Beach Resort.', 'start': 344.138, 'duration': 3.181}, {'end': 350.717, 'text': 'or just follow the link that I will leave in description.', 'start': 348.055, 'duration': 2.662}, {'end': 359.982, 'text': 'I also want to let you know that, if you like project based courses, be sure to check out my Udemy courses, where we cover topics like React,', 'start': 351.317, 'duration': 8.665}], 'summary': 'Using free tier netlify to host application, setup files on github, and project-based udemy courses on react.', 'duration': 27.388, 'max_score': 332.594, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA332594.jpg'}, {'end': 846.125, 'src': 'heatmap', 'start': 632.476, 'weight': 1, 'content': [{'end': 637.879, 'text': "And the second one, we're going to be the bigger browser window, where we let's say want to say how the grid works.", 'start': 632.476, 'duration': 5.403}, {'end': 643.923, 'text': 'Okay Now, in this case, I will going to open up the terminal, the integrated terminal in the Visual Studio code.', 'start': 637.999, 'duration': 5.924}, {'end': 647.325, 'text': "By the way, if you don't know where it is, this would be the new terminal.", 'start': 644.504, 'duration': 2.821}, {'end': 652.408, 'text': "And I am using the shortcut here, of course, And then why don't we run the dev server.", 'start': 647.766, 'duration': 4.642}, {'end': 662.17, 'text': "So npm start, we're going to start the local dev server, which will serve our project on localhost 3000.", 'start': 652.948, 'duration': 9.222}, {'end': 666.671, 'text': "Now, like I said, this would be the finished project that we're going to be striving to achieve.", 'start': 662.17, 'duration': 4.501}, {'end': 674.293, 'text': "And then I would want to set by side by side with localhost 3000, where this will be the project that we're currently working on.", 'start': 667.251, 'duration': 7.042}, {'end': 676.614, 'text': 'Okay, now this will be the setup.', 'start': 674.753, 'duration': 1.861}, {'end': 684.56, 'text': 'And assuming that you follow all the steps and everything was successful, I think we can move on to our next phase of our application.', 'start': 677.295, 'duration': 7.265}, {'end': 691.745, 'text': "First things first, I would want to do a bit of a spring cleaning because obviously this comes with a bunch of things that we don't want.", 'start': 685.02, 'duration': 6.725}, {'end': 694.708, 'text': 'And we can start simply by app CSS.', 'start': 692.505, 'duration': 2.203}, {'end': 696.329, 'text': 'Now you have two choices.', 'start': 695.168, 'duration': 1.161}, {'end': 703.877, 'text': 'Either you can import right away my file that you have in setup files, meaning you can just replace it by drag and dropping.', 'start': 696.57, 'duration': 7.307}, {'end': 710.004, 'text': 'Or you can clean out here and just copy and paste the content of the setup file CSS file.', 'start': 704.438, 'duration': 5.566}, {'end': 711.525, 'text': 'this is really up to you.', 'start': 710.464, 'duration': 1.061}, {'end': 713.766, 'text': "In my case, I'm just going to delete this.", 'start': 712.085, 'duration': 1.681}, {'end': 721.189, 'text': "And we're going to create a new one later on when we're going to grab my app CSS from the setup files.", 'start': 714.706, 'duration': 6.483}, {'end': 723.43, 'text': "then I'm going to head over, obviously to the app js.", 'start': 721.189, 'duration': 2.241}, {'end': 726.451, 'text': "And for the time being, we're just going to comment this out.", 'start': 724.21, 'duration': 2.241}, {'end': 729.793, 'text': "Because otherwise, our application, obviously, we're going to break.", 'start': 726.811, 'duration': 2.982}, {'end': 738.577, 'text': 'Then we can head over maybe to index.js, and I would want to comment out index.css, because, like I already said three times,', 'start': 730.573, 'duration': 8.004}, {'end': 742.319, 'text': 'probably our main CSS file will be just one.', 'start': 738.577, 'duration': 3.742}, {'end': 745.18, 'text': "So we don't need the second one with index.css.", 'start': 742.619, 'duration': 2.561}, {'end': 748.082, 'text': "Then we don't need the logo SVG.", 'start': 745.961, 'duration': 2.121}, {'end': 750.983, 'text': 'So we can just delete this sucker as well.', 'start': 749.042, 'duration': 1.941}, {'end': 758.985, 'text': "So let's say logo SVG, you go bye bye, then what we have, well, again, we have app js breaking.", 'start': 751.663, 'duration': 7.322}, {'end': 764.206, 'text': "So why don't we do very simply by deleting everything that we have currently in the div.", 'start': 759.565, 'duration': 4.641}, {'end': 768.768, 'text': "And we can just have I don't know, maybe a react fragment in this case.", 'start': 765.007, 'duration': 3.761}, {'end': 775.494, 'text': "And we can just say okay, within the rack fragment, we're going to place a hello from app just for the time being.", 'start': 769.588, 'duration': 5.906}, {'end': 777.676, 'text': 'Hello from app.', 'start': 776.154, 'duration': 1.522}, {'end': 778.957, 'text': "Now let's save that.", 'start': 778.176, 'duration': 0.781}, {'end': 780.818, 'text': 'And there should be no errors.', 'start': 779.277, 'duration': 1.541}, {'end': 784.862, 'text': "I'm prompt part from the fact that I'm trying to import the logo, of course.", 'start': 781.419, 'duration': 3.443}, {'end': 786.524, 'text': 'So I can delete that.', 'start': 785.563, 'duration': 0.961}, {'end': 789.186, 'text': 'And yes, everything is working correctly.', 'start': 787.204, 'duration': 1.982}, {'end': 791.188, 'text': 'We do have our Hello from app.', 'start': 789.266, 'duration': 1.922}, {'end': 794.65, 'text': 'then we will going to head over to the public one.', 'start': 791.929, 'duration': 2.721}, {'end': 801.751, 'text': 'And within the index HTML, I would just want to create a new title, because at the moment I have react app.', 'start': 795.49, 'duration': 6.261}, {'end': 809.113, 'text': "And I'm going to call my one resort resort recording recording.", 'start': 802.411, 'duration': 6.702}, {'end': 815.214, 'text': "Alright, now let's say that this is going to show me two things where I have beach resort, that will be my finished one.", 'start': 809.133, 'duration': 6.081}, {'end': 817.775, 'text': 'And then I have a resort recording.', 'start': 815.694, 'duration': 2.081}, {'end': 825.161, 'text': "Now, as far as the setup files are concerned, why don't we go over to the setup folder, and we're going to go one by one.", 'start': 818.3, 'duration': 6.861}, {'end': 827.422, 'text': 'So here we have the redirects.', 'start': 825.761, 'duration': 1.661}, {'end': 831.402, 'text': 'And like I said, I will going to talk about redirects in this video.', 'start': 827.842, 'duration': 3.56}, {'end': 833.563, 'text': "And in fact, I'm going to do that right now.", 'start': 831.942, 'duration': 1.621}, {'end': 838.424, 'text': "So what happens is, since we're using the react router DOM,", 'start': 834.163, 'duration': 4.261}, {'end': 846.125, 'text': "they don't play very nicely right out of the box with a Netlify where we will going to be hosting our application eventually.", 'start': 838.424, 'duration': 7.701}], 'summary': 'Setting up a web project, cleaning up files, and making necessary adjustments for a finished project with specific instructions.', 'duration': 213.649, 'max_score': 632.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA632476.jpg'}, {'end': 952.917, 'src': 'embed', 'start': 924.21, 'weight': 2, 'content': [{'end': 930.732, 'text': "And we're going to head over back to folder on the source, and just copy and paste it somewhere in the source.", 'start': 924.21, 'duration': 6.522}, {'end': 940.574, 'text': 'Now it is important that you actually use the same structure as I am where the files are at, because I do have already some paths here.', 'start': 931.332, 'duration': 9.242}, {'end': 947.456, 'text': "So let's say when I'm setting up the hero backgrounds or something like that, I am already having some kind of paths.", 'start': 941.054, 'duration': 6.402}, {'end': 952.917, 'text': "So it's important if you change the path, notice, I'm actually looking for the images folder right now.", 'start': 947.936, 'duration': 4.981}], 'summary': 'Copy and paste files in the same folder structure to maintain existing paths for images.', 'duration': 28.707, 'max_score': 924.21, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA924210.jpg'}, {'end': 2167.421, 'src': 'embed', 'start': 2137.919, 'weight': 3, 'content': [{'end': 2140.421, 'text': 'And then next, we can start working on our navbar.', 'start': 2137.919, 'duration': 2.502}, {'end': 2148.705, 'text': 'Once we have successfully set up our react router, with the URL parameters as well as the error page.', 'start': 2140.901, 'duration': 7.804}, {'end': 2156.55, 'text': 'just as a side note, I want to let you know that if you want to get more information about what is happening with the react router DOM,', 'start': 2148.705, 'duration': 7.845}, {'end': 2158.391, 'text': 'just explore their documentation.', 'start': 2156.55, 'duration': 1.841}, {'end': 2167.421, 'text': 'where in this case, they do talk about the URL parameters, basically what they are and how to work with them, as well as we have our no match.', 'start': 2158.911, 'duration': 8.51}], 'summary': 'Planning to set up react router with url parameters and error page for navbar.', 'duration': 29.502, 'max_score': 2137.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA2137919.jpg'}], 'start': 250.537, 'title': 'Setting up web project with react and contentful', 'summary': 'Covers setting up a web project using react, contentful, and netlify, emphasizing the flexibility and benefits of contentful, react and javascript usage, and the setup process for hosting on netlify. it also includes guidance on folder structure, react router dom setup, and offers $10 course coupons for udemy.', 'chapters': [{'end': 332.098, 'start': 250.537, 'title': 'Building project with local and contentful data', 'summary': 'Discusses the use of local data, contentful, and netlify for building a project, emphasizing the flexibility and benefits of using contentful for setting up and managing data.', 'duration': 81.561, 'highlights': ['The chapter emphasizes the flexibility of using Contentful, a headless CMS, for setting up and managing data, regardless of the type of application being built, and highlights the ability to make changes within Contentful without the need to store the project locally.', 'It is mentioned that both Contentful and Netlify will be used on a free tier, eliminating the need for any payment, thus making it cost-effective for project development.', 'The chapter explains that initially, local data will be provided for the project, allowing the completion of the entire project without the need to work with Contentful or Netlify.']}, {'end': 923.45, 'start': 332.594, 'title': 'Setting up react beach resort', 'summary': 'Outlines the setup process for hosting a react application using the free tier netlify, setting up project files, and installing dependencies, focusing on react and javascript, with $10 course coupons available for udemy courses.', 'duration': 590.856, 'highlights': ['The chapter outlines the setup process for hosting a React application using the free tier Netlify The speaker plans to use the free tier of Netlify to host the application, enabling global accessibility.', 'setting up project files, and installing dependencies, focusing on React and JavaScript The speaker provides detailed instructions for setting up project files on GitHub and installing dependencies such as React icons and React Router DOM.', 'with $10 course coupons available for Udemy courses The speaker mentions the availability of $10 course coupons for Udemy courses covering topics like React, JavaScript, Gatsby, and styled components.']}, {'end': 1405.077, 'start': 924.21, 'title': 'Setting up folder structure for web application', 'summary': 'Covers setting up the folder structure for a web application, emphasizing the importance of maintaining the same file structure, handling images, and creating pages for the project.', 'duration': 480.867, 'highlights': ['Emphasizing the importance of maintaining the same file structure It is crucial to maintain the same folder structure to avoid path issues when setting up hero backgrounds and data files, ensuring that the path for images and data remains consistent.', 'Handling images and data files within the source folder Images and data files should be placed within the source folder to ensure that the paths remain valid, enabling the use of images locally and with external platforms like Contentful.', 'Creating pages for the project The project will involve creating functional and class-based components for pages such as the homepage, room display, single room information, and an error page, with an emphasis on maintaining a consistent folder structure.']}, {'end': 2205.042, 'start': 1405.957, 'title': 'Setting up react router dom', 'summary': 'Covers setting up react router dom to navigate between different pages using route components and url parameters, with a focus on utilizing the browser router, route, link, and switch components. it also demonstrates the use of route parameters to access specific page information and the error page setup.', 'duration': 799.085, 'highlights': ['Demonstrating the setup of React Router DOM to navigate between different pages using route components and URL parameters. The transcript discusses the process of setting up React Router DOM to allow navigation between different pages using route components and URL parameters, demonstrating the use of components like browser router, route, link, and switch.', 'Explaining the use of route parameters to access specific page information and demonstrating the setup of the error page. The chapter explains the use of route parameters to access specific page information and demonstrates the setup of the error page using the switch component, ensuring the rendering of the error page when no match is found for the URL.', 'Emphasizing the importance of following the React Router DOM documentation for additional information on URL parameters and no match scenarios. The speaker emphasizes the significance of exploring the React Router DOM documentation for further understanding of URL parameters and no match scenarios, highlighting the comprehensive information provided in the documentation.']}], 'duration': 1954.505, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA250537.jpg', 'highlights': ['The chapter emphasizes the flexibility of using Contentful, a headless CMS, for setting up and managing data, regardless of the type of application being built.', 'The chapter outlines the setup process for hosting a React application using the free tier Netlify, enabling global accessibility.', 'Emphasizing the importance of maintaining the same folder structure to avoid path issues when setting up hero backgrounds and data files.', 'Demonstrating the setup of React Router DOM to navigate between different pages using route components and URL parameters.']}, {'end': 3069.863, 'segs': [{'end': 2282.798, 'src': 'embed', 'start': 2231.466, 'weight': 3, 'content': [{'end': 2240.45, 'text': 'So one of the most important things that we need to remember that navbar will be placed around the switch statement because we are going to use the navbar for navigation.', 'start': 2231.466, 'duration': 8.984}, {'end': 2243.592, 'text': 'In order to do that, I will going to create a new folder.', 'start': 2241.01, 'duration': 2.582}, {'end': 2246.874, 'text': "Now I'm going to call my folder components.", 'start': 2244.433, 'duration': 2.441}, {'end': 2252.058, 'text': "And then within the components, we're going to be placing bunch of components.", 'start': 2247.635, 'duration': 4.423}, {'end': 2256.942, 'text': 'And then the first one will be nav bar, j s.', 'start': 2252.659, 'duration': 4.283}, {'end': 2265.208, 'text': "And why don't we do it very simply, where I will going to place a class based component, because I do want to set up here the toggling.", 'start': 2256.942, 'duration': 8.266}, {'end': 2271.172, 'text': "And why don't we write just Hello from navbar, let's save that.", 'start': 2265.929, 'duration': 5.243}, {'end': 2273.873, 'text': 'And then within the app.js.', 'start': 2271.872, 'duration': 2.001}, {'end': 2279.516, 'text': 'I would want to import so somewhere here, maybe in the bottom last import import.', 'start': 2273.873, 'duration': 5.643}, {'end': 2281.317, 'text': "then we're looking for navbar.", 'start': 2279.516, 'duration': 1.801}, {'end': 2282.798, 'text': 'this will be in our components.', 'start': 2281.317, 'duration': 1.481}], 'summary': 'Creating a navbar component in a new folder for navigation.', 'duration': 51.332, 'max_score': 2231.466, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA2231466.jpg'}, {'end': 2401.581, 'src': 'embed', 'start': 2371.495, 'weight': 2, 'content': [{'end': 2374.778, 'text': 'So, first and foremost, we would need to install them, which we did.', 'start': 2371.495, 'duration': 3.283}, {'end': 2385.249, 'text': 'then we have few libraries that we can choose from whether you want to do font, awesome ionic material design, and then the way you would import.', 'start': 2374.778, 'duration': 10.471}, {'end': 2391.235, 'text': 'this would be the name of the icon that you would like to import and then the library where you want to import from.', 'start': 2385.249, 'duration': 5.986}, {'end': 2393.516, 'text': "So in our case, we're going to use font awesome.", 'start': 2391.795, 'duration': 1.721}, {'end': 2395.898, 'text': 'So we just need to add this forward slash fa.', 'start': 2393.596, 'duration': 2.302}, {'end': 2401.581, 'text': 'And then if you want to render that icon, the only thing you need to do is just name it.', 'start': 2396.598, 'duration': 4.983}], 'summary': 'Installed libraries for importing icons, using font awesome library to render icons.', 'duration': 30.086, 'max_score': 2371.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA2371495.jpg'}, {'end': 2526.373, 'src': 'embed', 'start': 2495.012, 'weight': 0, 'content': [{'end': 2500.497, 'text': "Now, link component is going to be the thing that we're going to use in the number.", 'start': 2495.012, 'duration': 5.485}, {'end': 2507.823, 'text': "because we're going to use the link component then to prop, this will be actually directing our user to a specific URL.", 'start': 2500.497, 'duration': 7.326}, {'end': 2513.247, 'text': "Okay, now, let's import it, import, and let's name this link.", 'start': 2508.343, 'duration': 4.904}, {'end': 2517.529, 'text': 'from react router down and get used to this import.', 'start': 2513.968, 'duration': 3.561}, {'end': 2526.373, 'text': "We will do this all throughout our application, because we'll have a bunch of buttons that we're going to be directing the user to some other route.", 'start': 2518.05, 'duration': 8.323}], 'summary': 'Using the link component from react router to direct users to specific urls.', 'duration': 31.361, 'max_score': 2495.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA2495012.jpg'}, {'end': 3015.505, 'src': 'embed', 'start': 2987.926, 'weight': 1, 'content': [{'end': 2994.968, 'text': 'So probably a better way would be setting up some kind of constants folder or data folder, where you have access to these links.', 'start': 2987.926, 'duration': 7.042}, {'end': 2998.309, 'text': 'So set them up as some kind of array and render them.', 'start': 2995.188, 'duration': 3.121}, {'end': 3003.354, 'text': "Now, in my case, there wasn't a bunch of links, and I was just rendering them in one place.", 'start': 2998.709, 'duration': 4.645}, {'end': 3005.976, 'text': 'So I thought this might be a bit of an overkill.', 'start': 3003.814, 'duration': 2.162}, {'end': 3015.505, 'text': "But normally, if you're rendering in multiple places and you have way more links, it makes more sense to set up this as some kind of array array of,", 'start': 3006.336, 'duration': 9.169}], 'summary': 'Suggests organizing links in a separate data folder as an array for efficient access and rendering.', 'duration': 27.579, 'max_score': 2987.926, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA2987926.jpg'}], 'start': 2205.662, 'title': 'Adding navbar component and navigation setup in react', 'summary': 'Discusses adding a navbar component for navigation and the process of working with react icons, including installing and importing them, setting up navigation links using the link component from react router, and organizing links using arrays for efficient rendering.', 'chapters': [{'end': 2308.582, 'start': 2205.662, 'title': 'Adding navbar component for navigation', 'summary': 'Discusses the importance of placing the navbar around the switch statement for navigation, creating a new folder for components, adding a navbar component, and importing it into the app.js to ensure its presence on each page.', 'duration': 102.92, 'highlights': ['The navbar will be placed around the switch statement for navigation, ensuring its presence on each page.', "A new folder 'components' will be created to store the navbar component and other components.", 'A class based component for the navbar will be created to set up the toggling functionality.', 'The navbar component will be imported into the app.js to render it on each page.']}, {'end': 3069.863, 'start': 2309.102, 'title': 'Working with react icons and setting up navigation', 'summary': "Covers the process of working with react icons, including installing and importing them, and setting up navigation links using the link component from react router. it also explains the setup of the state for toggling the navbar, handling the navbar's appearance on smaller screens, and the importance of organizing links using arrays for efficient rendering.", 'duration': 760.761, 'highlights': ['The chapter explains the process of working with React icons, including the installation and importing of different libraries such as Font Awesome, Ionic, and Material Design, and how to render the icons using the name of the icon and the library. It also emphasizes the benefits of using React icons, such as rendering icons as SVG and accessing a variety of icons.', 'The process of setting up navigation links is detailed, using the Link component from React Router and directing users to specific URLs. It also highlights the importance of organizing navigation links using arrays and rendering them efficiently.', 'The setup of the state for toggling the navbar and handling its appearance on smaller screens is explained, including the use of a handle toggle method and CSS for the navbar. It also emphasizes the importance of commenting out specific CSS to ensure visibility of navbar changes.', 'The significance of organizing links using arrays for efficient rendering is explained, emphasizing the importance of centralizing link information in a constants or data folder to enable easy and consistent changes throughout the project.']}], 'duration': 864.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA2205662.jpg', 'highlights': ['The process of setting up navigation links using the Link component from React Router and organizing links using arrays for efficient rendering.', 'The significance of organizing links using arrays for efficient rendering is explained, emphasizing the importance of centralizing link information in a constants or data folder.', 'The process of working with React icons, including the installation and importing of different libraries such as Font Awesome, Ionic, and Material Design, and how to render the icons using the name of the icon and the library.', "A new folder 'components' will be created to store the navbar component and other components.", 'A class based component for the navbar will be created to set up the toggling functionality.']}, {'end': 4660.613, 'segs': [{'end': 3342.042, 'src': 'embed', 'start': 3314.656, 'weight': 3, 'content': [{'end': 3318.279, 'text': 'But in this case, I would want to pass default hero.', 'start': 3314.656, 'duration': 3.623}, {'end': 3327.587, 'text': 'And since this will be accessing the class that I had the default hero class, since that is the whole setup in the hero, check this out.', 'start': 3319.02, 'duration': 8.567}, {'end': 3331.13, 'text': 'Now I do have this massive image in my homepage.', 'start': 3328.067, 'duration': 3.063}, {'end': 3337.196, 'text': 'However, I would want to set up some kind of default props for this hero component.', 'start': 3331.75, 'duration': 5.446}, {'end': 3342.042, 'text': 'Because the issue right now is that yes, I am expecting this hero prop.', 'start': 3337.677, 'duration': 4.365}], 'summary': 'Setting default props for hero component to address missing prop issue.', 'duration': 27.386, 'max_score': 3314.656, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA3314656.jpg'}, {'end': 3615.276, 'src': 'embed', 'start': 3584.845, 'weight': 2, 'content': [{'end': 3592.392, 'text': "So where I do have the background, then within the banner, obviously we're going to be placing all this information, whether that would be title,", 'start': 3584.845, 'duration': 7.547}, {'end': 3598.178, 'text': 'subtitle, this underline, and then, as a child, we will be able to place something else.', 'start': 3592.392, 'duration': 5.786}, {'end': 3602.441, 'text': "Now, in my case, I will going to be placing each and every page, we're going to have some kind of link.", 'start': 3598.318, 'duration': 4.123}, {'end': 3606.284, 'text': 'And like I said, you could set this up everything in one component.', 'start': 3603.081, 'duration': 3.203}, {'end': 3615.276, 'text': "Now the reason why I split this up, because my idea was like this to show you that you can always reuse them however you'd like.", 'start': 3606.829, 'duration': 8.447}], 'summary': 'The transcript discusses organizing information within a banner and reusing components for flexibility.', 'duration': 30.431, 'max_score': 3584.845, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA3584845.jpg'}, {'end': 4192.143, 'src': 'embed', 'start': 4169.671, 'weight': 1, 'content': [{'end': 4178.856, 'text': "The same way you can just set up one component for the banner, the title will be just our rooms, title our rooms, and we'll have no subtitle.", 'start': 4169.671, 'duration': 9.185}, {'end': 4182.898, 'text': 'So since we have no default one, no nothing, then nothing will be rendered.', 'start': 4179.417, 'duration': 3.481}, {'end': 4192.143, 'text': "And then in this case, where we're navigating back home, so again, link to and why don't we set up again forward slash and two.", 'start': 4183.639, 'duration': 8.504}], 'summary': 'Setting up a single component for the banner with no subtitle, resulting in nothing being rendered. navigating back home with a link to /two.', 'duration': 22.472, 'max_score': 4169.671, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA4169671.jpg'}, {'end': 4268.012, 'src': 'embed', 'start': 4239.118, 'weight': 0, 'content': [{'end': 4243.94, 'text': 'Next one up, we have services that will be rendered only in the homepage.', 'start': 4239.118, 'duration': 4.822}, {'end': 4252.304, 'text': "And within the services, we're also going to create one component that we will reuse later on, which will be titled for the sections.", 'start': 4244.62, 'duration': 7.684}, {'end': 4257.066, 'text': 'So notice how we have services titled and featured rooms, so on and so forth.', 'start': 4252.784, 'duration': 4.282}, {'end': 4260.468, 'text': "That way, we're going to create both of these components right now.", 'start': 4257.526, 'duration': 2.942}, {'end': 4268.012, 'text': "Okay, now let me open up the sidebar, I would want to close everything that I have currently open, I don't need it.", 'start': 4260.908, 'duration': 7.104}], 'summary': 'Creating homepage services and reusable component for sections.', 'duration': 28.894, 'max_score': 4239.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA4239118.jpg'}], 'start': 3070.363, 'title': 'Creating dynamic components and navigation', 'summary': 'Covers creating dynamic hero and banner components with default props for reusability, building room navigation with react router dom, and rendering homepage components with state management and icons for a more dynamic styling approach.', 'chapters': [{'end': 3516.073, 'start': 3070.363, 'title': 'Creating hero component and dynamic styling', 'summary': 'Covers the creation of a hero component with dynamic styling using default props, allowing reusability and customization of background images for different pages, achieving a more dynamic styling approach.', 'duration': 445.71, 'highlights': ['Creating a hero component with dynamic styling using default props for reusability and customization of background images for different pages. reusability, customization, dynamic styling, default props', 'Explanation of the CSS setup for the hero component, including the use of classes to override default styling and achieve dynamic backgrounds for different pages. CSS setup, dynamic backgrounds, class overrides', "Demonstration of utilizing the 'room zero' class to override default styling and customize the background image for the rooms page, showcasing the flexibility of dynamic styling. customization, dynamic styling, 'room zero' class"]}, {'end': 3862.311, 'start': 3516.073, 'title': 'Setting up error page and creating banner component', 'summary': 'Focuses on setting up the error page and creating the banner component, emphasizing the customization and reusability of components, with a detailed explanation of the rendering process and the use of flexbox for layout.', 'duration': 346.238, 'highlights': ['The chapter emphasizes the customization and reusability of components, with a detailed explanation of the rendering process and the use of flexbox for layout. The author emphasizes the ability to customize and reuse components, explaining the rendering process in detail and showcasing the use of flexbox for layout.', 'The chapter focuses on setting up the error page and creating the banner component. The primary focus is on setting up the error page and creating the banner component.', 'The author explains the rendering process and the use of flexbox for layout. The author provides a detailed explanation of the rendering process and demonstrates the use of flexbox for layout.']}, {'end': 4169.171, 'start': 3862.311, 'title': 'Setting up room navigation', 'summary': 'Involves setting up room navigation using react router dom, including importing components, setting up links, and building banners with titles and subtitles, while reusing css classes and components throughout the project.', 'duration': 306.86, 'highlights': ['Setting up room navigation using React Router DOM The transcript involves setting up navigation to rooms using React Router DOM.', 'Importing components and setting up links The chapter includes importing components such as banner and link from React Router DOM and setting up links to navigate between different pages.', "Building banners with titles and subtitles The process involves building banners with titles like 'luxurious rooms' and subtitles like 'deluxe' to display information about the rooms.", "Reusing CSS classes and components throughout the project The transcript emphasizes reusing the 'button primary' class and components like hero and banner across different sections of the project."]}, {'end': 4660.613, 'start': 4169.671, 'title': 'Creating homepage components', 'summary': 'Covers the creation of components for the homepage, including the banner, services, and titles, with specific instructions on rendering components and incorporating icons and state management.', 'duration': 490.942, 'highlights': ['Creating components for the homepage, including banner, services, and titles, with specific instructions on rendering components and incorporating icons and state management. Creation of homepage components, specific instructions on rendering components, incorporating icons, and state management', "Setting up a component for the banner with the title 'Our Rooms' and creating a navigation link to return back home. Setting up a banner component, creating a navigation link", "Setting up the 'Services' component for the homepage and creating a reusable 'Title' component for sections, with specific details on rendering and styling. Setting up the 'Services' component, creating a reusable 'Title' component, rendering and styling"]}], 'duration': 1590.25, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA3070363.jpg', 'highlights': ['Creation of homepage components, specific instructions on rendering components, incorporating icons, and state management', 'Setting up room navigation using React Router DOM', 'Building banners with titles and subtitles, reusing CSS classes and components throughout the project', 'Creating a hero component with dynamic styling using default props for reusability and customization of background images for different pages']}, {'end': 5983.946, 'segs': [{'end': 4891.046, 'src': 'embed', 'start': 4862.132, 'weight': 0, 'content': [{'end': 4863.333, 'text': 'So we have services.', 'start': 4862.132, 'duration': 1.201}, {'end': 4872.6, 'text': "then services center this is for styling where, all throughout the project, I'm using grid and I'm using this grid template columns.", 'start': 4863.333, 'duration': 9.267}, {'end': 4879.562, 'text': 'where basically you can set up the repeat function, then with the repeat function, we can have either auto fit or auto fill.', 'start': 4873.22, 'duration': 6.342}, {'end': 4885.184, 'text': 'So, with auto fill, this is going to make sure that the columns fill out the whole screen.', 'start': 4880.202, 'duration': 4.982}, {'end': 4886.724, 'text': 'with auto fill.', 'start': 4885.184, 'duration': 1.54}, {'end': 4891.046, 'text': 'if there would be extra space, it would add a empty column which, by the way,', 'start': 4886.724, 'duration': 4.322}], 'summary': 'Services center uses grid template columns with auto fill for whole screen coverage.', 'duration': 28.914, 'max_score': 4862.132, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA4862132.jpg'}, {'end': 5330.484, 'src': 'embed', 'start': 5305.759, 'weight': 1, 'content': [{'end': 5314.186, 'text': 'So the short answer is that when we will going to be accessing our data from Contentful, this is going to be their structure.', 'start': 5305.759, 'duration': 8.427}, {'end': 5316.688, 'text': 'Now, obviously, they will going to have more information.', 'start': 5314.667, 'duration': 2.021}, {'end': 5319.829, 'text': "So the structure, we're going to be the same.", 'start': 5317.566, 'duration': 2.263}, {'end': 5324.356, 'text': "But as you're going to be looking at a systems property, there's going to be a bunch of things.", 'start': 5319.869, 'duration': 4.487}, {'end': 5330.484, 'text': "So the only thing that we're looking for is the ID, there's going to be other things, if you want, you can obviously access them.", 'start': 5324.957, 'duration': 5.527}], 'summary': 'Accessing data from contentful will follow a specific structure, with the focus on retrieving the id.', 'duration': 24.725, 'max_score': 5305.759, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA5305759.jpg'}, {'end': 5865.213, 'src': 'embed', 'start': 5840.102, 'weight': 2, 'content': [{'end': 5847.946, 'text': 'So this would be the provider, then we also do need to create a consumer, because we would want to access the data.', 'start': 5840.102, 'duration': 7.844}, {'end': 5858.552, 'text': 'Now, the most simplest way would be const room, consumer again, name, however you would like, consumer, and then we need to use the room.', 'start': 5848.466, 'duration': 10.086}, {'end': 5865.213, 'text': 'obviously context, since that is the context we created and then set this equal to a consumer.', 'start': 5859.67, 'duration': 5.543}], 'summary': 'Creating a provider and consumer to access data using context.', 'duration': 25.111, 'max_score': 5840.102, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA5840102.jpg'}], 'start': 4661.153, 'title': 'React jsx rendering, css grid and data structuring, and creating a react context api', 'summary': 'Covers rendering jsx in a react component, utilizing map method for array iteration and styling with css, using css grid for responsive layouts, structuring data for local and external use, and setting up a react context api for room context, provider, and consumer.', 'chapters': [{'end': 4861.532, 'start': 4661.153, 'title': 'React jsx rendering', 'summary': 'Discusses the process of rendering jsx in a react component, utilizing the map method to iterate through an array and render a list with unique key props, while also styling the elements using css.', 'duration': 200.379, 'highlights': ['The chapter discusses the process of rendering JSX in a React component The transcript explains the process of rendering JSX in a React component, emphasizing the use of JSX for creating UI elements.', 'Utilizing the map method to iterate through an array and render a list with unique key props The speaker demonstrates the use of the map method to iterate through an array and render a list, highlighting the importance of unique key props for each item in the list.', 'Styling the elements using CSS The speaker adds styling to the elements by utilizing CSS, emphasizing the importance of consistent styling and demonstrating how to access CSS files in a React application.']}, {'end': 5467.304, 'start': 4862.132, 'title': 'Css grid and data structuring', 'summary': 'Highlights the usage of css grid template columns for creating responsive layouts, the rationale behind structuring data for local and external use, and the importance of maintaining a consistent data structure for seamless integration with contentful, aiming to facilitate easy data access and filtering.', 'duration': 605.172, 'highlights': ['The chapter emphasizes the usage of grid template columns with auto-fill and min-max properties for responsive layout, ensuring the columns fill the screen and adapt to different screen sizes, with a minimum size of 255 pixels and spanning as much as possible until accommodating two columns in one line. Usage of grid template columns with auto-fill and min-max properties for responsive layout, ensuring adaptability to different screen sizes, with a minimum size of 255 pixels and spanning as much as possible until accommodating two columns in one line.', 'The transcript explains the rationale behind structuring data in a specific way to facilitate seamless integration with Contentful, aiming to avoid the need for extensive reconstruction when switching from local to external data sources, ensuring a consistent data structure for easy access and filtering. Rationale behind structuring data to facilitate seamless integration with Contentful, aiming to avoid extensive reconstruction when switching data sources, ensuring a consistent data structure for easy access and filtering.', 'The importance of maintaining a consistent data structure for seamless integration with Contentful is highlighted, aiming to facilitate easy data access and filtering, ensuring compatibility and ease of use for both local and external data sources. Importance of maintaining a consistent data structure for seamless integration with Contentful, aiming to facilitate easy data access and filtering, ensuring compatibility and ease of use for both local and external data sources.']}, {'end': 5983.946, 'start': 5467.304, 'title': 'Creating a react context api', 'summary': 'Discusses the process of setting up a react context api, creating a room context, provider, and consumer, and exporting them for usage, demonstrating the steps and code involved in the setup and integration into the application.', 'duration': 516.642, 'highlights': ['Setting up the room context, provider, and consumer for the React Context API The speaker explains the process of setting up a room context using the create context method, creating a provider and consumer for the context, and exporting them for usage.', 'Demonstrating the flexibility of passing state values through the context provider The speaker explains how the state values and methods can be set up within the context provider, allowing for flexible data passing, including passing the whole object as a state value.', 'Integrating the context provider into the application using the exported components The speaker demonstrates the integration of the context provider into the application by wrapping the component tree with the room context provider in the index file, showcasing the usage of the exported components.']}], 'duration': 1322.793, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA4661153.jpg', 'highlights': ['Usage of grid template columns with auto-fill and min-max properties for responsive layout, ensuring adaptability to different screen sizes, with a minimum size of 255 pixels and spanning as much as possible until accommodating two columns in one line.', 'The importance of maintaining a consistent data structure for seamless integration with Contentful is highlighted, aiming to facilitate easy data access and filtering, ensuring compatibility and ease of use for both local and external data sources.', 'Setting up the room context, provider, and consumer for the React Context API The speaker explains the process of setting up a room context using the create context method, creating a provider and consumer for the context, and exporting them for usage.']}, {'end': 7686.172, 'segs': [{'end': 6054.453, 'src': 'embed', 'start': 6024.344, 'weight': 0, 'content': [{'end': 6025.085, 'text': "And what's happening?", 'start': 6024.344, 'duration': 0.741}, {'end': 6034.448, 'text': "that, as you're doing that you're passing, you're doing basically a prop drilling, where you're passing those props down unnecessarily,", 'start': 6025.085, 'duration': 9.363}, {'end': 6040.789, 'text': "because the component that's going to be using is just sitting pretty much wrapped in three other components.", 'start': 6034.448, 'duration': 6.341}, {'end': 6042.11, 'text': 'but you do need to pass it through.', 'start': 6040.789, 'duration': 1.321}, {'end': 6050.372, 'text': "So if I start with an app, I'm going to have to pass the home home is going to pass down to featured rooms, and then so on and so forth.", 'start': 6042.47, 'duration': 7.902}, {'end': 6054.453, 'text': 'So what context allows us to do is avoid that step.', 'start': 6050.792, 'duration': 3.661}], 'summary': 'Avoid unnecessary prop drilling using context.', 'duration': 30.109, 'max_score': 6024.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA6024344.jpg'}, {'end': 6586.337, 'src': 'embed', 'start': 6560.205, 'weight': 2, 'content': [{'end': 6565.046, 'text': "And our whole work is going to start, where we're going to create a bunch of functions here, that we're going to work with,", 'start': 6560.205, 'duration': 4.841}, {'end': 6566.727, 'text': 'state and so on and so forth.', 'start': 6565.046, 'duration': 1.681}, {'end': 6575.47, 'text': 'But these would be the bare bones of how we can start working with a context API that creates provider and consumer.', 'start': 6567.087, 'duration': 8.383}, {'end': 6583.835, 'text': 'we wrap the provider within our component tree, or component tree gets wrapped with a provider.', 'start': 6575.47, 'duration': 8.365}, {'end': 6586.337, 'text': 'And then we have multiple ways how we can access it.', 'start': 6584.195, 'duration': 2.142}], 'summary': 'Creating functions to work with state and implement a context api for provider and consumer.', 'duration': 26.132, 'max_score': 6560.205, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA6560205.jpg'}, {'end': 6632.854, 'src': 'embed', 'start': 6602.948, 'weight': 1, 'content': [{'end': 6609.053, 'text': 'Because the render props is a little bit I mean, just takes a little bit of wrapping your mind around it.', 'start': 6602.948, 'duration': 6.105}, {'end': 6612.476, 'text': 'But static context type, get the context that you have.', 'start': 6609.554, 'duration': 2.922}, {'end': 6616.64, 'text': 'And then you have access to whatever you have currently in your context.', 'start': 6612.997, 'duration': 3.643}, {'end': 6623.906, 'text': "Once we understand the general idea behind the context API, why don't we tailor it to our application?", 'start': 6617.52, 'duration': 6.386}, {'end': 6626.365, 'text': "So we're going to do our setup.", 'start': 6624.602, 'duration': 1.763}, {'end': 6632.854, 'text': "I will going to get rid of this greeting as well as name, because at the moment we're going to do later set up anyway.", 'start': 6626.365, 'duration': 6.489}], 'summary': 'Understanding the context api for tailoring to our application setup.', 'duration': 29.906, 'max_score': 6602.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA6602948.jpg'}, {'end': 6696.374, 'src': 'embed', 'start': 6667.978, 'weight': 4, 'content': [{'end': 6672.961, 'text': "that's the reason why it's probably more useful to place that string within the curly braces.", 'start': 6667.978, 'duration': 4.983}, {'end': 6676.443, 'text': 'So then at least you understand how would be the general setup.', 'start': 6673.001, 'duration': 3.442}, {'end': 6676.963, 'text': 'All right.', 'start': 6676.663, 'duration': 0.3}, {'end': 6680.806, 'text': 'Now I also want to add different values in state.', 'start': 6677.404, 'duration': 3.402}, {'end': 6686.249, 'text': "But before I do that, why don't we import all the items that we have in the data.", 'start': 6681.386, 'duration': 4.863}, {'end': 6690.051, 'text': 'And like I said, I do have it as a default export.', 'start': 6686.849, 'duration': 3.202}, {'end': 6696.374, 'text': "So if we're going to check out the data, all the way on the top, you'll notice that export default.", 'start': 6690.632, 'duration': 5.742}], 'summary': 'Demonstrating how to import and use a default export in setting up state values.', 'duration': 28.396, 'max_score': 6667.978, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA6667978.jpg'}, {'end': 7131.236, 'src': 'embed', 'start': 7108.487, 'weight': 8, 'content': [{'end': 7117.17, 'text': 'And again, if you remember, this is JavaScript object spread operator, where within each and every item, we do have the fields property.', 'start': 7108.487, 'duration': 8.683}, {'end': 7122.252, 'text': 'Now the fields property is already object itself with more properties.', 'start': 7117.691, 'duration': 4.561}, {'end': 7125.954, 'text': "So what I'm doing here is I am creating a new object.", 'start': 7122.573, 'duration': 3.381}, {'end': 7131.236, 'text': "And I'm just going to copy the properties from the fields object.", 'start': 7126.414, 'duration': 4.822}], 'summary': 'Using javascript object spread operator to copy properties from fields object.', 'duration': 22.749, 'max_score': 7108.487, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA7108487.jpg'}, {'end': 7334.81, 'src': 'embed', 'start': 7307.259, 'weight': 3, 'content': [{'end': 7314.402, 'text': "Now, once we're going to get get data, or once we're going to run get data, we're going to get our data, then we're going to run this,", 'start': 7307.259, 'duration': 7.143}, {'end': 7319.924, 'text': 'this format data in the actual first function of by the name of get data.', 'start': 7314.402, 'duration': 5.522}, {'end': 7323.745, 'text': "And then we're just going to run this this dot get data.", 'start': 7320.424, 'duration': 3.321}, {'end': 7325.966, 'text': 'Again, this will be at the very, very end.', 'start': 7324.105, 'duration': 1.861}, {'end': 7334.81, 'text': "But I'm just explaining why we're going through these actually steps, because what I would want to do is run this one when in fact it mounts again.", 'start': 7326.026, 'duration': 8.784}], 'summary': "The process involves getting and running data in a specific format in the 'get data' function.", 'duration': 27.551, 'max_score': 7307.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA7307259.jpg'}, {'end': 7526.458, 'src': 'embed', 'start': 7497.82, 'weight': 5, 'content': [{'end': 7501.002, 'text': "if the data is still loading, we're not trying to render something.", 'start': 7497.82, 'duration': 3.182}, {'end': 7504.104, 'text': 'Okay, that would be our initial setup.', 'start': 7501.423, 'duration': 2.681}, {'end': 7508.167, 'text': 'And now check this out, we do have all this access in the state.', 'start': 7504.625, 'duration': 3.542}, {'end': 7514.731, 'text': "So just to show you and we're going to do it in the next video the actual proper rendering.", 'start': 7508.727, 'duration': 6.004}, {'end': 7521.356, 'text': 'but at the moment, just to show you that we in fact have the featured rooms, I can just say that I would want to access this.', 'start': 7514.731, 'duration': 6.625}, {'end': 7524.017, 'text': 'So I can just call this as a variable const.', 'start': 7521.976, 'duration': 2.041}, {'end': 7526.458, 'text': "And I'm going to call this feature rooms.", 'start': 7524.777, 'duration': 1.681}], 'summary': 'Initial setup completed, accessing featured rooms in the state.', 'duration': 28.638, 'max_score': 7497.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA7497820.jpg'}, {'end': 7643.406, 'src': 'embed', 'start': 7611.294, 'weight': 9, 'content': [{'end': 7614.655, 'text': "then I'm going to render the rooms that are in the feature rooms.", 'start': 7611.294, 'duration': 3.361}, {'end': 7619.097, 'text': "And then we're going to work in the actual rooms component all together.", 'start': 7615.075, 'duration': 4.022}, {'end': 7626.579, 'text': 'Okay, now for the moment, I just want to create the bare bones for rooms component and set up the loading component.', 'start': 7619.337, 'duration': 7.242}, {'end': 7630.941, 'text': "First and foremost, let's call this loading js.", 'start': 7627.099, 'duration': 3.842}, {'end': 7636.503, 'text': 'And for that this will be a just a basic functional component.', 'start': 7631.761, 'duration': 4.742}, {'end': 7643.406, 'text': 'RFC, then what we would want to pass nothing as a prop, but we would want to have a div.', 'start': 7636.503, 'duration': 6.903}], 'summary': 'Creating bare bones for rooms component and setting up loading component.', 'duration': 32.112, 'max_score': 7611.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA7611294.jpg'}], 'start': 5984.086, 'title': 'React state lifting, context api, and room data rendering', 'summary': 'Discusses state lifting, prop drilling issue, utilizing context api for component communication, setting up state with context api, and rendering room data with key points including looping over an array, formatting data, and setting loading states.', 'chapters': [{'end': 6042.11, 'start': 5984.086, 'title': 'State lifting in react components', 'summary': 'Discusses the concept of state lifting in react components, highlighting the issue of prop drilling and the need to pass down props unnecessarily, as components are wrapped in multiple other components, leading to inefficient data management.', 'duration': 58.024, 'highlights': ['The concept of state lifting in React components is explained, emphasizing the need to pass down props unnecessarily due to prop drilling.', 'The issue of prop drilling is highlighted, where props are passed down unnecessarily because the component using them is wrapped in multiple other components.', 'Inefficient data management is pointed out as a consequence of passing props down unnecessarily due to component wrapping.']}, {'end': 6469.756, 'start': 6042.47, 'title': 'Context api and component communication', 'summary': 'Discusses how to utilize the context api to avoid passing down props between components, demonstrating how to access and set up context, and showcasing the flexibility of passing values, including objects, within components.', 'duration': 427.286, 'highlights': ['Utilizing context API to avoid passing down props The chapter discusses how to use the context API to avoid the traditional method of passing props down through components, improving efficiency and simplifying the component structure.', 'Accessing and setting up context The transcript explains the process of accessing and setting up context within components, demonstrating the usage of context type and the assignment of the context created.', 'Flexibility of passing values, including objects, within components The chapter showcases the flexibility of passing values, such as objects, within components, and demonstrates options like accessing properties individually or using the object spread operator for copying properties.']}, {'end': 7210.705, 'start': 6470.276, 'title': 'Understanding context api and setting up state', 'summary': 'Covers the basics of using the context api to handle state in react, including creating provider and consumer, accessing context in class-based components, and setting up the initial state with external data. it also delves into the process of formatting data and flattening out nested structures in javascript objects.', 'duration': 740.429, 'highlights': ['The chapter covers the basics of using the context API to handle state in React The chapter provides an overview of using the context API for state management in React, demonstrating the creation of provider and consumer components to share state across the application.', 'Setting up initial state with external data and formatting data The transcript explains the process of setting up the initial state with external data, including importing and formatting the data to create a normalized object structure for easier manipulation.', 'Accessing context in class-based components The chapter discusses accessing context in class-based components using static context type, allowing access to the context and its values within the component.', 'Flattening out nested structures in JavaScript objects The transcript outlines the process of flattening out nested structures in JavaScript objects, demonstrating the use of object spread operator to create a new object with flattened properties and address nested structures.']}, {'end': 7686.172, 'start': 7211.305, 'title': 'Room data rendering logic', 'summary': 'Covers the process of rendering room data, including looping over an array, formatting and accessing data, setting loading states, and components setup for room and loading. key points include looping over an array, formatting and accessing data, setting loading states, and components setup for room and loading.', 'duration': 474.867, 'highlights': ['The process of looping over an array, formatting and accessing data is explained. The speaker explains the process of looping over an array, destructuring, reformatting, and accessing data to render the room items.', 'Setting loading states and accessing data is demonstrated. The method of setting loading states and accessing data is demonstrated, including the use of a loading component and setting the loading value to false.', 'Components setup for room and loading is discussed. The setup of components for room and loading is described, including the creation of a basic functional component for loading and setting up the room component with bare bones.']}], 'duration': 1702.086, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA5984086.jpg', 'highlights': ['The concept of state lifting in React components is explained, emphasizing the need to pass down props unnecessarily due to prop drilling.', 'Utilizing context API to avoid passing down props, improving efficiency and simplifying the component structure.', 'The chapter covers the basics of using the context API to handle state in React, demonstrating the creation of provider and consumer components to share state across the application.', 'The process of looping over an array, formatting and accessing data is explained.', 'Setting up initial state with external data and formatting data, including importing and formatting the data to create a normalized object structure for easier manipulation.', 'Setting loading states and accessing data is demonstrated, including the use of a loading component and setting the loading value to false.', 'Accessing and setting up context within components, demonstrating the usage of context type and the assignment of the context created.', 'Accessing context in class-based components using static context type, allowing access to the context and its values within the component.', 'Flattening out nested structures in JavaScript objects, demonstrating the use of object spread operator to create a new object with flattened properties and address nested structures.', 'Components setup for room and loading is discussed, including the creation of a basic functional component for loading and setting up the room component with bare bones.', 'Inefficient data management is pointed out as a consequence of passing props down unnecessarily due to component wrapping.', 'Accessing and setting up context, showcasing the flexibility of passing values, such as objects, within components, and demonstrating options like accessing properties individually or using the object spread operator for copying properties.']}, {'end': 9330.311, 'segs': [{'end': 8002.091, 'src': 'embed', 'start': 7972.668, 'weight': 1, 'content': [{'end': 7973.83, 'text': 'So we can say rooms map.', 'start': 7972.668, 'duration': 1.162}, {'end': 7978.074, 'text': "So I'm going to be again looping over my featured rooms array.", 'start': 7973.93, 'duration': 4.144}, {'end': 7983.681, 'text': "each and every room will going to be an object, of course there, which I'm passing here as an argument in my callback function.", 'start': 7978.074, 'duration': 5.607}, {'end': 7994.909, 'text': "And what I would like to return is not just a simple room, but I'm going to wrap that room in a room component that we just created.", 'start': 7984.201, 'duration': 10.708}, {'end': 8000.551, 'text': "I do need to have the key, since there's going to be list and each and every room remember how the ID.", 'start': 7994.909, 'duration': 5.642}, {'end': 8002.091, 'text': "that's something that we didn't change.", 'start': 8000.551, 'duration': 1.54}], 'summary': 'Looping through featured rooms array to wrap each room in a room component.', 'duration': 29.423, 'max_score': 7972.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA7972668.jpg'}, {'end': 8523.51, 'src': 'embed', 'start': 8495.541, 'weight': 2, 'content': [{'end': 8502.383, 'text': "Now, there's one thing that I definitely want to do right away, which would be setting up some kind of default image, because here's the case.", 'start': 8495.541, 'duration': 6.842}, {'end': 8506.344, 'text': "Well, let's imagine that I'm going to head over back to the data.", 'start': 8503.043, 'duration': 3.301}, {'end': 8511.826, 'text': 'And I know that I should have this presidential room, which by the way, was going to be all the way in the bottom.', 'start': 8506.865, 'duration': 4.961}, {'end': 8514.747, 'text': 'And the reason for that, because I know that this is definitely featured.', 'start': 8512.286, 'duration': 2.461}, {'end': 8516.888, 'text': "So I don't want to look for feature that way.", 'start': 8515.207, 'duration': 1.681}, {'end': 8523.51, 'text': "And let's say that we comment this out, let's say there's some kind of error where you're not getting this image from your data.", 'start': 8517.428, 'duration': 6.082}], 'summary': 'Setting default image for presidential room to optimize feature search.', 'duration': 27.969, 'max_score': 8495.541, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA8495541.jpg'}, {'end': 8687.313, 'src': 'embed', 'start': 8660.271, 'weight': 3, 'content': [{'end': 8666.196, 'text': "And we're going to also display a paragraph by the name of per night, let's say that.", 'start': 8660.271, 'duration': 5.925}, {'end': 8671.14, 'text': 'And check this out, we have nicely price displayed for each and every room.', 'start': 8666.856, 'duration': 4.284}, {'end': 8680.026, 'text': "And then last but not least, still within this image container, again, this is important, but not within this div, of course, let's work on our link.", 'start': 8671.46, 'duration': 8.566}, {'end': 8684.03, 'text': "So the link that we're going to guide us to that single page.", 'start': 8680.567, 'duration': 3.463}, {'end': 8687.313, 'text': "So how this is going to work? Well, first of all, I'm going to say link to.", 'start': 8684.51, 'duration': 2.803}], 'summary': 'Display price per night for each room and add link to single page.', 'duration': 27.042, 'max_score': 8660.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA8660271.jpg'}, {'end': 9155.817, 'src': 'embed', 'start': 9130.157, 'weight': 0, 'content': [{'end': 9135.282, 'text': "Now this get room function, we're going to accept one argument by the name of the slug.", 'start': 9130.157, 'duration': 5.125}, {'end': 9142.887, 'text': "And here, the only thing that we're going to do is, in fact, we're going to filter it, and you can probably already see what is happening.", 'start': 9136.022, 'duration': 6.865}, {'end': 9147.871, 'text': 'So there will going to be a way for us within the single room.', 'start': 9143.508, 'duration': 4.363}, {'end': 9155.817, 'text': "let me open this component, where we will have access to the slug that we're passing from the room component.", 'start': 9147.871, 'duration': 7.946}], 'summary': 'A function filters and accesses a slug argument for a room component.', 'duration': 25.66, 'max_score': 9130.157, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA9130157.jpg'}], 'start': 7686.832, 'title': 'Using image components and room functionality', 'summary': 'Discusses importing and using image components, setting up functionality for featured rooms, creating a room component for featured rooms, setting default images, displaying room information, and setting up single room page functionality.', 'chapters': [{'end': 7972.248, 'start': 7686.832, 'title': 'Importing and using image components', 'summary': 'Discusses importing and using image components, such as loading gif and arrow, and setting up the functionality for featured rooms with logic and jsx rendering.', 'duration': 285.416, 'highlights': ['Importing and using image components The speaker discusses importing and using image components, such as loading GIF and arrow, and setting up the functionality for featured rooms with logic and JSX rendering.', 'Setting up functionality for featured rooms The chapter focuses on setting up the functionality for featured rooms with logic and JSX rendering.', 'Looping through rooms and setting up JSX The speaker emphasizes looping through rooms and setting up JSX, providing multiple options for working with context and rendering within the JSX or outside.']}, {'end': 8552.861, 'start': 7972.668, 'title': 'Creating room component for featured rooms', 'summary': 'Discusses creating a room component for featured rooms, utilizing a callback function to loop through an array of rooms, passing room information as props, and setting up the layout and content for each room component, while also handling conditional rendering based on loading data and ensuring default images for the rooms.', 'duration': 580.193, 'highlights': ['Utilizing a loop to pass room information as props to a room component The speaker discusses looping over a featured rooms array and passing each room as an object to a callback function, aiming to return a room wrapped in a room component.', 'Conditional rendering based on loading data The chapter explains the use of a ternary operator to check if the loading context is true, displaying a spinner if loading is true and rendering the rooms if loading is false.', 'Setting up default images for rooms The speaker addresses the need to handle cases where images may not be available by setting default images for rooms, ensuring a consistent display even in the absence of specific images.']}, {'end': 9066.159, 'start': 8553.382, 'title': 'Setting default image and displaying room information', 'summary': 'Focuses on setting up a default image for rooms, displaying the price, and setting up the link for each room, ensuring that the room component has prop types to validate the passed properties.', 'duration': 512.777, 'highlights': ['Setting up a default image for rooms by importing an image from the images folder and using the or operator to display the default image if the specified image is not found, ensuring a better user experience. Importing default image from the images folder, using the or operator to display default image if specified image is not found.', "Displaying the room's price and 'per night' label within the image container, ensuring the price is nicely displayed for each room. Displaying the room's price and 'per night' label within the image container.", "Setting up the link to navigate to the single room page by creating a link to the room's slug, and ensuring the room component has prop types to validate the passed properties such as name, slug, images, and price. Creating a link to the room's slug, ensuring the room component has prop types to validate passed properties."]}, {'end': 9330.311, 'start': 9066.74, 'title': 'Setting up single room page functionality', 'summary': "Details the process of setting up the functionality for the single room page, including the creation of a 'get room' function and the use of the find method to retrieve a specific room based on a passed slug.", 'duration': 263.571, 'highlights': ["The chapter details the process of setting up the functionality for the single room page, including the creation of a 'get room' function and the use of the find method to retrieve a specific room based on a passed slug.", "The 'get room' function is designed to accept one argument, the slug, and filters the data to retrieve the specific room matching the provided slug, utilizing the find method to accomplish this.", 'The find method is preferred over filter as it returns the first match as an object, simplifying the retrieval process for a single item in this scenario.']}], 'duration': 1643.479, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA7686832.jpg', 'highlights': ["Setting up functionality for the single room page, including creating a 'get room' function and using the find method to retrieve a specific room based on a passed slug.", 'Utilizing a loop to pass room information as props to a room component, aiming to return a room wrapped in a room component.', 'Setting up default images for rooms to ensure a consistent display even in the absence of specific images.', "Displaying the room's price and 'per night' label within the image container for each room."]}, {'end': 12345.581, 'segs': [{'end': 9569.368, 'src': 'embed', 'start': 9541.8, 'weight': 0, 'content': [{'end': 9544.922, 'text': 'Now we have few options how we can do that in the class based component.', 'start': 9541.8, 'duration': 3.122}, {'end': 9547.824, 'text': 'And, by the way, we can also do this in a functional, of course.', 'start': 9545.022, 'duration': 2.802}, {'end': 9554.188, 'text': "I'm just going to show, with a class based one, where, remember, when we were working with the classes or class based components,", 'start': 9547.824, 'duration': 6.364}, {'end': 9556.25, 'text': 'we had an option of creating a constructor.', 'start': 9554.188, 'duration': 2.062}, {'end': 9558.034, 'text': 'where we had the props.', 'start': 9557.113, 'duration': 0.921}, {'end': 9561.699, 'text': 'And we also had super by the name of the props.', 'start': 9558.775, 'duration': 2.924}, {'end': 9569.368, 'text': 'And now we can do something here, whether bind functions or set up the state, as well as we had a lifecycle method.', 'start': 9562.48, 'duration': 6.888}], 'summary': 'Comparison of options for class vs. functional components in react.', 'duration': 27.568, 'max_score': 9541.8, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA9541800.jpg'}, {'end': 9794.569, 'src': 'embed', 'start': 9766.352, 'weight': 1, 'content': [{'end': 9772.135, 'text': "let's say you want to make a single call, because obviously what you need to understand is that this would be a single call.", 'start': 9766.352, 'duration': 5.783}, {'end': 9779.479, 'text': "So what do you do? Well, you would set up some kind of API call where you're just getting the specific room about that specific one page.", 'start': 9772.515, 'duration': 6.964}, {'end': 9783.642, 'text': 'Now, in our case, we are already doing this just by accessing the context.', 'start': 9779.92, 'duration': 3.722}, {'end': 9789.286, 'text': "But this is not always going to be the case, there's going to be a case where you specifically need to make the API call.", 'start': 9784.102, 'duration': 5.184}, {'end': 9794.569, 'text': "Now the reason why I'm showing you this that you most likely we're going to do it with component did mount.", 'start': 9789.766, 'duration': 4.803}], 'summary': 'Making a single api call for a specific room, typically using component did mount.', 'duration': 28.217, 'max_score': 9766.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA9766352.jpg'}, {'end': 10559.707, 'src': 'embed', 'start': 10530.135, 'weight': 2, 'content': [{'end': 10532.877, 'text': 'So the image will be changing that big background image.', 'start': 10530.135, 'duration': 2.742}, {'end': 10538.281, 'text': "And then we're going to run the rest of the information regarding that single room.", 'start': 10533.397, 'duration': 4.884}, {'end': 10545.326, 'text': 'Okay, we know our next task is to create the hero component to be dynamic.', 'start': 10538.681, 'duration': 6.645}, {'end': 10551.936, 'text': "Now, the first things first, why don't we take a look at what are styled components, because this is exactly what we're going to do.", 'start': 10545.747, 'duration': 6.189}, {'end': 10559.707, 'text': "Now I'll tell you right away that I'm going to be skipping over them a lot because I already have a separate course on style components.", 'start': 10552.463, 'duration': 7.244}], 'summary': 'Updating background image, creating dynamic hero component, and discussing styled components.', 'duration': 29.572, 'max_score': 10530.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA10530135.jpg'}, {'end': 10976.775, 'src': 'embed', 'start': 10946.963, 'weight': 3, 'content': [{'end': 10950.664, 'text': 'But in this case, I do have it here, the color is not red anymore.', 'start': 10946.963, 'duration': 3.701}, {'end': 10956.706, 'text': 'In fact, this is orange, because we are accessing this dynamically using the variable.', 'start': 10951.044, 'duration': 5.662}, {'end': 10963.449, 'text': "So now let's think about it, we have a styled component, we can access some values dynamically.", 'start': 10957.267, 'duration': 6.182}, {'end': 10969.452, 'text': 'And what we are trying to do is get this image in our styled component.', 'start': 10964.37, 'duration': 5.082}, {'end': 10976.775, 'text': 'So whenever we are rendering this hero, the big massive component, I would want to place here the image.', 'start': 10969.872, 'duration': 6.903}], 'summary': 'Using dynamic variable to access orange color in styled component.', 'duration': 29.812, 'max_score': 10946.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA10946963.jpg'}, {'end': 11487.733, 'src': 'embed', 'start': 11460.561, 'weight': 4, 'content': [{'end': 11463.904, 'text': "Okay, that's basically a protection.", 'start': 11460.561, 'duration': 3.343}, {'end': 11468.267, 'text': "If, let's say you forgot to add that kind of prop.", 'start': 11464.624, 'duration': 3.643}, {'end': 11476.553, 'text': "And this is how we can set up our single room page to be dynamic, where each and every time we're going to be trying to render something.", 'start': 11468.847, 'duration': 7.706}, {'end': 11485.169, 'text': 'and I can go back to my final application, where, for each and every room, we in fact will be accessing image from that room, okay,', 'start': 11476.553, 'duration': 8.616}, {'end': 11487.733, 'text': 'instead of rendering the same old image all the time.', 'start': 11485.169, 'duration': 2.564}], 'summary': 'Setting up a dynamic single room page to render different images for each room in the application.', 'duration': 27.172, 'max_score': 11460.561, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA11460561.jpg'}], 'start': 9330.891, 'title': 'Dynamic room rendering in react', 'summary': 'Covers accessing and utilizing url parameters in class-based components to retrieve specific room data, showcasing the process of setting up api calls, managing context, and implementing a dynamic hero component using styled components. it also discusses dynamically rendering images, setting up a dynamic single room page, and conditional rendering for room details.', 'chapters': [{'end': 9718.692, 'start': 9330.891, 'title': 'Accessing room parameters', 'summary': 'Discusses how to access and utilize url parameters in class-based components, showcasing the process of retrieving specific room data and demonstrating the functionality of the react router in providing access to parameters.', 'duration': 387.801, 'highlights': ['The chapter details how to access URL parameters in class-based components, demonstrating the process through constructors, props, super, and component lifecycle methods like componentDidMount. It explains the usage of constructors, props, super, and componentDidMount for accessing URL parameters in class-based components.', 'The discussion emphasizes the significance of the React Router in providing access to URL parameters, showcasing how it facilitates the retrieval of specific room data by accessing the slug parameter. It highlights the role of React Router in accessing URL parameters and showcases its function in retrieving specific room data using the slug parameter.']}, {'end': 10152.944, 'start': 9719.392, 'title': 'React router and api calls', 'summary': 'Discusses accessing parameters using react router, setting up api calls, managing context, and handling undefined room data to render specific room information in a react application.', 'duration': 433.552, 'highlights': ['Setting up API calls using component did mount and accessing context to make a single call The chapter explains the process of setting up API calls using component did mount and accessing context to make a single call, emphasizing the need for a specific API call to retrieve information about a specific room.', 'Handling undefined room data and rendering conditional content based on room definition The discussion involves the need to handle undefined room data and render conditional content based on room definition, demonstrating the importance of rendering specific room information only when the room is defined.', "Accessing parameters using React Router and setting up properties within the state The chapter covers accessing parameters using React Router and setting up properties within the state, highlighting the unique nature of each room's slug and the utilization of context to access room information."]}, {'end': 10946.383, 'start': 10153.064, 'title': 'Dynamic hero component with styled components', 'summary': 'Covers the implementation of a dynamic hero component using styled components, addressing the issue of rendering different images for each room page and avoiding the limitations of css classes, while emphasizing the advantages of styled components and their utilization in the project, along with a brief introduction to styled components and a demonstration of creating a simple styled button.', 'duration': 793.319, 'highlights': ['The chapter covers the implementation of a dynamic hero component using styled components, addressing the issue of rendering different images for each room page and avoiding the limitations of CSS classes. implementation of a dynamic hero component using styled components, addressing the issue of rendering different images for each room page, avoiding the limitations of CSS classes', 'The advantages of styled components are emphasized, highlighting unique class names for each styled component and the use of variables by writing JavaScript, as well as a brief introduction to styled components and a demonstration of creating a simple styled button. advantages of styled components, unique class names for each styled component, use of variables by writing JavaScript, introduction to styled components, demonstration of creating a simple styled button']}, {'end': 11460.041, 'start': 10946.963, 'title': 'Dynamic image rendering in styled components', 'summary': 'Discusses how to dynamically render images in styled components, utilizing props and accessing images from an array, demonstrating the process and the flexibility to set default images.', 'duration': 513.078, 'highlights': ['Styled component allows dynamic access to values The styled component enables dynamic access to values, showcasing flexibility in rendering images based on variable input.', 'Utilizing default image for rendering flexibility Emphasizing the use of a default image for rendering flexibility, providing an option to set a default image for dynamic rendering.', 'Accessing and setting up props for dynamic image rendering Demonstrating the process of accessing and setting up props for dynamic image rendering, showcasing the flexibility to pass image props dynamically and access them from an array.', 'Implementing ternary operator for rendering flexibility Illustrating the implementation of a ternary operator for rendering flexibility, allowing the conditional rendering of image props and default images.']}, {'end': 12345.581, 'start': 11460.561, 'title': 'Setting up dynamic single room page', 'summary': 'Discusses setting up a dynamic single room page, including rendering different images for each room, using array and object destructuring in javascript, and conditional rendering for room details such as capacity, pets, and breakfast.', 'duration': 885.02, 'highlights': ['Rendering Different Images for Each Room The chapter explains how to set up a dynamic single room page to render different images for each room, allowing for a dynamic display of images based on the room being accessed.', 'Array and Object Destructuring in JavaScript It covers the use of both array and object destructuring in JavaScript to extract specific elements from arrays and objects, demonstrating the technique through examples and its application in rendering only a specific number of images.', 'Conditional Rendering for Room Details The chapter discusses the implementation of conditional rendering for room details such as capacity, pets, and breakfast, based on the properties of the room being accessed, providing a dynamic way to display relevant information.']}], 'duration': 3014.69, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA9330891.jpg', 'highlights': ['The chapter details how to access URL parameters in class-based components, demonstrating the process through constructors, props, super, and component lifecycle methods like componentDidMount.', 'Setting up API calls using component did mount and accessing context to make a single call, emphasizing the need for a specific API call to retrieve information about a specific room.', 'The chapter covers the implementation of a dynamic hero component using styled components, addressing the issue of rendering different images for each room page and avoiding the limitations of CSS classes.', 'The styled component enables dynamic access to values, showcasing flexibility in rendering images based on variable input.', 'Rendering Different Images for Each Room, allowing for a dynamic display of images based on the room being accessed.']}, {'end': 13232.944, 'segs': [{'end': 12418.808, 'src': 'embed', 'start': 12390.681, 'weight': 2, 'content': [{'end': 12397.309, 'text': "And obviously, these are going to be three rooms, you want to search less, so on and so forth, we're going to be displaying the rooms.", 'start': 12390.681, 'duration': 6.628}, {'end': 12406.177, 'text': 'In order to make this simple, because I still want to show you how we can render the context within the functional component,', 'start': 12398.05, 'duration': 8.127}, {'end': 12408.079, 'text': "and there's actually two ways.", 'start': 12406.177, 'duration': 1.902}, {'end': 12413.823, 'text': "what we're going to do is we're going to set up one container component that will going to hold both of these values.", 'start': 12408.079, 'duration': 5.744}, {'end': 12418.808, 'text': "Okay, now it's also a little bit easier, because I think this is going to structure our code better.", 'start': 12414.244, 'duration': 4.564}], 'summary': 'A demonstration of rendering context within functional component and setting up a container component for three rooms.', 'duration': 28.127, 'max_score': 12390.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA12390681.jpg'}, {'end': 12561.532, 'src': 'embed', 'start': 12528.285, 'weight': 0, 'content': [{'end': 12534.488, 'text': 'So first one will be RoomList.js, where again, this will be functional component.', 'start': 12528.285, 'duration': 6.203}, {'end': 12538.009, 'text': "And we're just going to grab all the rooms that we're going to have.", 'start': 12535.408, 'duration': 2.601}, {'end': 12543.05, 'text': "And that way, let's just call this Hello from RoomList.js.", 'start': 12538.829, 'duration': 4.221}, {'end': 12547.158, 'text': 'list, like so.', 'start': 12545.396, 'duration': 1.762}, {'end': 12556.207, 'text': 'And then what else we have that room filter, your file room, filter j s.', 'start': 12547.859, 'duration': 8.348}, {'end': 12561.532, 'text': "And again, let's call this functional component, room filter, and just Hello.", 'start': 12556.207, 'duration': 5.325}], 'summary': 'Developing functional components roomlist.js and roomfilter.js.', 'duration': 33.247, 'max_score': 12528.285, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA12528285.jpg'}, {'end': 12760.718, 'src': 'embed', 'start': 12733.429, 'weight': 4, 'content': [{'end': 12739.274, 'text': "And now let's say that and yes, finally, everything is successful, where we have Hello from rooms.", 'start': 12733.429, 'duration': 5.845}, {'end': 12745.821, 'text': 'And then we have two of the components, one is filter, and one is the room list.', 'start': 12740.314, 'duration': 5.507}, {'end': 12757.113, 'text': 'Now, my first thing is that I would like to show you how we can honestly work with the context as far as the functional components are concerned,', 'start': 12746.481, 'duration': 10.632}, {'end': 12760.718, 'text': 'because at the moment we want to access the context.', 'start': 12757.113, 'duration': 3.605}], 'summary': 'Demonstrating functionality of two components, filter and room list, working with context.', 'duration': 27.289, 'max_score': 12733.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA12733429.jpg'}, {'end': 12889.138, 'src': 'embed', 'start': 12859.51, 'weight': 3, 'content': [{'end': 12862.505, 'text': "So Room's container, first and foremost.", 'start': 12859.51, 'duration': 2.995}, {'end': 12864.185, 'text': 'Now we do need the consumer.', 'start': 12862.685, 'duration': 1.5}, {'end': 12867.606, 'text': 'Remember, we imported, in fact, or exported three things.', 'start': 12864.625, 'duration': 2.981}, {'end': 12870.267, 'text': 'Room provider, room consumer, and room context.', 'start': 12868.106, 'duration': 2.161}, {'end': 12873.148, 'text': 'And all the time we have been using this guy, the context one.', 'start': 12870.367, 'duration': 2.781}, {'end': 12875.609, 'text': 'Now we, in fact, need this consumer.', 'start': 12873.568, 'duration': 2.041}, {'end': 12877.79, 'text': "So let's head over to the container.", 'start': 12876.229, 'duration': 1.561}, {'end': 12879.331, 'text': "We're going to import.", 'start': 12877.81, 'duration': 1.521}, {'end': 12886.316, 'text': "We're going to call this, or by the way, this is a name import, so we need to call it like it is room.", 'start': 12879.791, 'duration': 6.525}, {'end': 12889.138, 'text': 'And this was consumer.', 'start': 12886.996, 'duration': 2.142}], 'summary': 'Implementing room container and consumer for importing/exporting in application', 'duration': 29.628, 'max_score': 12859.51, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA12859510.jpg'}, {'end': 12947.635, 'src': 'embed', 'start': 12906.269, 'weight': 1, 'content': [{'end': 12911.992, 'text': 'loading, that will be my loading component, loading component.', 'start': 12906.269, 'duration': 5.723}, {'end': 12920.537, 'text': 'And now like I said, what happens is that I will have to use this room consumer to access my context.', 'start': 12913.253, 'duration': 7.284}, {'end': 12925.479, 'text': "So the way this is going to work is going to be very interesting, especially if you're doing this the first time.", 'start': 12920.917, 'duration': 4.562}, {'end': 12927.681, 'text': 'So we have our component room consumer.', 'start': 12925.9, 'duration': 1.781}, {'end': 12932.603, 'text': 'And like I said, in order to access this information, we need to run the function here.', 'start': 12928.021, 'duration': 4.582}, {'end': 12935.225, 'text': 'Okay, and this is something called render props.', 'start': 12932.623, 'duration': 2.602}, {'end': 12936.966, 'text': 'Now within the function.', 'start': 12935.905, 'duration': 1.061}, {'end': 12945.714, 'text': 'the only argument here is going to be this value, the value that we are in fact passing in our context.', 'start': 12936.966, 'duration': 8.748}, {'end': 12947.635, 'text': "this is exactly what we're accessing.", 'start': 12945.714, 'duration': 1.921}], 'summary': 'Using render props to access context values in the room consumer component.', 'duration': 41.366, 'max_score': 12906.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA12906269.jpg'}], 'start': 12346.121, 'title': 'Room components and context', 'summary': 'Delves into creating room components such as room container, list, and filter, and rendering context within functional components to access and pass down data. it also discusses accessing context, utilizing render props, and using room consumer to pass down values and functions from context to components.', 'chapters': [{'end': 12782.707, 'start': 12346.121, 'title': 'Creating room components and rendering context', 'summary': 'Discusses creating room components, including room container, room list, and room filter, and rendering context within functional components to access and pass down data.', 'duration': 436.586, 'highlights': ['Creating room components including room container, room list, and room filter. The chapter discusses the creation of three new files: rooms container, room list, and room filter, as functional components to display and filter room data.', 'Rendering context within functional components to access and pass down data. The chapter focuses on accessing and passing down room data and loading state through context to room filter and room list components.', 'Demonstrating how to work with context in functional components. The chapter emphasizes the need to access context to pass down room data and loading state to room filter and room list components.']}, {'end': 13232.944, 'start': 12783.588, 'title': 'Accessing context and render props', 'summary': 'Demonstrates how to access context and use render props to access and utilize values from the context, including the functional component limitations and the use of room consumer to access the context value, showcasing the process of passing down values and functions from context to components.', 'duration': 449.356, 'highlights': ['The chapter demonstrates the process of passing down values and functions from context to components using room consumer and render props, showcasing the access and utilization of values from the context, including loading, sorted rooms, and rooms.', 'It explains the limitations of accessing context in a functional component and the use of render props to access the context value, with a focus on the process of passing down values and functions from context to components.', 'It discusses the need to use room consumer, import context, and utilize render props to access the context value, showcasing the process of accessing and utilizing values from the context, including loading, sorted rooms, and rooms.']}], 'duration': 886.823, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA12346121.jpg', 'highlights': ['Creating room components including room container, room list, and room filter. The chapter discusses the creation of three new files: rooms container, room list, and room filter, as functional components to display and filter room data.', 'The chapter demonstrates the process of passing down values and functions from context to components using room consumer and render props, showcasing the access and utilization of values from the context, including loading, sorted rooms, and rooms.', 'Rendering context within functional components to access and pass down data. The chapter focuses on accessing and passing down room data and loading state through context to room filter and room list components.', 'It discusses the need to use room consumer, import context, and utilize render props to access the context value, showcasing the process of accessing and utilizing values from the context, including loading, sorted rooms, and rooms.', 'Demonstrating how to work with context in functional components. The chapter emphasizes the need to access context to pass down room data and loading state to room filter and room list components.', 'It explains the limitations of accessing context in a functional component and the use of render props to access the context value, with a focus on the process of passing down values and functions from context to components.']}, {'end': 14142.099, 'segs': [{'end': 13257.437, 'src': 'embed', 'start': 13233.304, 'weight': 0, 'content': [{'end': 13242.17, 'text': 'Because, like I said, you might be thrown off a bit from this component where we are pretty much using this render props,', 'start': 13233.304, 'duration': 8.866}, {'end': 13248.673, 'text': "where we are using the consumer And then we're passing it this way where we're using the function.", 'start': 13242.17, 'duration': 6.503}, {'end': 13257.437, 'text': 'Now, this is not unique to context, you will see in fact, all over the react that somebody might use this kind of pattern, especially before hooks.', 'start': 13249.033, 'duration': 8.404}], 'summary': 'Using render props and consumer in react, particularly before hooks.', 'duration': 24.133, 'max_score': 13233.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA13233304.jpg'}, {'end': 13377.472, 'src': 'embed', 'start': 13351.946, 'weight': 1, 'content': [{'end': 13357.371, 'text': 'But understand that you can do it obviously with any component where you want to hook up the context.', 'start': 13351.946, 'duration': 5.425}, {'end': 13364.204, 'text': "Now, once I pass it within the function, what's interesting about this function, it will return another function.", 'start': 13358.041, 'duration': 6.163}, {'end': 13370.388, 'text': "That's why they call it higher order components, where basically they return another component.", 'start': 13364.224, 'duration': 6.164}, {'end': 13374.97, 'text': "Okay, now let's call this return, then we're going to write function.", 'start': 13370.508, 'duration': 4.462}, {'end': 13377.472, 'text': 'And of course, you can do this with an arrow function.', 'start': 13375.33, 'duration': 2.142}], 'summary': 'Higher order components return another function.', 'duration': 25.526, 'max_score': 13351.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA13351946.jpg'}, {'end': 13680.764, 'src': 'embed', 'start': 13654.333, 'weight': 2, 'content': [{'end': 13660.676, 'text': 'Now we have successfully wrapped the container in the with room consumer.', 'start': 13654.333, 'duration': 6.343}, {'end': 13667.739, 'text': "So how a higher order component, and now we're going to have access to this context, just like we normally would with the props.", 'start': 13660.736, 'duration': 7.003}, {'end': 13671.44, 'text': "And again here's the question what do you find more easier?", 'start': 13668.139, 'duration': 3.301}, {'end': 13673.821, 'text': 'just setting up this room consumer with the value?', 'start': 13671.44, 'duration': 2.381}, {'end': 13680.764, 'text': 'Or, if you have to use it all over the page, you maybe would want to go with higher order component.', 'start': 13674.461, 'duration': 6.303}], 'summary': 'Successfully wrapped container with room consumer, accessing context like props, comparing ease of use with room consumer and higher order component.', 'duration': 26.431, 'max_score': 13654.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA13654333.jpg'}, {'end': 13815.824, 'src': 'embed', 'start': 13793.098, 'weight': 4, 'content': [{'end': 13801, 'text': "Now the reason for that is because this will be a more straightforward, where we just want to render all the rooms that we're going to be filtering.", 'start': 13793.098, 'duration': 7.902}, {'end': 13806.342, 'text': 'And the only thing that I would want to show you at the very end is the difference in CSS a little bit.', 'start': 13801.801, 'duration': 4.541}, {'end': 13812.824, 'text': "And pretty much it because we will going to grab the room container, or I'm sorry, room component that we already created.", 'start': 13807.102, 'duration': 5.722}, {'end': 13815.824, 'text': "And we'll just going to render the list that we're getting.", 'start': 13813.604, 'duration': 2.22}], 'summary': 'The presentation will focus on rendering filtered rooms using css and room components.', 'duration': 22.726, 'max_score': 13793.098, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA13793098.jpg'}, {'end': 13896.195, 'src': 'embed', 'start': 13864.957, 'weight': 5, 'content': [{'end': 13865.917, 'text': "Now, you don't have to do it.", 'start': 13864.957, 'duration': 0.96}, {'end': 13869.578, 'text': 'But I think this is just going to be a little bit better user experience.', 'start': 13866.257, 'duration': 3.321}, {'end': 13872.439, 'text': "Now, the way we're going to do it is going to be very simple.", 'start': 13870.278, 'duration': 2.161}, {'end': 13883.206, 'text': "I'm just going to check if the rooms room's length is in fact equal to zero, then I'm going to render one thing, I'm going to say return.", 'start': 13872.959, 'duration': 10.247}, {'end': 13890.091, 'text': "And then in that case, we're going to go with a div by the name of empty search.", 'start': 13884.086, 'duration': 6.005}, {'end': 13893.533, 'text': 'And again, this is already set it up in our CSS.', 'start': 13890.131, 'duration': 3.402}, {'end': 13896.195, 'text': "And let's just write this long text.", 'start': 13894.094, 'duration': 2.101}], 'summary': 'Enhancing user experience by rendering a div when rooms length is zero.', 'duration': 31.238, 'max_score': 13864.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA13864957.jpg'}, {'end': 14147.524, 'src': 'embed', 'start': 14118.881, 'weight': 6, 'content': [{'end': 14123.204, 'text': 'it would be just spanning all across the page, because it would take up all the space.', 'start': 14118.881, 'duration': 4.323}, {'end': 14126.687, 'text': 'That would be the effect with auto fit.', 'start': 14123.304, 'duration': 3.383}, {'end': 14134.833, 'text': "Now with auto fill, it just says, okay, you have room for one column, but if you have more, I'm just going to be creating the empty spaces.", 'start': 14127.127, 'duration': 7.706}, {'end': 14142.099, 'text': "Okay, that's the only thing that I would want to show you as far as the CSS concern that I find, of course important.", 'start': 14135.293, 'duration': 6.806}, {'end': 14147.524, 'text': "And once we're done with a room list, then we're going to start working on a room filter.", 'start': 14142.559, 'duration': 4.965}], 'summary': 'Comparison of css auto fit and auto fill showing impact on column space.', 'duration': 28.643, 'max_score': 14118.881, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA14118881.jpg'}], 'start': 13233.304, 'title': 'Using higher order components', 'summary': 'Discusses using render props and higher order components in react, especially before hooks, and setting it up within the context. it also covers creating a higher order component for room consumer, implementing higher order components and hooks for achieving access to context and props, and the implementation of the room component in a react application.', 'chapters': [{'end': 13397.235, 'start': 13233.304, 'title': 'Using render props and higher order components', 'summary': 'Discusses using render props and higher order components in react, explaining the patterns and functionality, especially before hooks, and how to set it up within the context.', 'duration': 163.931, 'highlights': ['The chapter explains the usage of render props and higher order components in React, especially before hooks, and mentions that it is not unique to context and can be seen all over React.', 'It emphasizes that the function passed to render props is a way to access and utilize the current context, allowing various functionalities to be performed within it.', 'The chapter also covers setting up higher order components within the context to provide an alternative approach, highlighting the process of passing a component to a function that returns another function, known as a higher order component.']}, {'end': 13578.61, 'start': 13397.916, 'title': 'High order component for room consumer', 'summary': 'Discusses the creation of a higher order component for room consumer, explaining the process of grabbing and passing props, as well as returning the component with the props, streamlining the process of using a room consumer in an application.', 'duration': 180.694, 'highlights': ['Creation of a higher order component for room consumer The chapter explains the process of creating a higher order component for room consumer, streamlining the usage of room consumer in an application.', 'Process of grabbing and passing props The function details the process of grabbing and passing props when running the higher order component, illustrating the necessity of passing props into the component that will be returned.', 'Returning the component with the props The chapter elaborates on the process of returning the component with the props, demonstrating the efficiency of wrapping the component within the higher order component.']}, {'end': 13743.471, 'start': 13578.97, 'title': 'Implementing higher order components and hooks', 'summary': 'Discusses implementing higher order components and hooks for achieving access to context and props, with the option to use either based on ease of setup and usage, and also includes a mention of fixing errors through copying and pasting.', 'duration': 164.501, 'highlights': ['Implementing higher order component with withRoomConsumer The chapter explains the process of implementing a higher order component with withRoomConsumer to access context, providing a choice between using higher order component or setting up room consumer with the value.', 'Utilizing hooks for accessing context The chapter mentions the option of using hooks for accessing context, providing flexibility in choosing between higher order component and hooks based on ease of setup and usage.', 'Fixing errors through copying and pasting The transcript highlights the process of fixing errors by adding the closing tag after copying and pasting, illustrating the potential issues that may arise from copying and pasting code.']}, {'end': 14142.099, 'start': 13744.485, 'title': 'React room component implementation', 'summary': 'Covers the implementation of the room component in a react application, including filtering, rendering, and css styling with explanations and code examples.', 'duration': 397.614, 'highlights': ['Implementation of the room component in a React application The chapter covers the implementation of the room component, including filtering, rendering, and CSS styling.', 'Explanation of rendering all the rooms and handling empty search parameters The author explains how to render all the rooms and handle empty search parameters, providing a better user experience.', "CSS styling and usage of 'auto fit' and 'auto fill' The chapter explains the usage of 'auto fit' and 'auto fill' in CSS, detailing the differences and effects on column layout."]}], 'duration': 908.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA13233304.jpg', 'highlights': ['The chapter explains the usage of render props and higher order components in React, especially before hooks, and mentions that it is not unique to context and can be seen all over React.', 'The chapter covers setting up higher order components within the context to provide an alternative approach, highlighting the process of passing a component to a function that returns another function, known as a higher order component.', 'The chapter explains the process of implementing a higher order component with withRoomConsumer to access context, providing a choice between using higher order component or setting up room consumer with the value.', 'The chapter mentions the option of using hooks for accessing context, providing flexibility in choosing between higher order component and hooks based on ease of setup and usage.', 'The chapter covers the implementation of the room component, including filtering, rendering, and CSS styling.', 'The author explains how to render all the rooms and handle empty search parameters, providing a better user experience.', "The chapter explains the usage of 'auto fit' and 'auto fill' in CSS, detailing the differences and effects on column layout."]}, {'end': 16584.309, 'segs': [{'end': 14318.919, 'src': 'embed', 'start': 14258.167, 'weight': 0, 'content': [{'end': 14260.529, 'text': 'Price by default will be zero.', 'start': 14258.167, 'duration': 2.362}, {'end': 14264.872, 'text': 'Then mean price will be also zero.', 'start': 14261.389, 'duration': 3.483}, {'end': 14267.354, 'text': 'Also I would want max price.', 'start': 14266.033, 'duration': 1.321}, {'end': 14279.686, 'text': 'that also will be zero, then min size, again, you guessed it zero, max size, you guessed it zero.', 'start': 14268.962, 'duration': 10.724}, {'end': 14288.91, 'text': 'And then we have breakfast, which will be by default false, as well as last one pets by default.', 'start': 14280.287, 'duration': 8.623}, {'end': 14291.034, 'text': 'also will be false.', 'start': 14289.753, 'duration': 1.281}, {'end': 14293.276, 'text': 'So we have set up the values in a state.', 'start': 14291.375, 'duration': 1.901}, {'end': 14299.702, 'text': 'Before we start working on our handle change, I would also want to make few changes here.', 'start': 14293.977, 'duration': 5.725}, {'end': 14305.208, 'text': "Notice how we're using this.state where we're changing the values in the state.", 'start': 14300.423, 'duration': 4.785}, {'end': 14317.678, 'text': 'So as far as the price and the size is concerned, I would want to set up the max ones, not as zero, but whatever max I will be getting from my data.', 'start': 14305.868, 'duration': 11.81}, {'end': 14318.919, 'text': 'So what does that mean?', 'start': 14318.119, 'duration': 0.8}], 'summary': 'Default values set to zero, plan to update based on data.', 'duration': 60.752, 'max_score': 14258.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA14258167.jpg'}, {'end': 14369.008, 'src': 'embed', 'start': 14340.718, 'weight': 1, 'content': [{'end': 14344.942, 'text': "The way we can do that, I'm just going to set up the variable, max price.", 'start': 14340.718, 'duration': 4.224}, {'end': 14347.544, 'text': "Now we're going to use math, max.", 'start': 14345.302, 'duration': 2.242}, {'end': 14352.381, 'text': 'But we know that we would need to pass it as a value is not as an array.', 'start': 14348.539, 'duration': 3.842}, {'end': 14355.082, 'text': 'So in this case, we can use the spread operator.', 'start': 14352.801, 'duration': 2.281}, {'end': 14356.843, 'text': 'And I can just use rooms.', 'start': 14355.582, 'duration': 1.261}, {'end': 14360.684, 'text': "Now again, rooms will be the data that we're getting back right here.", 'start': 14357.303, 'duration': 3.381}, {'end': 14364.806, 'text': "And then we're going to write map, then of course, item.", 'start': 14361.545, 'duration': 3.261}, {'end': 14369.008, 'text': 'So return me the price for each and every item.', 'start': 14365.186, 'duration': 3.822}], 'summary': 'Setting max price variable and using spread operator to get prices for each item.', 'duration': 28.29, 'max_score': 14340.718, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA14340718.jpg'}, {'end': 14615.659, 'src': 'embed', 'start': 14589.312, 'weight': 3, 'content': [{'end': 14594.173, 'text': 'So I can write handle change will be equal to this dot handle change.', 'start': 14589.312, 'duration': 4.861}, {'end': 14605.016, 'text': 'And once we make these changes in the context, we are ready to head over to a room filter and start working with our data.', 'start': 14594.573, 'duration': 10.443}, {'end': 14613.378, 'text': 'Once we have our general setup in the context JS, I think this is the great time to head over to the room filter,', 'start': 14605.896, 'duration': 7.482}, {'end': 14615.659, 'text': "where we're going to do most of our work.", 'start': 14613.378, 'duration': 2.281}], 'summary': 'Setting up context for room filter in js.', 'duration': 26.347, 'max_score': 14589.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA14589312.jpg'}, {'end': 14881.127, 'src': 'embed', 'start': 14857.9, 'weight': 13, 'content': [{'end': 14868.423, 'text': "the first one was first input the select box, because there's going to be quite a big setup, meaning we're going to have to set up the input box.", 'start': 14857.9, 'duration': 10.523}, {'end': 14875.005, 'text': "And then we're going to have to do a little bit of context, where we're just working with handle change as well,", 'start': 14868.543, 'duration': 6.462}, {'end': 14876.665, 'text': "as we're going to have to get unique values.", 'start': 14875.005, 'duration': 1.66}, {'end': 14878.546, 'text': "So why don't we start slow.", 'start': 14877.225, 'duration': 1.321}, {'end': 14881.127, 'text': "where we're just focusing on one input.", 'start': 14879.326, 'duration': 1.801}], 'summary': 'Setting up input select box with handle change for unique values.', 'duration': 23.227, 'max_score': 14857.9, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA14857900.jpg'}, {'end': 15109.396, 'src': 'embed', 'start': 15066.366, 'weight': 9, 'content': [{'end': 15074.369, 'text': "Now, the thing is, though, that I just want, don't want all the rooms that I have, because types are obviously going to be repeating.", 'start': 15066.366, 'duration': 8.003}, {'end': 15081.938, 'text': "Let's say, if you're scrolling up a little bit, you'll notice that let's say, type is single.", 'start': 15074.949, 'duration': 6.989}, {'end': 15085.803, 'text': 'then I scroll over to the next room.', 'start': 15081.938, 'duration': 3.865}, {'end': 15086.825, 'text': "it's also going to be single.", 'start': 15085.803, 'duration': 1.022}, {'end': 15090.449, 'text': 'So what happens is that I only want unique values.', 'start': 15087.305, 'duration': 3.144}, {'end': 15094.053, 'text': "If I'm looking at my finished project, check this out.", 'start': 15091.072, 'duration': 2.981}, {'end': 15098.733, 'text': 'I do have here only the unique values, not repeated.', 'start': 15094.653, 'duration': 4.08}, {'end': 15101.654, 'text': "Otherwise, I'm going to have for each and every room a type.", 'start': 15099.194, 'duration': 2.46}, {'end': 15106.175, 'text': "So the more rooms I'm going to add it, the more types there are going to be, even though they were going to be repeating.", 'start': 15102.194, 'duration': 3.981}, {'end': 15107.595, 'text': 'So we need to be careful.', 'start': 15106.675, 'duration': 0.92}, {'end': 15109.396, 'text': "There's a few ways how we can do it.", 'start': 15108.135, 'duration': 1.261}], 'summary': 'Seeking unique room types to avoid repetition for a more organized project.', 'duration': 43.03, 'max_score': 15066.366, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA15066366.jpg'}, {'end': 15327.014, 'src': 'embed', 'start': 15280.216, 'weight': 4, 'content': [{'end': 15287.159, 'text': "And one of the challenges in fact, is looking for unique values, because I'm not going to spend too much time here.", 'start': 15280.216, 'duration': 6.943}, {'end': 15290.083, 'text': 'This is very straightforward JavaScript.', 'start': 15287.819, 'duration': 2.264}, {'end': 15292.727, 'text': 'And again, if you need more information, please head over there.', 'start': 15290.383, 'duration': 2.344}, {'end': 15295.01, 'text': 'That is one of the solutions that we use.', 'start': 15293.248, 'duration': 1.762}, {'end': 15299.177, 'text': 'So what I would want from this function to return is in fact an array.', 'start': 15295.431, 'duration': 3.746}, {'end': 15302.25, 'text': 'but I will going to spread it out right away.', 'start': 15300.248, 'duration': 2.002}, {'end': 15304.032, 'text': "And I'm going to use new set.", 'start': 15302.691, 'duration': 1.341}, {'end': 15311.259, 'text': 'Now the key here with the new set data structure is the fact that set only accepts unique values.', 'start': 15304.653, 'duration': 6.606}, {'end': 15318.106, 'text': "So, within a set, I can just map over whatever items I'm going to be getting, which again, by the way, will be rooms,", 'start': 15311.7, 'duration': 6.406}, {'end': 15319.728, 'text': "since we're going to pass rooms right here.", 'start': 15318.106, 'duration': 1.622}, {'end': 15327.014, 'text': 'And then what I would like to return will be item and that item value.', 'start': 15320.308, 'duration': 6.706}], 'summary': 'Using new set to return an array with unique values in javascript.', 'duration': 46.798, 'max_score': 15280.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA15280216.jpg'}, {'end': 15560.214, 'src': 'embed', 'start': 15533.781, 'weight': 8, 'content': [{'end': 15537.422, 'text': 'And then next is just getting these values using that function.', 'start': 15533.781, 'duration': 3.641}, {'end': 15544.204, 'text': 'And the reason why I created the function is because we will gonna like I said, reuse it for the second one for the capacity as well.', 'start': 15537.822, 'duration': 6.382}, {'end': 15546.845, 'text': 'So we might as well not do the double work.', 'start': 15544.704, 'duration': 2.141}, {'end': 15551.728, 'text': "then I'm just adding here this all that would be for all the properties.", 'start': 15547.885, 'duration': 3.843}, {'end': 15557.813, 'text': 'And last but not least, I would want to work with actual JSX.', 'start': 15552.689, 'duration': 5.124}, {'end': 15560.214, 'text': "So that's the reason why I'm getting JSX.", 'start': 15558.273, 'duration': 1.941}], 'summary': 'Creating a function to reuse values and work with jsx.', 'duration': 26.433, 'max_score': 15533.781, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA15533781.jpg'}, {'end': 15871.798, 'src': 'embed', 'start': 15845.518, 'weight': 5, 'content': [{'end': 15856.745, 'text': "And now it's really interesting the way we can do that within the this.setState is the fact that I can again use the dynamic variables in my object.", 'start': 15845.518, 'duration': 11.227}, {'end': 15862.148, 'text': 'So instead of saying, okay, so once I get these values, this is just going to be for the type.', 'start': 15857.205, 'duration': 4.943}, {'end': 15871.798, 'text': "what I would want to do is for all my inputs, every time I'm going to be changing, I'll be dynamically checking what is my name.", 'start': 15862.688, 'duration': 9.11}], 'summary': 'Using dynamic variables within this.setstate for changing inputs.', 'duration': 26.28, 'max_score': 15845.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA15845518.jpg'}, {'end': 15911.311, 'src': 'embed', 'start': 15889.075, 'weight': 6, 'content': [{'end': 15899.644, 'text': "The last thing that I would want to do is run this, this dot filter rooms, because, depending on whatever we're going to do with our input,", 'start': 15889.075, 'duration': 10.569}, {'end': 15902.106, 'text': "we're also going to be changing these values.", 'start': 15899.644, 'duration': 2.462}, {'end': 15909.15, 'text': "So once this runs, once we run this, that state, as a callback function, we're going to run this filter rooms.", 'start': 15902.386, 'duration': 6.764}, {'end': 15911.311, 'text': "So we're going to change this value in a state.", 'start': 15909.53, 'duration': 1.781}], 'summary': 'The code will change state values after running a filter function.', 'duration': 22.236, 'max_score': 15889.075, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA15889075.jpg'}, {'end': 16409.492, 'src': 'embed', 'start': 16382.239, 'weight': 10, 'content': [{'end': 16385.181, 'text': 'So both of these will going to become capacity.', 'start': 16382.239, 'duration': 2.942}, {'end': 16389.124, 'text': "Value, obviously, again, we're not accessing the type.", 'start': 16386.282, 'duration': 2.842}, {'end': 16399.003, 'text': "we're accessing the variable by the name of capacity, handle change will not change, because we're going to use the still the same function.", 'start': 16390.133, 'duration': 8.87}, {'end': 16402.626, 'text': "That's the reason why we spend so much time on a proper setup.", 'start': 16399.543, 'duration': 3.083}, {'end': 16409.492, 'text': 'And then for the types, I would need to do very similar like we did already previously.', 'start': 16403.427, 'duration': 6.065}], 'summary': 'Setting up capacities and variables for efficient function use.', 'duration': 27.253, 'max_score': 16382.239, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA16382239.jpg'}], 'start': 14142.559, 'title': 'Setting up room filters and context state', 'summary': 'Focuses on setting up context state values for room filters, such as type, capacity, price, size, breakfast, and pets, and dynamically calculating the max price and max size of rooms from the data. it details the setup of functions utilizing controlled inputs and context api with use context hook for handling user inputs and filtering rooms. additionally, it demonstrates retrieving unique values from an array of items in javascript using the new set data structure and filter, and discusses handling input changes and filtering rooms in a react application, emphasizing the use of dynamic variables and the impact on state and filtering functionality.', 'chapters': [{'end': 14436.654, 'start': 14142.559, 'title': 'Setting up room filters and context state', 'summary': 'Focuses on setting up context state values for room filters, such as type, capacity, price, size, breakfast, and pets, and dynamically calculating the max price and max size of rooms from the data.', 'duration': 294.095, 'highlights': ["Setting up default values for room filter properties in the context state, including type, capacity, price, size, breakfast, and pets. The default values for room filter properties in the context state are set, such as type as 'all', capacity as '1', price as '0', mean price as '0', max price as '0', min size as '0', max size as '0', breakfast as 'false', and pets as 'false'.", 'Dynamically calculating the max price for rooms from the data using the spread operator and map function. The transcript elaborates on dynamically calculating the max price for rooms from the data using the spread operator and map function, ensuring that the max price is derived from the actual data rather than being statically set.', 'Updating the context state with the calculated max price and max size using setState method. The process of updating the context state with the calculated max price and max size using the setState method is explained, ensuring that the context state accurately reflects the dynamic values obtained from the data.']}, {'end': 15046.04, 'start': 14437.294, 'title': 'Setting up room filter', 'summary': 'Details the setup of two functions: get room and handle change, utilizing controlled inputs and context api with use context hook for handling user inputs and filtering rooms, with a focus on setting up the first input box and leveraging controlled inputs for handling changes.', 'duration': 608.746, 'highlights': ['The chapter details the setup of two functions: get room and handle change The transcript discusses setting up two functions, get room and handle change, for handling user inputs and filtering rooms.', 'Utilizing controlled inputs and context API with use context hook for handling user inputs and filtering rooms The chapter explains the use of controlled inputs and context API with the use context hook for managing user inputs and filtering rooms based on the input values.', 'Focus on setting up the first input box and leveraging controlled inputs for handling changes The chapter emphasizes setting up the first input box and utilizing controlled inputs to manage changes, such as type, capacity, price, and other properties.']}, {'end': 15533.761, 'start': 15046.68, 'title': 'Javascript unique values', 'summary': 'Demonstrates how to retrieve unique values from an array of items in javascript using the new set data structure and filter, with the goal of enhancing the functionality of room filtering in a project.', 'duration': 487.081, 'highlights': ['The chapter demonstrates how to retrieve unique values from an array of items in JavaScript. The speaker explains the process of extracting unique values from an array, emphasizing the use of JavaScript and new set data structure.', 'The new set data structure is utilized to filter out repeated values and map over items to ensure uniqueness. The method of utilizing the new set data structure to filter out repeated values and ensure uniqueness is highlighted as a crucial step in the process.', 'The speaker provides insights into enhancing the functionality of room filtering in a project by retrieving only the unique values. The speaker emphasizes the goal of enhancing the functionality of room filtering by specifically obtaining unique values, demonstrating the practical application of the discussed concept.']}, {'end': 16009.468, 'start': 15533.781, 'title': 'Handling input changes and filtering rooms', 'summary': 'Discusses handling input changes and filtering rooms in a react application, emphasizing the use of dynamic variables and the impact on state and filtering functionality.', 'duration': 475.687, 'highlights': ['The chapter discusses handling input changes and filtering rooms in a React application. The discussion revolves around handling input changes and filtering rooms in a React application.', 'Emphasizes the use of dynamic variables and the impact on state and filtering functionality. The use of dynamic variables is emphasized for their impact on state and filtering functionality within the application.', 'The approach involves reusing functions to avoid redundant work and improve efficiency. Reusing functions is highlighted as an approach to avoid redundant work and improve efficiency in the application.']}, {'end': 16584.309, 'start': 16009.888, 'title': 'Setting up filter rooms and handling state values', 'summary': 'Covers setting up filter rooms to access and change state values, with a particular focus on accessing rooms, filtering by type, and handling capacity values, ensuring the functionality of filtering rooms and handling state values in react.', 'duration': 574.421, 'highlights': ['Setting up filter rooms to access and change state values The speaker explains the process of setting up filter rooms to access and change state values, emphasizing the importance of ensuring the functionality of filtering rooms and handling state values in React.', 'Accessing and filtering rooms by type The transcript explains the process of accessing and filtering rooms by type, including the condition to filter rooms based on the type and the importance of handling state changes asynchronously.', 'Handling capacity values and data types in React The speaker discusses the handling of capacity values and data types in React, highlighting the need for parsing values from a select box to ensure proper data types for state values.']}], 'duration': 2441.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA14142559.jpg', 'highlights': ['Setting up default values for room filter properties in the context state, including type, capacity, price, size, breakfast, and pets.', 'Dynamically calculating the max price for rooms from the data using the spread operator and map function.', 'Updating the context state with the calculated max price and max size using setState method.', 'Utilizing controlled inputs and context API with use context hook for handling user inputs and filtering rooms.', 'The chapter demonstrates how to retrieve unique values from an array of items in JavaScript.', 'Emphasizes the use of dynamic variables and the impact on state and filtering functionality.', 'Setting up filter rooms to access and change state values.', 'The new set data structure is utilized to filter out repeated values and map over items to ensure uniqueness.', 'The approach involves reusing functions to avoid redundant work and improve efficiency.', 'Accessing and filtering rooms by type.', 'Handling capacity values and data types in React.', 'The speaker provides insights into enhancing the functionality of room filtering in a project by retrieving only the unique values.', 'The chapter discusses handling input changes and filtering rooms in a React application.', 'Focus on setting up the first input box and leveraging controlled inputs for handling changes.']}, {'end': 17832.746, 'segs': [{'end': 16903.797, 'src': 'embed', 'start': 16879.726, 'weight': 4, 'content': [{'end': 16885.971, 'text': "But the more filters you're going to have, the more it will going to make sense to have way more data.", 'start': 16879.726, 'duration': 6.245}, {'end': 16887.652, 'text': 'That way, this will be interesting.', 'start': 16886.271, 'duration': 1.381}, {'end': 16895.074, 'text': "Otherwise, of course, for all the double rooms, there's only two people that can say for all the single rooms, one, and so on and so forth.", 'start': 16888.072, 'duration': 7.002}, {'end': 16902.276, 'text': "Okay, now, as far as the money is concerned, as far as we're working with the price, why don't we grab here?", 'start': 16895.634, 'duration': 6.642}, {'end': 16902.777, 'text': 'or you know what?', 'start': 16902.276, 'duration': 0.501}, {'end': 16903.797, 'text': "we're going to create a new one.", 'start': 16902.777, 'duration': 1.02}], 'summary': 'Increasing filters requires more data; considering room occupancy and pricing for new creation.', 'duration': 24.071, 'max_score': 16879.726, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA16879726.jpg'}, {'end': 17092.016, 'src': 'embed', 'start': 17067.422, 'weight': 1, 'content': [{'end': 17073.068, 'text': "If some room would be let's say 1000, then $1, 000 would be shown.", 'start': 17067.422, 'duration': 5.646}, {'end': 17078.413, 'text': 'And remember, we did that in the context in the very beginning when we were getting our data.', 'start': 17073.828, 'duration': 4.585}, {'end': 17084.254, 'text': 'Now, once we have the room price, all this is done.', 'start': 17079.153, 'duration': 5.101}, {'end': 17092.016, 'text': 'what we need is filtering, because at the moment again, we are just getting the type as well as the capacity.', 'start': 17084.254, 'duration': 7.762}], 'summary': 'Room price of $1000 was shown in the context of data collection, filtering needed for type and capacity.', 'duration': 24.594, 'max_score': 17067.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA17067422.jpg'}, {'end': 17302.682, 'src': 'embed', 'start': 17270.96, 'weight': 2, 'content': [{'end': 17277.363, 'text': "why don't we complete more application as far as our search rooms component is concerned?", 'start': 17270.96, 'duration': 6.403}, {'end': 17282.184, 'text': 'Because in this case we will going to set up filter according to the size,', 'start': 17277.863, 'duration': 4.321}, {'end': 17286.166, 'text': 'as well as we will going to create these checkboxes and set up the functionality.', 'start': 17282.184, 'duration': 3.982}, {'end': 17294.469, 'text': "Okay, now we have the end of room, that is not what we want right now, we would want to size and I'm going to say end of size.", 'start': 17286.646, 'duration': 7.823}, {'end': 17302.682, 'text': 'and off size, as well as we will going to have a div by the name of form group.', 'start': 17295.81, 'duration': 6.872}], 'summary': 'Developing application to set up filter and create checkboxes for search rooms component.', 'duration': 31.722, 'max_score': 17270.96, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA17270960.jpg'}, {'end': 17444.525, 'src': 'embed', 'start': 17404.884, 'weight': 0, 'content': [{'end': 17412.551, 'text': 'And again remember the filtering that we did all the way in the very, very beginning, when we did have component, did mount,', 'start': 17404.884, 'duration': 7.667}, {'end': 17414.953, 'text': 'we check for the max size and we set this up in a state.', 'start': 17412.551, 'duration': 2.402}, {'end': 17418.955, 'text': 'So that is exactly why we have this value of 1000.', 'start': 17415.373, 'duration': 3.582}, {'end': 17425.577, 'text': 'Again, if one room would have a bigger size, bigger square footage, obviously, that will be rendered.', 'start': 17418.955, 'duration': 6.622}, {'end': 17429.399, 'text': 'And then last but not least, I would want to show these checkboxes.', 'start': 17426.118, 'duration': 3.281}, {'end': 17431.84, 'text': "So in this case, let's write extras.", 'start': 17430.119, 'duration': 1.721}, {'end': 17435.782, 'text': 'And I just want to complete here everything within our component.', 'start': 17432.4, 'duration': 3.382}, {'end': 17442.765, 'text': "And then we're going to set up the context, there's no point for us to jump back and forth, because we already should have the general idea.", 'start': 17436.222, 'duration': 6.543}, {'end': 17444.525, 'text': 'and off extras.', 'start': 17443.505, 'duration': 1.02}], 'summary': 'Filtered and set max size to 1000, render bigger rooms, and set up checkboxes.', 'duration': 39.641, 'max_score': 17404.884, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA17404884.jpg'}], 'start': 16585.028, 'title': 'Room filtering and react form setup', 'summary': 'Covers filtering and transforming room data by capacity, price, and type, implementing filtering based on price and size with a maximum price set at 600, and demonstrating setting up checkboxes for a react form with functionality and state changes.', 'chapters': [{'end': 17044.668, 'start': 16585.028, 'title': 'Filtering and transforming room data', 'summary': 'Covers filtering and transforming room data by capacity, price, and type, demonstrating the process with detailed coding examples and explanations.', 'duration': 459.64, 'highlights': ['The process involves adding comments to handle repeating values, transforming string capacity to numbers using parse integer, and filtering rooms based on capacity by writing conditional statements.', 'The demonstration includes combining filters to refine search results and updating the price input using range and state values for dynamic display.', 'The chapter emphasizes the importance of data volume in making filtering operations more meaningful and practical, providing insights into managing multiple filters for effective data analysis.']}, {'end': 17425.577, 'start': 17044.868, 'title': 'Room filtering and size setup', 'summary': 'Discusses the implementation of room filtering based on price and size, with a maximum price set at 600, and the setup of size input fields for filtering rooms based on size, ultimately aiming to complete the search rooms component.', 'duration': 380.709, 'highlights': ['The maximum price for all rooms is set at 600, with the implementation of filtering based on price, resulting in the rendering of rooms with prices less than the specified range. Maximum price set at 600 for all rooms; Filter implementation for rendering rooms with prices less than the specified range', "Preparation for the setup of size input fields for filtering rooms based on size, including the creation of input fields for small and big sizes, with the values linked to the state and the implementation of 'on change' handling. Preparation for size input fields setup; Creation of input fields for small and big sizes; Values linked to state; Implementation of 'on change' handling", 'Discussion on the initial setup of filtering based on room size, with a maximum size value of 1000, and the indication that rooms with a larger size would be rendered accordingly. Initial setup of filtering based on room size; Maximum size value set at 1000; Rendering of rooms with larger size']}, {'end': 17593.149, 'start': 17426.118, 'title': 'React form checkbox setup', 'summary': 'Demonstrates setting up checkboxes for a react form, including creating input and label elements, setting values, and demonstrating functionality with state changes and checkbox checks.', 'duration': 167.031, 'highlights': ['The chapter demonstrates setting up checkboxes for a React form, including creating input and label elements, setting values, and demonstrating functionality with state changes and checkbox checks.', 'The tutorial emphasizes the process of setting input and label elements for checkboxes within a React form component.', "The speaker explains the significance of matching the input name with the state values and setting the value attribute to 'checked' for checkboxes."]}, {'end': 17832.746, 'start': 17594.069, 'title': 'Filtering and selecting rooms', 'summary': 'Explains the process of filtering rooms based on size, breakfast, and pets, and identifying a bug in the code, with an emphasis on filtering by size.', 'duration': 238.677, 'highlights': ["Filtering rooms based on size using the 'filter' method to only return rooms with a size between the minimum and maximum values. Use of the 'filter' method to select rooms by size.", "Filtering rooms based on breakfast availability using the 'filter' method to only return rooms with breakfast included. Utilization of the 'filter' method to select rooms with breakfast.", "Identifying a bug in the code related to the 'event' and 'target' attributes. Recognition of a bug in the code."]}], 'duration': 1247.718, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA16585027.jpg', 'highlights': ['Demonstration of setting up checkboxes for a React form with functionality and state changes', 'Implementation of filtering based on price with a maximum price set at 600', 'Preparation for the setup of size input fields for filtering rooms based on size', 'Initial setup of filtering based on room size with a maximum size value of 1000', 'Importance of data volume in making filtering operations more meaningful and practical']}, {'end': 19267.172, 'segs': [{'end': 17974.897, 'src': 'embed', 'start': 17946.411, 'weight': 9, 'content': [{'end': 17952.017, 'text': 'And not only that, we could access the data, even though we would have different type of application.', 'start': 17946.411, 'duration': 5.606}, {'end': 17959.605, 'text': "Let's say currently, we obviously using the React application, we could do the same with Gatsby, we could do the same with vanilla JS.", 'start': 17952.437, 'duration': 7.168}, {'end': 17965.692, 'text': 'And that external platform will be by the name of Contentful.', 'start': 17960.346, 'duration': 5.346}, {'end': 17969.574, 'text': 'And I already named all the nice features about Contentful.', 'start': 17966.392, 'duration': 3.182}, {'end': 17974.897, 'text': "But why don't I repeat? Well, Contentful is a content infrastructure.", 'start': 17969.654, 'duration': 5.243}], 'summary': 'Contentful allows access to data for different applications, such as react, gatsby, and vanilla js, serving as a content infrastructure.', 'duration': 28.486, 'max_score': 17946.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA17946411.jpg'}, {'end': 18092.68, 'src': 'embed', 'start': 18063.01, 'weight': 10, 'content': [{'end': 18066.773, 'text': "And next, we're going to be setting up the content model, as well as the content.", 'start': 18063.01, 'duration': 3.763}, {'end': 18074.895, 'text': "So as you're looking at it, there's really four things that are really important, especially in the beginning, as you're working with Contentful.", 'start': 18067.173, 'duration': 7.722}, {'end': 18076.776, 'text': 'So first of all would be the space.', 'start': 18075.335, 'duration': 1.441}, {'end': 18079.936, 'text': "Again, most likely you're going to have the example space.", 'start': 18077.116, 'duration': 2.82}, {'end': 18088.299, 'text': 'But if you would want to create a new space, and you can think of it as a database as a project, you can just click here on creating a new space.', 'start': 18080.437, 'duration': 7.862}, {'end': 18092.68, 'text': "As you're using the free ones, you can see that I'm using one of two.", 'start': 18088.839, 'duration': 3.841}], 'summary': 'Setting up a content model with four important elements, including spaces and using free ones.', 'duration': 29.67, 'max_score': 18063.01, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA18063010.jpg'}, {'end': 18213.992, 'src': 'embed', 'start': 18188.575, 'weight': 8, 'content': [{'end': 18196.198, 'text': "Because if you just set up the data, but for me, I already set up the data that we're going to be consuming with this application.", 'start': 18188.575, 'duration': 7.623}, {'end': 18204.007, 'text': "Again, what content model would be if we're going to head over back that would be the structure for your inputs.", 'start': 18196.698, 'duration': 7.309}, {'end': 18206.769, 'text': "So let's say in our case, this is obviously a room.", 'start': 18204.508, 'duration': 2.261}, {'end': 18210.79, 'text': 'So content model would be structure for that room input.', 'start': 18207.349, 'duration': 3.441}, {'end': 18213.992, 'text': 'And you can think of it again as an object.', 'start': 18211.331, 'duration': 2.661}], 'summary': 'Preparing data for consumption with a content model structure for room input.', 'duration': 25.417, 'max_score': 18188.575, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA18188575.jpg'}, {'end': 18292.851, 'src': 'embed', 'start': 18266.216, 'weight': 1, 'content': [{'end': 18275.5, 'text': 'Alright, now last but not least, as far as the general interface, we would be interested again in the settings and setting up the API keys.', 'start': 18266.216, 'duration': 9.284}, {'end': 18277.501, 'text': "So why we're interested in that?", 'start': 18275.8, 'duration': 1.701}, {'end': 18282.524, 'text': 'because in order to consume that data, we will going to have to use these API keys.', 'start': 18277.501, 'duration': 5.023}, {'end': 18285.506, 'text': 'we can head over to API keys again for you.', 'start': 18282.524, 'duration': 2.982}, {'end': 18292.851, 'text': 'you most likely will just going to have one example one, but I already set it up a multiple ones for my different tutorials and projects.', 'start': 18285.506, 'duration': 7.345}], 'summary': 'Interest in setting up api keys for data consumption.', 'duration': 26.635, 'max_score': 18266.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA18266216.jpg'}, {'end': 18554.528, 'src': 'embed', 'start': 18525.62, 'weight': 2, 'content': [{'end': 18528.122, 'text': "And in general, I'm going to go to validations and required field.", 'start': 18525.62, 'duration': 2.502}, {'end': 18531.284, 'text': "Now I'm also going to show you how we can do it right away as we're saving.", 'start': 18528.562, 'duration': 2.722}, {'end': 18533.666, 'text': 'Next field up will be price.', 'start': 18531.904, 'duration': 1.762}, {'end': 18535.647, 'text': "And for that, we're going to go with integer.", 'start': 18534.106, 'duration': 1.541}, {'end': 18537.288, 'text': 'In this case, we have a decimal.', 'start': 18536.087, 'duration': 1.201}, {'end': 18542.592, 'text': "So if you're going to go with rooms, let's say that have decimal price, obviously go with decimal, I'm going to go with integer.", 'start': 18537.648, 'duration': 4.944}, {'end': 18544.994, 'text': "And I'm just going to call this price.", 'start': 18543.312, 'duration': 1.682}, {'end': 18547.058, 'text': "Alright, now I'm going to create it.", 'start': 18545.776, 'duration': 1.282}, {'end': 18550.002, 'text': 'And in this case, notice, we also have create and configure.', 'start': 18547.238, 'duration': 2.764}, {'end': 18552.405, 'text': 'And that way, we right away go to validations.', 'start': 18550.422, 'duration': 1.983}, {'end': 18554.528, 'text': 'And we can just say required.', 'start': 18553.086, 'duration': 1.442}], 'summary': 'Demonstrating validation and required field setup, using integer and decimal for price.', 'duration': 28.908, 'max_score': 18525.62, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA18525620.jpg'}, {'end': 18660.51, 'src': 'embed', 'start': 18563.16, 'weight': 0, 'content': [{'end': 18566.621, 'text': "we're going to go with the type, type will be again, short text.", 'start': 18563.16, 'duration': 3.461}, {'end': 18575.944, 'text': "So we're going to go with type short text, create configure validations, required field, and next one up, we do have the size.", 'start': 18567.021, 'duration': 8.923}, {'end': 18583.026, 'text': "For the size, again, we're going to go with integer, number integer, this will be size of the room.", 'start': 18576.504, 'duration': 6.522}, {'end': 18586.907, 'text': 'So what would be the square footage, validations required field.', 'start': 18583.186, 'duration': 3.721}, {'end': 18590.788, 'text': 'All right, then we do have the capacity.', 'start': 18587.527, 'duration': 3.261}, {'end': 18595.129, 'text': 'So what would be the max people of how many can stay in the room.', 'start': 18591.408, 'duration': 3.721}, {'end': 18596.77, 'text': "Again, we're going to go with integer.", 'start': 18595.569, 'duration': 1.201}, {'end': 18599.931, 'text': "So let's call this size, create configure.", 'start': 18597.45, 'duration': 2.481}, {'end': 18603.512, 'text': "And in this case, it's complaining that it's already there.", 'start': 18600.711, 'duration': 2.801}, {'end': 18613.188, 'text': "Well, because the name obviously isn't sized its capacity, my bad capacity, create and configure auditions required field.", 'start': 18604.136, 'duration': 9.052}, {'end': 18614.91, 'text': 'All right, we have that.', 'start': 18613.208, 'duration': 1.702}, {'end': 18619.215, 'text': 'Then we have two of them pets and breakfast that will be Boolean.', 'start': 18615.551, 'duration': 3.664}, {'end': 18622.237, 'text': "So we just go with let's say boolean here.", 'start': 18619.816, 'duration': 2.421}, {'end': 18625.078, 'text': 'And we have pets whether pets are allowed.', 'start': 18622.857, 'duration': 2.221}, {'end': 18627.338, 'text': 'Again, we set up the validations.', 'start': 18625.718, 'duration': 1.62}, {'end': 18630.339, 'text': 'Alright, next one up, we have breakfast.', 'start': 18628.139, 'duration': 2.2}, {'end': 18635.801, 'text': "Again, we're going to go with boolean, breakfast, create and configure.", 'start': 18630.959, 'duration': 4.842}, {'end': 18639.502, 'text': 'And in this case, again, we are going with the required field.', 'start': 18636.501, 'duration': 3.001}, {'end': 18642.383, 'text': "After that, we're looking whether the room is featured.", 'start': 18640.222, 'duration': 2.161}, {'end': 18648.199, 'text': "So whether the room shows up on our homepage, this is where we're setting up that featured room.", 'start': 18643.314, 'duration': 4.885}, {'end': 18650.801, 'text': "And in this case, again, we'll go with that field.", 'start': 18648.919, 'duration': 1.882}, {'end': 18657.507, 'text': "Again, we're going to go with Boolean featured and I will going to be skipping over here because this is as straightforward as it gets.", 'start': 18651.281, 'duration': 6.226}, {'end': 18660.51, 'text': "Again, we're going to go with a required field.", 'start': 18658.248, 'duration': 2.262}], 'summary': 'Configuring room details: size, capacity, pets, breakfast, and featured.', 'duration': 97.35, 'max_score': 18563.16, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA18563160.jpg'}, {'end': 18747.231, 'src': 'embed', 'start': 18704.328, 'weight': 6, 'content': [{'end': 18708.309, 'text': "Notice if we're going to be navigating here, these will going to be my extras.", 'start': 18704.328, 'duration': 3.981}, {'end': 18712.052, 'text': "And for extras, we're going to use something new that we haven't seen yet.", 'start': 18708.849, 'duration': 3.203}, {'end': 18714.214, 'text': 'And that is a JSON object.', 'start': 18712.572, 'duration': 1.642}, {'end': 18717.257, 'text': "So what we're going to say is the JSON object.", 'start': 18714.955, 'duration': 2.302}, {'end': 18725.624, 'text': "this is what we're going to use for extras create and configure, if you want to have required, or I'm just going to go with required.", 'start': 18717.257, 'duration': 8.367}, {'end': 18727.706, 'text': 'And then last one will be images.', 'start': 18726.064, 'duration': 1.642}, {'end': 18731.952, 'text': 'Now for the images, notice that we are obviously using multiple of them.', 'start': 18728.548, 'duration': 3.404}, {'end': 18735.457, 'text': "Because for the single page, it's not just one image.", 'start': 18732.493, 'duration': 2.964}, {'end': 18737.159, 'text': 'In fact, this is many files.', 'start': 18735.617, 'duration': 1.542}, {'end': 18739.221, 'text': 'So this is the difference.', 'start': 18737.559, 'duration': 1.662}, {'end': 18741.784, 'text': 'If you just want one image, you go with one file.', 'start': 18739.622, 'duration': 2.162}, {'end': 18747.231, 'text': 'If you want multiple images, you just say that images and this will be many files.', 'start': 18742.125, 'duration': 5.106}], 'summary': 'Using json objects for creating and configuring extras, including multiple images.', 'duration': 42.903, 'max_score': 18704.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA18704328.jpg'}, {'end': 19027.977, 'src': 'embed', 'start': 19002.805, 'weight': 11, 'content': [{'end': 19009.208, 'text': "And the way you can do that is since again, you're linking your assets, you can just say, Okay, show me this one, this one and this one.", 'start': 19002.805, 'duration': 6.403}, {'end': 19011.149, 'text': 'So these three will be added.', 'start': 19009.588, 'duration': 1.561}, {'end': 19014.231, 'text': 'And the way I did it is I added for all the rooms.', 'start': 19011.309, 'duration': 2.922}, {'end': 19020.474, 'text': 'Now once we have this setup, the only thing we need to do is click on adding, and then we have few options.', 'start': 19014.651, 'duration': 5.823}, {'end': 19025.896, 'text': "we can click here where we're going back to all the content that we have.", 'start': 19020.854, 'duration': 5.042}, {'end': 19027.977, 'text': 'Or I can just add a new one here.', 'start': 19026.576, 'duration': 1.401}], 'summary': 'Link assets to show and add, with options to click and add new content.', 'duration': 25.172, 'max_score': 19002.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA19002805.jpg'}], 'start': 17833.386, 'title': 'Setting up content management', 'summary': 'Discusses setting up content filtering, shifting to contentful for better management, creating content model, adding fields, and configuring room details. it emphasizes the importance of api keys and provides a detailed overview of the process, features, and data input in contentful, covering validations, field types, and asset linking.', 'chapters': [{'end': 18265.755, 'start': 17833.386, 'title': 'Setting up content filtering and management', 'summary': "Discusses setting up content filtering in the application, shifting from local data to contentful for better management, and provides a detailed overview of contentful's features and setting up a new space.", 'duration': 432.369, 'highlights': ['The chapter discusses setting up content filtering in the application. The speaker explains how to set up filters for size and price in the application, emphasizing the process of filtering data.', 'Shifting from local data to Contentful for better management. The speaker highlights the limitations of using local data and advocates for shifting to Contentful for improved data management, accessibility, and ease of making changes.', "Detailed overview of Contentful's features and setting up a new space. The speaker provides a comprehensive overview of Contentful's features, including setting up a new space, content model, and content, emphasizing the ease of use and accessibility for individuals unfamiliar with the project."]}, {'end': 18524.999, 'start': 18266.216, 'title': 'Setting up contentful interface', 'summary': 'Covers setting up api keys, creating content model, and adding fields in contentful interface. it emphasizes the importance of setting up api keys to consume data and outlines the process of creating a content model with required fields to avoid missing data.', 'duration': 258.783, 'highlights': ['The chapter emphasizes the importance of setting up API keys to consume data and outlines the process of creating a content model with required fields to avoid missing data. Importance of API keys for data consumption, creating content model with required fields', 'The process of setting up API keys and creating content model is explained in detail, providing step-by-step instructions on naming, field types, and configuration options. Step-by-step instructions on setting up API keys and creating content model', 'The importance of required fields in the content model is emphasized to ensure completeness of data and avoid potential errors in accessing the content. Emphasis on required fields for completeness of data and error avoidance']}, {'end': 18747.231, 'start': 18525.62, 'title': 'Setting up room configuration', 'summary': 'Details the process of setting up room configuration including validations, field types, and configurations for price, size, capacity, pets, breakfast, featured room, description, extras, and images.', 'duration': 221.611, 'highlights': ['Setting up room configurations including validations, field types, and configurations for price, size, capacity, pets, breakfast, featured room, description, extras, and images. The tutorial covers the entire process of setting up room configurations, including validations, field types, and configurations for price, size, capacity, pets, breakfast, featured room, description, extras, and images.', 'Explaining the process for setting up the price field with integer type and adding validations. The process for setting up the price field involves using an integer type and adding validations to ensure data accuracy.', "Describing the configuration of the size field as an integer for room square footage with required validations. The size field is configured as an integer to represent the room's square footage, with required validations to ensure data completeness.", 'Detailing the configuration of the capacity field as an integer for maximum room occupancy with required validations. The capacity field is configured as an integer to represent the maximum room occupancy, with required validations for accurate data entry.', 'Setting up boolean fields for pets, breakfast, and featured room with required validations. Boolean fields for pets, breakfast, and featured room are set up with required validations to determine if pets are allowed, if breakfast is available, and if the room should be featured.', 'Introducing the use of a JSON object for the extras field and explaining the configuration options. The extras field utilizes a JSON object, offering new configuration options and potential for required validations.', 'Defining the configuration of the images field to handle multiple files for room images. The images field is configured to handle multiple files for room images, providing a solution for displaying varying images on the single page.']}, {'end': 19267.172, 'start': 18748.018, 'title': 'Content model creation and entry addition', 'summary': 'Covers the process of creating a content model, adding entries, and linking images in contentful, including specific steps and details on data input and asset linking.', 'duration': 519.154, 'highlights': ['The process of creating a content model and adding entries in Contentful is detailed, with specific steps and considerations. The chapter provides a comprehensive guide on creating a content model, adding entries, and making considerations for data input and asset linking in Contentful.', 'Specific steps for adding entries, including naming, type, price, size, capacity, and other details, are outlined. Detailed steps for adding entries are provided, including naming conventions, type specification, pricing, size, capacity, and other specific details.', 'The process of linking images, including adding from local machine, existing assets, and web search, is explained. The process of linking images is explained, encompassing adding from the local machine, existing assets, and web search options.']}], 'duration': 1433.786, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA17833386.jpg', 'highlights': ['The tutorial covers the entire process of setting up room configurations, including validations, field types, and configurations for price, size, capacity, pets, breakfast, featured room, description, extras, and images.', 'The chapter emphasizes the importance of setting up API keys to consume data and outlines the process of creating a content model with required fields to avoid missing data.', 'The process for setting up the price field involves using an integer type and adding validations to ensure data accuracy.', "The size field is configured as an integer to represent the room's square footage, with required validations to ensure data completeness.", 'The capacity field is configured as an integer to represent the maximum room occupancy, with required validations for accurate data entry.', 'Boolean fields for pets, breakfast, and featured room are set up with required validations to determine if pets are allowed, if breakfast is available, and if the room should be featured.', 'The extras field utilizes a JSON object, offering new configuration options and potential for required validations.', 'The images field is configured to handle multiple files for room images, providing a solution for displaying varying images on the single page.', 'The chapter discusses setting up content filtering in the application, emphasizing the process of filtering data.', 'Shifting from local data to Contentful for better management, accessibility, and ease of making changes.', "The speaker provides a comprehensive overview of Contentful's features, including setting up a new space, content model, and content, emphasizing the ease of use and accessibility for individuals unfamiliar with the project.", 'The process of linking images is explained, encompassing adding from the local machine, existing assets, and web search options.', 'The chapter provides a comprehensive guide on creating a content model, adding entries, and making considerations for data input and asset linking in Contentful.']}, {'end': 21087.732, 'segs': [{'end': 19329.848, 'src': 'embed', 'start': 19296.394, 'weight': 1, 'content': [{'end': 19298.555, 'text': 'And obviously right away publish it.', 'start': 19296.394, 'duration': 2.161}, {'end': 19307.019, 'text': "And let's link our existing assets, which by this time, if you have been coding along, you should have at least some images already there.", 'start': 19299.076, 'duration': 7.943}, {'end': 19315.484, 'text': "So you can click on existing assets, then we're going to find them and say this guy, this guy, and this guy will be added.", 'start': 19307.6, 'duration': 7.884}, {'end': 19317.805, 'text': "And of course, I'm just going to publish that.", 'start': 19316.264, 'duration': 1.541}, {'end': 19329.848, 'text': 'then the moment I do that, once we will then head over back to all my data, I should be able to see that I have 16, where previously I had 13.', 'start': 19318.545, 'duration': 11.303}], 'summary': 'Publish existing assets, add 3 images, and increase total to 16 from 13.', 'duration': 33.454, 'max_score': 19296.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA19296394.jpg'}, {'end': 19388.55, 'src': 'embed', 'start': 19361.648, 'weight': 4, 'content': [{'end': 19365.65, 'text': 'So now this would be the time where we start, in fact, consuming our data.', 'start': 19361.648, 'duration': 4.002}, {'end': 19369.813, 'text': 'And the fastest way of doing that would be using the SDK.', 'start': 19366.411, 'duration': 3.402}, {'end': 19375.396, 'text': 'And for that, we will going to have to install one more package by the name of you guessed it, Contentful.', 'start': 19370.453, 'duration': 4.943}, {'end': 19377.878, 'text': "or Contentful doesn't really matter.", 'start': 19375.976, 'duration': 1.902}, {'end': 19379.88, 'text': 'however, you would want to pronounce it.', 'start': 19377.878, 'duration': 2.002}, {'end': 19381.522, 'text': 'I will going to stop the dev server.', 'start': 19379.88, 'duration': 1.642}, {'end': 19382.964, 'text': "I'm going to clear the console right now.", 'start': 19381.522, 'duration': 1.442}, {'end': 19388.55, 'text': "And we're going to copy and paste it here, the npm install Contentful or Contentful.", 'start': 19383.544, 'duration': 5.006}], 'summary': 'Data consumption starting with sdk installation using npm contentful', 'duration': 26.902, 'max_score': 19361.648, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA19361648.jpg'}, {'end': 19745.642, 'src': 'embed', 'start': 19717.303, 'weight': 3, 'content': [{'end': 19721.144, 'text': 'But all my entries are here, not just my 16.', 'start': 19717.303, 'duration': 3.841}, {'end': 19726.205, 'text': 'The ones that I was looking for, where I said that I would want the beach resort room.', 'start': 19721.144, 'duration': 5.061}, {'end': 19728.545, 'text': 'As you can see right now, I can filter it out.', 'start': 19726.745, 'duration': 1.8}, {'end': 19732.546, 'text': "But if I'm looking at all my data, in fact, the value will be 64.", 'start': 19729.085, 'duration': 3.461}, {'end': 19740.4, 'text': "So what I'm saying is, if you're going to have multiple content types for, let's say, each and every project,", 'start': 19732.546, 'duration': 7.854}, {'end': 19742.781, 'text': 'you probably would want to filter it out.', 'start': 19740.4, 'duration': 2.381}, {'end': 19745.642, 'text': 'you can obviously do this in your file.', 'start': 19742.781, 'duration': 2.861}], 'summary': 'The total entries are 64, including 16 beach resort room requests, suggesting the need to filter content types.', 'duration': 28.339, 'max_score': 19717.303, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA19717303.jpg'}, {'end': 19897.016, 'src': 'embed', 'start': 19872.24, 'weight': 2, 'content': [{'end': 19881.323, 'text': 'very beginning I said to you there will going to be this function by the name of get data that will be responsible for getting the data from the condom full.', 'start': 19872.24, 'duration': 9.083}, {'end': 19891.431, 'text': 'And instead of doing everything in the component did mount, where we again used our method, the one that we created ourselves with format data.', 'start': 19881.963, 'duration': 9.468}, {'end': 19897.016, 'text': "Instead, we're going to move all this functionality into this this dot get data.", 'start': 19892.052, 'duration': 4.964}], 'summary': 'A function called get data will retrieve data from the condom full, shifting functionality from component did mount.', 'duration': 24.776, 'max_score': 19872.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA19872240.jpg'}, {'end': 20215.934, 'src': 'embed', 'start': 20189.756, 'weight': 0, 'content': [{'end': 20193.598, 'text': 'Because if you remember, locally, I had only 13 items.', 'start': 20189.756, 'duration': 3.842}, {'end': 20195.459, 'text': "And now we're working with 16 items.", 'start': 20193.898, 'duration': 1.561}, {'end': 20198.862, 'text': "And again, we didn't have to change any kind of functionality or anything like that.", 'start': 20195.82, 'duration': 3.042}, {'end': 20208.328, 'text': "That's the reason why we went through the pain in the beginning, when we structured our data exactly like they would.", 'start': 20199.462, 'duration': 8.866}, {'end': 20214.192, 'text': "the only difference, obviously, is that we're getting back the object and we placed everything already in this items.", 'start': 20208.328, 'duration': 5.864}, {'end': 20215.934, 'text': 'So that was our items array.', 'start': 20214.633, 'duration': 1.301}], 'summary': 'Increased items from 13 to 16 without changing functionality.', 'duration': 26.178, 'max_score': 20189.756, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA20189756.jpg'}, {'end': 20470.095, 'src': 'embed', 'start': 20445.918, 'weight': 7, 'content': [{'end': 20455.329, 'text': "But what I'm trying to show is that Contentful gives you nice options, where you can already get your data structured the way you would like.", 'start': 20445.918, 'duration': 9.411}, {'end': 20459.484, 'text': 'We successfully have pulled data from the Contentful.', 'start': 20456.581, 'duration': 2.903}, {'end': 20462.888, 'text': "And now we're ready to deploy our application online.", 'start': 20460.165, 'duration': 2.723}, {'end': 20465.631, 'text': "Well, there's many awesome platforms that we could use.", 'start': 20463.368, 'duration': 2.263}, {'end': 20470.095, 'text': "In our case, we're going to use Netlify, because it's an awesome hassle free service.", 'start': 20465.951, 'duration': 4.144}], 'summary': 'Contentful allows easy data structuring. data successfully pulled and ready for online deployment using netlify.', 'duration': 24.177, 'max_score': 20445.918, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA20445918.jpg'}, {'end': 20519.181, 'src': 'embed', 'start': 20490.584, 'weight': 6, 'content': [{'end': 20495.386, 'text': 'And in your case, probably if you just sign up for the service, this screen will be empty.', 'start': 20490.584, 'duration': 4.802}, {'end': 20499.267, 'text': 'In my case, I have a bunch of projects for the tutorials on the project.', 'start': 20495.826, 'duration': 3.441}, {'end': 20503.413, 'text': "there's two ways how we can do it, we can do a single drag and drop.", 'start': 20499.787, 'duration': 3.626}, {'end': 20509.382, 'text': "Or in fact, we can use the continuous deployment using the GitHub, this is the option we're going to choose.", 'start': 20504.034, 'duration': 5.348}, {'end': 20512.948, 'text': "So for that, you're also going to need to have a GitHub account.", 'start': 20509.863, 'duration': 3.085}, {'end': 20519.181, 'text': "However, assuming that you're watching a react tutorial, it's safe to say that you probably already have one.", 'start': 20513.376, 'duration': 5.805}], 'summary': 'Service sign-up leads to empty screen, multiple projects and github integration available.', 'duration': 28.597, 'max_score': 20490.584, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA20490584.jpg'}, {'end': 20586.568, 'src': 'embed', 'start': 20562.021, 'weight': 5, 'content': [{'end': 20568.663, 'text': "I would like to change these variables to the environment variables, because I wouldn't want to push them up to the GitHub.", 'start': 20562.021, 'duration': 6.642}, {'end': 20576.465, 'text': "Now in order to do that, we're going to first create a new file, we're going to call this dot ENV development, like so.", 'start': 20569.203, 'duration': 7.262}, {'end': 20581.486, 'text': 'Once we have this file, I would also right away want want to add this to get ignore.', 'start': 20577.065, 'duration': 4.421}, {'end': 20586.568, 'text': "So this way, the file will be ignored, when we're going to be pushing this up to the GitHub.", 'start': 20581.966, 'duration': 4.602}], 'summary': 'Change variables to environment variables to protect data on github.', 'duration': 24.547, 'max_score': 20562.021, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA20562021.jpg'}], 'start': 19267.232, 'title': 'Utilizing contentful for web development', 'summary': 'Details adding json data, images, and publishing web content, setting up contentful sdk and increasing rooms to 16, using contentful api for filtering and querying entries, refactoring data retrieval to retrieve 16 items, and deploying a react application with netlify for a fully functional application.', 'chapters': [{'end': 19317.805, 'start': 19267.232, 'title': 'Adding images and publishing content', 'summary': 'Details the process of adding json data, selecting and adding images, linking existing assets, and publishing content for a web page.', 'duration': 50.573, 'highlights': ['The process involves adding JSON data, selecting images, heading to room 15, and publishing the content.', 'Linking existing assets and selecting the images to be added are crucial steps in the process.', 'The chapter emphasizes the importance of promptly publishing the content to ensure its availability.']}, {'end': 19579.702, 'start': 19318.545, 'title': 'Setting up contentful sdk', 'summary': 'Discusses setting up the contentful sdk, adding data, and accessing it from the application, resulting in an increase from 13 to 16 rooms and utilizing the contentful package to create a client and get entries.', 'duration': 261.157, 'highlights': ['The chapter discusses setting up the Contentful SDK, adding data, and accessing it from the application The chapter covers the process of setting up the Contentful SDK, adding data, and accessing it from the application.', 'Increase from 13 to 16 rooms after adding data The speaker mentions that they were able to see an increase from 13 to 16 rooms after adding data.', 'Utilizing the Contentful package to create a client and get entries The speaker explains the process of utilizing the Contentful package to create a client and get entries for the application.']}, {'end': 19872.24, 'start': 19580.403, 'title': 'Using the contentful api', 'summary': 'Explains how to use the contentful api to retrieve specific entries by filtering based on content type, emphasizing the importance of filtering to manage large datasets and providing guidance on querying entries using content type ids.', 'duration': 291.837, 'highlights': ['The chapter emphasizes the importance of filtering entries to manage large datasets, illustrating how to retrieve specific entries by filtering based on content type, resulting in obtaining 16 items of the specified content type.', 'Guidance is provided on querying entries using content type IDs and the importance of knowing where to find the ID for a particular content model, highlighting the significance of understanding how to filter data based on specific content models.', "The process of using the Contentful API to retrieve specific entries by filtering based on content type is explained, demonstrating how to use 'content_type' and pass in the corresponding ID to filter the data."]}, {'end': 20445.378, 'start': 19872.24, 'title': 'Refactoring data retrieval and ordering', 'summary': "Explains refactoring the data retrieval functionality to a separate function 'getdata', using asynchronous syntax, and ordering the fetched data using contentful's api, resulting in successfully retrieving 16 items compared to the previous 13, without changing any existing functionality.", 'duration': 573.138, 'highlights': ["Refactoring the data retrieval functionality to a separate function 'getData' The chapter emphasizes moving the functionality of data retrieval from the 'componentDidMount' method to a separate function 'getData', enhancing code organization and maintainability.", "Using asynchronous syntax for data retrieval The use of 'async await' syntax in the 'getData' function simplifies handling asynchronous code, ensuring straightforward and error-resilient data retrieval.", "Successfully retrieving 16 items compared to the previous 13 The implementation of the refactored 'getData' function results in the successful retrieval of 16 items from Contentful, compared to the previous 13, demonstrating a 23% increase in fetched data.", "Ordering the fetched data using Contentful's API The chapter demonstrates ordering the fetched data based on a specified property using Contentful's API, showcasing the flexibility and functionality provided by the platform."]}, {'end': 21087.732, 'start': 20445.918, 'title': 'Deploying react application with netlify', 'summary': 'Discusses deploying a react application with netlify, emphasizing the ease of setup, use of environment variables, github integration, and the connection with contentful, resulting in a fully functional and deployable application.', 'duration': 641.814, 'highlights': ['Netlify is chosen for deployment due to its hassle-free service and free account options, requiring only email signup and allowing various functionalities without credit card details. Netlify is chosen due to its hassle-free service and free account options, requiring only email signup and allowing various functionalities without credit card details.', 'Setting up environment variables using a .env file to store sensitive data and utilizing process.env to access them, ensuring security and privacy of the data. Setting up environment variables using a .env file to store sensitive data and utilizing process.env to access them, ensuring security and privacy of the data.', 'Integration with GitHub for continuous deployment, including creating a new repository, adding and committing files, and pushing to the repository, ensuring seamless integration and version control. Integration with GitHub for continuous deployment, including creating a new repository, adding and committing files, and pushing to the repository, ensuring seamless integration and version control.', 'Connection with Contentful for managing project data, showcasing the ability to delete content from Contentful and observe the changes reflected in the deployed application, highlighting the seamless connection and real-time updates. Connection with Contentful for managing project data, showcasing the ability to delete content from Contentful and observe the changes reflected in the deployed application, highlighting the seamless connection and real-time updates.']}], 'duration': 1820.5, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LXJOvkVYQqA/pics/LXJOvkVYQqA19267232.jpg', 'highlights': ['Successfully retrieving 16 items compared to the previous 13, demonstrating a 23% increase in fetched data', 'The process involves adding JSON data, selecting images, and promptly publishing the content', "Refactoring the data retrieval functionality to a separate function 'getData', enhancing code organization and maintainability", 'The chapter emphasizes the importance of filtering entries to manage large datasets, resulting in obtaining 16 items of the specified content type', 'Utilizing the Contentful package to create a client and get entries for the application', 'Setting up environment variables using a .env file to store sensitive data and ensuring security and privacy', 'Integration with GitHub for continuous deployment, ensuring seamless integration and version control', 'Connection with Contentful for managing project data, showcasing the seamless connection and real-time updates', 'Netlify is chosen for deployment due to its hassle-free service and free account options']}], 'highlights': ['Successfully retrieving 16 items compared to the previous 13, demonstrating a 23% increase in fetched data', 'The project will use React Router for routing, React Context API for state management, Contentful Headless CMS for data management, and Netlify for hosting', 'The process involves adding JSON data, selecting images, and promptly publishing the content', 'The tutorial covers the entire process of setting up room configurations, including validations, field types, and configurations for price, size, capacity, pets, breakfast, featured room, description, extras, and images', 'The chapter emphasizes the importance of filtering entries to manage large datasets, resulting in obtaining 16 items of the specified content type', 'The project will be responsive and include a toggle button for the navbar on smaller screen sizes', 'The user interface includes a rooms page with filtering options for various room types and amenities, providing a user-friendly experience for finding accommodations', 'The filtering options allow users to narrow down their search based on specific criteria such as room type, price, and amenities, enhancing the efficiency of the search process', 'The homepage will include a traditional navbar, a hero component with a background image, and a banner linking to the rooms page', 'The chapter details how to access URL parameters in class-based components, demonstrating the process through constructors, props, super, and component lifecycle methods like componentDidMount', 'The process of setting up navigation links using the Link component from React Router and organizing links using arrays for efficient rendering', 'The process of setting up a room context using the create context method, creating a provider and consumer for the context, and exporting them for usage', 'The concept of state lifting in React components is explained, emphasizing the need to pass down props unnecessarily due to prop drilling', 'The importance of maintaining a consistent data structure for seamless integration with Contentful is highlighted, aiming to facilitate easy data access and filtering, ensuring compatibility and ease of use for both local and external data sources', 'The process of looping over an array, formatting and accessing data is explained', 'The chapter covers setting up higher order components within the context to provide an alternative approach, highlighting the process of passing a component to a function that returns another function, known as a higher order component']}