title
React JS Course for Beginners - 2021 Tutorial

description
This is a full premium course. Learn React.js from the ground up with fundamentals to more intermediate and advanced topics. You will learn by building a real app! 💻 Starter files: https://github.com/weibenfalk/react-rmdb-v3-starter-files Course from Thomas Weibenfalk. Check out his channel: https://www.youtube.com/channel/UCnnnWy4UTYN258FfVGeXBbg Learn: - React - JSX - Styled Components - React Router - State and Props - Context - CSS - API handling - Hooks - Typescript - Persist state in SessionStorage - Deploy to Netlify - And MUCH more ... ⭐️ Course Contents ⭐️ ⌨️ (0:00:10) Introduction ⌨️ (0:00:57) The App ⌨️ (0:03:27) The Movie DB - API Key ⌨️ (0:05:09) What is React? ⌨️ (0:10:49) Starter Files ⌨️ (0:14:16) Quick about tooling ⌨️ (0:15:50) Bootstrap with CRA ⌨️ (0:19:11) Install dependencies ⌨️ (0:24:17) Copy fils from starter files ⌨️ (0:28:34) Setup API Key and walkthrough of API files ⌨️ (0:33:24) React without JSX ⌨️ (0:40:10) Short about JSX ⌨️ (0:42:52) Crash course in Props and State ⌨️ (0:55:12) Short about Styled Components ⌨️ (0:58:23) Global Styles ⌨️ (1:08:01) Header Component ⌨️ (1:21:09) Header Component - Styles ⌨️ (1:25:40) Home Component - Scaffold ⌨️ (1:33:45) Short about built-in hooks in React ⌨️ (1:38:55) Fetch data from the API for Home Page ⌨️ (1:52:44) Custom hook for Home Page ⌨️ (1:59:49) HeroImage Component ⌨️ (2:11:22) HeroImage Component - Styles ⌨️ (2:20:23) Grid Component ⌨️ (2:26:06) Grid Component - Styles ⌨️ (2:29:44) Thumb Component ⌨️ (2:34:59) Thumb Component - Styles ⌨️ (2:37:28) Spinner Component ⌨️ (2:42:03) SearchBar Component ⌨️ (2:57:54) SearchBar Component - Styles ⌨️ (3:02:16) SearchBar Component - Logic ⌨️ (3:06:51) Button Component ⌨️ (3:10:42) Button Component - Styles ⌨️ (3:13:06) Button Component - Logic ⌨️ (3:19:50) Short about React Router ⌨️ (3:21:59) Routing with React Router ⌨️ (3:34:15) Movie Component - Scaffold ⌨️ (3:36:26) Fetch movie data from the API ⌨️ (3:49:38) BreadCrumb Component ⌨️ (3:54:49) BreadCrumb Component - Styles ⌨️ (3:57:46) MovieInfo Component ⌨️ (4:08:41) MovieInfo Component - Styles ⌨️ (4:17:35) MovieInfoBar Component ⌨️ (4:23:26) MovieInfoBar Component - Styles ⌨️ (4:26:38) Actor Component ⌨️ (4:32:09) Actor Component - Styles ⌨️ (4:34:16) Short about PropTypes ⌨️ (4:37:38) Validate Props with PropTypes ⌨️ (4:48:17) Short about SessionStorage ⌨️ (4:50:32) SessionStorage - Home ⌨️ (4:59:34) SessionStorage - Movie ⌨️ (5:03:17) Build and prepare for Netlify ⌨️ (5:05:58) Netlify drag and drop and Netlify CLI ⌨️ (5:10:29) Netlify Continous Deployment ⌨️ (5:13:48) Bonus - Classes - SearchBar Component ⌨️ (5:22:04) Bonus - Classes - Home Component ⌨️ (5:33:14) Bonus - Classes - Movie Component ⌨️ (5:40:39) Bonus - Typescript - Introduction ⌨️ (5:42:20) Bonus - Typescript - Bootstrap project and copy files ⌨️ (5:47:19) Bonus - Typescript - Refactor base files ⌨️ (6:04:16) Bonus - Typescript - Refactor Home and Components ⌨️ (6:14:55) Bonus - Typescript - Refactor Movie and Components ⌨️ (6:25:52) Bonus - Login - Short about TMDB login and rating system ⌨️ (6:29:25) Bonus - Login - Global Context ⌨️ (6:34:34) Bonus - Login - Login Component ⌨️ (6:50:49) Bonus - Login - Login Component - Styles ⌨️ (6:53:47) Bonus - Login - Login from Header ⌨️ (7:00:27) Bonus - Login - Rate Component ⌨️ (7:04:35) Bonus - Login - Rating from MovieInfo 🎉 Thanks to our Champion and Sponsor supporters: 👾 Wong Voon jinq 👾 hexploitation 👾 Katia Moran 👾 BlckPhantom 👾 Nick Raker 👾 Otis Morgan 👾 DeezMaster 👾 Treehouse

detail
{'title': 'React JS Course for Beginners - 2021 Tutorial', 'heatmap': [{'end': 1550.385, 'start': 1031.2, 'weight': 0.721}, {'end': 5169.657, 'start': 4647.488, 'weight': 0.752}, {'end': 6715.741, 'start': 6193.806, 'weight': 0.746}, {'end': 8265.332, 'start': 8005.457, 'weight': 0.757}, {'end': 10334.45, 'start': 10072.029, 'weight': 0.943}, {'end': 11111.983, 'start': 10845.832, 'weight': 0.714}, {'end': 12659.822, 'start': 12394.655, 'weight': 0.724}, {'end': 13689.12, 'start': 13430.481, 'weight': 0.947}], 'summary': 'This react js course by thomas weibenfolk covers basic, intermediate, and advanced react topics, including building a movie application using the movie database api, setting up tools like node.js and npm, creating components and hooks in react, styling and managing state, utilizing react router, refactoring to class components and typescript, and best practices for global context and type checking.', 'chapters': [{'end': 268.394, 'segs': [{'end': 119.703, 'src': 'embed', 'start': 96.645, 'weight': 0, 'content': [{'end': 103.75, 'text': "so that's how the basic functionality of this application is, and if we click on the movie, you can see that we get all data from that movie.", 'start': 96.645, 'duration': 7.105}, {'end': 105.074, 'text': "So that's nice.", 'start': 104.514, 'duration': 0.56}, {'end': 109.497, 'text': "We're going to show the actress and also some information about the movie itself.", 'start': 105.094, 'duration': 4.403}, {'end': 113.059, 'text': 'We can see the revenue, the budget and the running time, for example.', 'start': 109.657, 'duration': 3.402}, {'end': 115.781, 'text': 'And here you may think that you can also click on the actress.', 'start': 113.119, 'duration': 2.662}, {'end': 119.703, 'text': 'And yeah, of course we could do that, but I have to limit this tutorial somewhere.', 'start': 115.901, 'duration': 3.802}], 'summary': 'Application shows movie data including revenue, budget, and running time.', 'duration': 23.058, 'max_score': 96.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE96645.jpg'}, {'end': 174.413, 'src': 'embed', 'start': 150.687, 'weight': 1, 'content': [{'end': 160.421, 'text': "so that's something that's new in this version 3 of this course and of course everything is going to be responsive, going to create that one.", 'start': 150.687, 'duration': 9.734}, {'end': 169.811, 'text': "also, as you can see here, the grid, for example, with the movies, it changes depending on the viewport size, so that's nice.", 'start': 160.421, 'duration': 9.39}, {'end': 174.413, 'text': "so it's a fully working application and, to be honest, i'm quite proud of this design.", 'start': 169.811, 'duration': 4.602}], 'summary': 'Version 3 of the course introduces responsive design and a fully working application.', 'duration': 23.726, 'max_score': 150.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE150687.jpg'}], 'start': 0.089, 'title': 'React and movie app development', 'summary': 'Covers a comprehensive course on react by thomas weibenfolk, including basic, intermediate, and advanced topics, and a course on building a movie application using the movie database api, focusing on design, fetching movie data, obtaining a free api key, and registering for an account at the movie database.', 'chapters': [{'end': 57.729, 'start': 0.089, 'title': 'React: comprehensive course by thomas weibenfolk', 'summary': 'Covers a comprehensive course on react by thomas weibenfolk, the developer from sweden, with the third iteration of the course including basic, intermediate, and possibly advanced topics, aiming to provide a well-made learning experience.', 'duration': 57.64, 'highlights': ['Thomas Weibenfolk, the developer from Sweden, offers a comprehensive course on React, including basic, intermediate, and advanced topics.', 'The course is the third iteration and has been significantly improved based on feedback, making it a well-made learning experience.', 'Thomas Weibenfolk created the course out of love for React and as the first ever course, with the intention to provide a high-quality learning experience.']}, {'end': 268.394, 'start': 60.069, 'title': 'Building movie application with movie database api', 'summary': 'Introduces a course on building a movie application using the movie database api, focusing on creating a design, fetching movie data, and obtaining a free api key. it also emphasizes the basic functionality of the application and the process of registering for an account at the movie database.', 'duration': 208.325, 'highlights': ['The chapter introduces a course on building a movie application using the Movie Database API, focusing on creating a design, fetching movie data, and obtaining a free API key. The course is centered around building a movie application using the Movie Database API, with an emphasis on design creation, fetching movie data, and obtaining a free API key.', 'It emphasizes the basic functionality of the application and the process of registering for an account at the Movie Database. The basic functionality of the application includes showcasing the most popular movie, allowing users to search for movies, and displaying detailed movie information such as revenue, budget, and running time. Additionally, the process of registering for an account at the Movie Database is explained.', 'The Movie Database API is described as having a great API for fetching movies and TV shows, with a focus on movies. The Movie Database API is highlighted for its capability to fetch a wide range of movies and TV shows, with a specific focus on movies.']}], 'duration': 268.305, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE89.jpg', 'highlights': ['Thomas Weibenfolk offers a comprehensive course on React, including basic, intermediate, and advanced topics.', 'The course on building a movie application using the Movie Database API focuses on design, fetching movie data, obtaining a free API key, and registering for an account at the Movie Database.', 'The course is the third iteration and has been significantly improved based on feedback, making it a well-made learning experience.', 'The chapter introduces a course on building a movie application using the Movie Database API, with an emphasis on design creation, fetching movie data, and obtaining a free API key.', 'The Movie Database API is described as having a great API for fetching movies and TV shows, with a focus on movies.']}, {'end': 1858.433, 'segs': [{'end': 546.332, 'src': 'embed', 'start': 515.942, 'weight': 2, 'content': [{'end': 519.602, 'text': "And in this course, we're going to focus on creating functional components.", 'start': 515.942, 'duration': 3.66}, {'end': 521.563, 'text': "And I'm going to tell you more about that later.", 'start': 519.763, 'duration': 1.8}, {'end': 528.805, 'text': 'And in the end of the tutorial, when we have finished the application, I also going to show you how to convert some of the components,', 'start': 522.124, 'duration': 6.681}, {'end': 531.606, 'text': 'the stateful components, to class components.', 'start': 528.805, 'duration': 2.801}, {'end': 532.986, 'text': 'just in case.', 'start': 532.026, 'duration': 0.96}, {'end': 539.969, 'text': 'you need to know how to create class components also, because the reality is, if you start working for a company or a client,', 'start': 532.986, 'duration': 6.983}, {'end': 546.332, 'text': "there may probably be some components that are still class components, because there's a lot of applications made in react.", 'start': 539.969, 'duration': 6.363}], 'summary': 'Focus on creating functional components and converting stateful components to class components in react.', 'duration': 30.39, 'max_score': 515.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE515942.jpg'}, {'end': 601.253, 'src': 'embed', 'start': 572.311, 'weight': 0, 'content': [{'end': 574.732, 'text': "And we're going to talk more about props also later.", 'start': 572.311, 'duration': 2.421}, {'end': 576.113, 'text': "So don't worry about that.", 'start': 575.012, 'duration': 1.101}, {'end': 579.064, 'text': 'But this is actually not HTML.', 'start': 576.963, 'duration': 2.101}, {'end': 580.985, 'text': "It's something that's called JSX.", 'start': 579.144, 'duration': 1.841}, {'end': 584.446, 'text': "And that's something that we're also going to learn in this course.", 'start': 581.365, 'duration': 3.081}, {'end': 586.627, 'text': 'So we create the component here.', 'start': 584.986, 'duration': 1.641}, {'end': 593.15, 'text': 'We tell it to use this component and React will take care of the rest and create this div with our text hello.', 'start': 587.107, 'duration': 6.043}, {'end': 596.551, 'text': "And in this case, it's going to be the name that we send in with a prop.", 'start': 593.35, 'duration': 3.201}, {'end': 598.232, 'text': 'So the name is going to be Taylor.', 'start': 596.951, 'duration': 1.281}, {'end': 601.253, 'text': "It's going to type out hello Taylor, as you can see here.", 'start': 598.412, 'duration': 2.841}], 'summary': "Learning jsx and creating components with react for displaying 'hello taylor'.", 'duration': 28.942, 'max_score': 572.311, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE572311.jpg'}, {'end': 660.333, 'src': 'embed', 'start': 632.714, 'weight': 4, 'content': [{'end': 637.1, 'text': 'Because this is my first ever course I created and this is the third version,', 'start': 632.714, 'duration': 4.386}, {'end': 646.594, 'text': 'meaning that I have listened to people that have enrolled this course before and changed stuff and added stuff to make it more optimal and more perfect.', 'start': 637.1, 'duration': 9.494}, {'end': 648.858, 'text': "And hopefully you'll enjoy this course.", 'start': 646.815, 'duration': 2.043}, {'end': 660.333, 'text': 'this course, i provided you with a zip file that you should download before you start the course, and this zip file contains a few folders here,', 'start': 652.248, 'duration': 8.085}], 'summary': 'First course creator revised content based on feedback, now in its third version, includes a downloadable zip file.', 'duration': 27.619, 'max_score': 632.714, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE632714.jpg'}, {'end': 960.738, 'src': 'embed', 'start': 932.026, 'weight': 5, 'content': [{'end': 935.669, 'text': 'then i use visual studio code as my id.', 'start': 932.026, 'duration': 3.643}, {'end': 944.144, 'text': "so that's what i'm using in this course, and then i'm going to use create React app and bootstrap our React application really fast and easy.", 'start': 935.669, 'duration': 8.475}, {'end': 945.567, 'text': "So that's what we're going to do.", 'start': 944.465, 'duration': 1.102}, {'end': 948.15, 'text': "And I'm actually going to do that in the next video.", 'start': 946.087, 'duration': 2.063}, {'end': 950.374, 'text': "So let's get started with our application.", 'start': 948.291, 'duration': 2.083}, {'end': 960.738, 'text': "I'm happy to see that you're going to create this project from scratch, and we're going to use Create React App to bootstrap our application.", 'start': 953.553, 'duration': 7.185}], 'summary': 'Using visual studio code as id, creating react app with create react app and bootstrap for fast and easy react application setup.', 'duration': 28.712, 'max_score': 932.026, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE932026.jpg'}, {'end': 1550.385, 'src': 'heatmap', 'start': 1031.2, 'weight': 0.721, 'content': [{'end': 1033.142, 'text': 'so hyper is a great terminal.', 'start': 1031.2, 'duration': 1.942}, {'end': 1039.988, 'text': 'if you want to have a customized terminal, you also have a built-in terminal in visual studio code, of course.', 'start': 1033.142, 'duration': 6.846}, {'end': 1041.069, 'text': "so let's get started.", 'start': 1039.988, 'duration': 1.081}, {'end': 1054.299, 'text': 'make sure that you navigate inside of a folder where you want to create your application and then we type in mpx and then create dash react dash app and then we have the name of our application,', 'start': 1041.069, 'duration': 13.23}, {'end': 1062.141, 'text': "and i'm going to name it react-rmdb, and rmdb stands for react movie database.", 'start': 1054.299, 'duration': 7.842}, {'end': 1064.681, 'text': "so that's the best i could come up with.", 'start': 1062.141, 'duration': 2.54}, {'end': 1070.003, 'text': 'you can use whatever name you want and then we can hit enter and then wait for it.', 'start': 1064.681, 'duration': 5.322}, {'end': 1072.043, 'text': 'it will install everything for us.', 'start': 1070.003, 'duration': 2.04}, {'end': 1073.324, 'text': 'so it will take a little while.', 'start': 1072.043, 'duration': 1.281}, {'end': 1080.948, 'text': 'all right, hopefully that installed correctly for you, and create react app has now hopefully bootstrapped or application.', 'start': 1074.284, 'duration': 6.664}, {'end': 1084.51, 'text': 'you could set up this yourself and not use create react app.', 'start': 1080.948, 'duration': 3.562}, {'end': 1092.354, 'text': "but create react app is actually used in in many production applications and it's actually used right now for a client that i work with,", 'start': 1084.51, 'duration': 7.844}, {'end': 1094.095, 'text': "and it's a fairly large application.", 'start': 1092.354, 'duration': 1.741}, {'end': 1101.699, 'text': "so you can do a lot of stuff with create react app And it's using Babel and Webpack in the background to set up the React environment for you.", 'start': 1094.095, 'duration': 7.604}, {'end': 1105.501, 'text': "So that's what you could do yourself if you don't want to use Create React App.", 'start': 1102.2, 'duration': 3.301}, {'end': 1110.223, 'text': "But I'm not going to show that in this course because I think it's a little bit advanced for a beginner course.", 'start': 1105.641, 'duration': 4.582}, {'end': 1113.545, 'text': "And actually, we're going to be fine with Create React App.", 'start': 1110.563, 'duration': 2.982}, {'end': 1114.705, 'text': "That's all that we need.", 'start': 1113.645, 'duration': 1.06}, {'end': 1116.866, 'text': "So we're also going to make sure that it works.", 'start': 1115.166, 'duration': 1.7}, {'end': 1119.788, 'text': 'So make sure that you navigate inside of the project folder.', 'start': 1117.047, 'duration': 2.741}, {'end': 1126.131, 'text': "I'm going to clear this and then type in cd react-rmdb or whatever you named it.", 'start': 1120.408, 'duration': 5.723}, {'end': 1129.231, 'text': "And then we're inside of that folder.", 'start': 1127.489, 'duration': 1.742}, {'end': 1131.533, 'text': 'And then we can type npm start.', 'start': 1129.931, 'duration': 1.602}, {'end': 1135.737, 'text': 'And it should start up our environment.', 'start': 1134.015, 'duration': 1.722}, {'end': 1137.819, 'text': "This is the finished one that's here now.", 'start': 1136.137, 'duration': 1.682}, {'end': 1141.343, 'text': "So it's going to be replaced by this application here.", 'start': 1137.839, 'duration': 3.504}, {'end': 1144.826, 'text': "So it's working and we have successfully bootstrapped our application.", 'start': 1141.403, 'duration': 3.423}, {'end': 1145.967, 'text': "And that's sweet.", 'start': 1145.046, 'duration': 0.921}, {'end': 1150.852, 'text': "In the next video, we're going to install a few dependencies that we're going to use for this project.", 'start': 1146.367, 'duration': 4.485}, {'end': 1159.002, 'text': "We have bootstrapped our application and now we're going to install some dependencies that we're going to use for this project.", 'start': 1153.82, 'duration': 5.182}, {'end': 1162.823, 'text': "And the first one is going to be something that's called React Router.", 'start': 1159.482, 'duration': 3.341}, {'end': 1168.165, 'text': 'And React Router is the standard in a React application for handling routes.', 'start': 1163.283, 'duration': 4.882}, {'end': 1174.947, 'text': 'Because this is a single page application and we need something to handle our routing because we are going to have different pages.', 'start': 1168.585, 'duration': 6.362}, {'end': 1177.789, 'text': "And the one that we're going to use is called React Router.", 'start': 1175.507, 'duration': 2.282}, {'end': 1184.016, 'text': "There is another library that's called Reach Router, and I'm actually using that one in version two of this course.", 'start': 1178.11, 'duration': 5.906}, {'end': 1189.861, 'text': 'But the team that created Reach Router and React Router is the same team.', 'start': 1184.776, 'duration': 5.085}, {'end': 1194.927, 'text': "So they're going to kind of merge them together into React Router version six.", 'start': 1190.022, 'duration': 4.905}, {'end': 1202.039, 'text': "And this one is still in beta mode, but I've talked to them and I think that I should have this one in this course,", 'start': 1195.854, 'duration': 6.185}, {'end': 1209.104, 'text': "because it will soon be out and the API won't likely change because we're not going to use the most advanced stuff in this router library.", 'start': 1202.039, 'duration': 7.065}, {'end': 1210.425, 'text': 'So we will be fine.', 'start': 1209.524, 'duration': 0.901}, {'end': 1212.506, 'text': 'And we have some instructions down here.', 'start': 1210.845, 'duration': 1.661}, {'end': 1219.891, 'text': "I'm at github.com forward slash react training forward slash react dash router forward slash releases.", 'start': 1212.906, 'duration': 6.985}, {'end': 1224.535, 'text': 'And down below here, we can see that we have some instructions on how to install it.', 'start': 1220.032, 'duration': 4.503}, {'end': 1229.116, 'text': "So I'm going to bring up my terminal and do something like this.", 'start': 1224.855, 'duration': 4.261}, {'end': 1231.617, 'text': 'And we could, of course, just copy this one and paste it in.', 'start': 1229.177, 'duration': 2.44}, {'end': 1234.978, 'text': 'But in my courses, I wanted to learn as much as possible.', 'start': 1231.877, 'duration': 3.101}, {'end': 1243.141, 'text': "And it's always a great idea to not copy paste too much and type stuff in because that will make you remember stuff much easier.", 'start': 1235.359, 'duration': 7.782}, {'end': 1244.662, 'text': "So that's what we're going to do now.", 'start': 1243.481, 'duration': 1.181}, {'end': 1250.826, 'text': "so i'm going to type in mpm i, or if you're using yarn, you can of course use that instead.", 'start': 1245.382, 'duration': 5.444}, {'end': 1257.711, 'text': "i'm going to use mpm for this whole course and i'm typing in i instead of typing out the complete word install.", 'start': 1250.826, 'duration': 6.885}, {'end': 1260.173, 'text': "that's a shorthand for install.", 'start': 1257.711, 'duration': 2.462}, {'end': 1264.736, 'text': "so mpm i, And then we need to install something that's called history also.", 'start': 1260.173, 'duration': 4.563}, {'end': 1268.479, 'text': "That's another library that's used in combination with React Router.", 'start': 1264.776, 'duration': 3.703}, {'end': 1270.44, 'text': 'And we can install them in one go.', 'start': 1268.859, 'duration': 1.581}, {'end': 1273.462, 'text': 'If I type history here, then I have a blank space.', 'start': 1270.8, 'duration': 2.662}, {'end': 1276.384, 'text': 'And then I can type in the other library that I want to install.', 'start': 1273.622, 'duration': 2.762}, {'end': 1280.187, 'text': "And in this case, it's going to be react-router-dom.", 'start': 1276.444, 'duration': 3.743}, {'end': 1283.009, 'text': 'And then we have an at sign and next.', 'start': 1280.667, 'duration': 2.342}, {'end': 1285.571, 'text': 'And this will grab the beta version of React Router.', 'start': 1283.209, 'duration': 2.362}, {'end': 1288.553, 'text': 'So press enter and wait for it.', 'start': 1286.511, 'duration': 2.042}, {'end': 1291.602, 'text': 'Hopefully that installed for you correctly.', 'start': 1289.821, 'duration': 1.781}, {'end': 1296.603, 'text': "So I'm going to clear my console again and we're going to move on to something that's called style components.", 'start': 1291.622, 'duration': 4.981}, {'end': 1301.065, 'text': 'Style components is a super great library to use in combination with React.', 'start': 1296.843, 'duration': 4.222}, {'end': 1306.326, 'text': 'With style components, we can create our CSS in isolated and scoped components.', 'start': 1301.345, 'duration': 4.981}, {'end': 1307.787, 'text': "So that's really, really great.", 'start': 1306.626, 'duration': 1.161}, {'end': 1310.848, 'text': 'And we have a lot of features that we have, for example, in SAS.', 'start': 1307.847, 'duration': 3.001}, {'end': 1317.231, 'text': 'we can do nesting and stuff like that and we can send in props and change our styling dynamically.', 'start': 1311.428, 'duration': 5.803}, {'end': 1321.473, 'text': "and i'm going to talk more about style components as we go along in this course,", 'start': 1317.231, 'duration': 4.242}, {'end': 1326.976, 'text': 'because we are going to create the styling if you choose that path that i really think you should.', 'start': 1321.473, 'duration': 5.503}, {'end': 1333.999, 'text': "if you want to have some css practice, but it's up to you i provided you with different alternatives for this course.", 'start': 1326.976, 'duration': 7.023}, {'end': 1339.262, 'text': "so we're going to install style components and you can read more about it at style-components.com.", 'start': 1333.999, 'duration': 5.263}, {'end': 1348.572, 'text': 'go back to the terminal and we type in mpmi styled dash components and we press enter.', 'start': 1340.726, 'duration': 7.846}, {'end': 1350.834, 'text': 'all right, that went smoothly.', 'start': 1348.572, 'duration': 2.262}, {'end': 1357.879, 'text': "so i cleared the console yet again and we move on to the last dependency that we need, and that is something that's called prop types.", 'start': 1350.834, 'duration': 7.045}, {'end': 1363.604, 'text': 'prop types is a great tool in react, where you can type, check your props that you send into your components.', 'start': 1357.879, 'duration': 5.725}, {'end': 1368.727, 'text': "So, as they say here, it's runtime type checking for React props and similar objects.", 'start': 1364.204, 'duration': 4.523}, {'end': 1369.948, 'text': "So that's great.", 'start': 1369.167, 'duration': 0.781}, {'end': 1372.79, 'text': 'Today, a lot of people use TypeScript instead.', 'start': 1370.428, 'duration': 2.362}, {'end': 1374.491, 'text': "Then you don't need to use prop types.", 'start': 1372.83, 'duration': 1.661}, {'end': 1377.133, 'text': 'And I actually use TypeScript a lot myself.', 'start': 1374.791, 'duration': 2.342}, {'end': 1378.894, 'text': 'I started to like it actually.', 'start': 1377.233, 'duration': 1.661}, {'end': 1382.256, 'text': "But in our case, we're not using TypeScript right now.", 'start': 1379.234, 'duration': 3.022}, {'end': 1389.901, 'text': "I'm going to show you that at the end of this course in a special module that I created where we refactor everything to use TypeScript instead.", 'start': 1382.456, 'duration': 7.445}, {'end': 1391.943, 'text': "But for now, we're not using TypeScript.", 'start': 1390.181, 'duration': 1.762}, {'end': 1393.964, 'text': "So that's why we're going to use prop types.", 'start': 1392.083, 'duration': 1.881}, {'end': 1397.025, 'text': "And I'm going to talk more about this later in the course.", 'start': 1394.544, 'duration': 2.481}, {'end': 1403.567, 'text': "And I've placed it kind of at the end of the course because I don't want too much stuff going on when we learn React.", 'start': 1397.385, 'duration': 6.182}, {'end': 1404.587, 'text': "So that's why.", 'start': 1403.947, 'duration': 0.64}, {'end': 1407.348, 'text': "So I'm going to talk about it at the end of the course.", 'start': 1404.607, 'duration': 2.741}, {'end': 1413.85, 'text': 'And when you create a component that has some props, you should use prop types to do type checking on your props.', 'start': 1407.568, 'duration': 6.282}, {'end': 1415.911, 'text': "But I'm not going to do that first.", 'start': 1414.29, 'duration': 1.621}, {'end': 1421.693, 'text': "I'm going to add it in later in the course so we don't get distracted of too much stuff going on.", 'start': 1416.371, 'duration': 5.322}, {'end': 1429.251, 'text': 'Alright, so go back to the terminal, type in npm i prop-types and press enter.', 'start': 1422.691, 'duration': 6.56}, {'end': 1430.865, 'text': "So that's it.", 'start': 1430.285, 'duration': 0.58}, {'end': 1432.186, 'text': "That's our dependencies.", 'start': 1430.985, 'duration': 1.201}, {'end': 1435.167, 'text': "And of course, I didn't mention it at the start of this video.", 'start': 1432.526, 'duration': 2.641}, {'end': 1441.51, 'text': 'You should, of course, be in the folder that we created, the application that we bootstrapped with Create React App.', 'start': 1435.467, 'duration': 6.043}, {'end': 1442.49, 'text': "It's very important.", 'start': 1441.61, 'duration': 0.88}, {'end': 1444.671, 'text': 'You have to navigate inside of that folder.', 'start': 1442.81, 'duration': 1.861}, {'end': 1449.733, 'text': "Otherwise, it won't work because we are installing the dependencies in that project folder.", 'start': 1445.051, 'duration': 4.682}, {'end': 1450.633, 'text': 'All right.', 'start': 1450.293, 'duration': 0.34}, {'end': 1456.976, 'text': "In the next video, we're going to copy some files from the starter file zip file to this project that we're going to need to make this work.", 'start': 1450.753, 'duration': 6.223}, {'end': 1465.779, 'text': 'If we look inside of our project folder, react-rmdb, we can see that we have some different folders and files here.', 'start': 1459.915, 'duration': 5.864}, {'end': 1472.624, 'text': 'And for example, if we look in the public folder, we can see that we have some image files and the index.html file.', 'start': 1466.279, 'duration': 6.345}, {'end': 1476.626, 'text': 'And this is the folder that the dev environment is going to build for us.', 'start': 1472.964, 'duration': 3.662}, {'end': 1481.389, 'text': "So the public folder is the finished files that we're using for running the application.", 'start': 1477.207, 'duration': 4.182}, {'end': 1483.551, 'text': "So that's everything inside of there.", 'start': 1481.95, 'duration': 1.601}, {'end': 1489.535, 'text': 'And the source folder, the SRC folder, is going to be the folder where we create all our stuff for the application.', 'start': 1483.651, 'duration': 5.884}, {'end': 1496.6, 'text': 'so you can see, we have some css file and we have an app file, an index file and an index css file.', 'start': 1490.375, 'duration': 6.225}, {'end': 1498.121, 'text': 'we also have a test file.', 'start': 1496.6, 'duration': 1.521}, {'end': 1503.224, 'text': "we're not going to do any tests in this course, so this one we're not going to use.", 'start': 1498.121, 'duration': 5.103}, {'end': 1504.645, 'text': 'and we have a service worker.', 'start': 1503.224, 'duration': 1.421}, {'end': 1506.367, 'text': "we're not going to use this one either.", 'start': 1504.645, 'duration': 1.722}, {'end': 1509.409, 'text': "and we have the setup test that we're not going to use.", 'start': 1506.367, 'duration': 3.042}, {'end': 1511.37, 'text': 'if we take a look inside of our zip file,', 'start': 1509.409, 'duration': 1.961}, {'end': 1518.557, 'text': 'the starter files that you should have downloaded for this course and we take a look inside of the first folder here,', 'start': 1511.37, 'duration': 7.187}, {'end': 1520.799, 'text': 'one files to be copied to project folder.', 'start': 1518.557, 'duration': 2.242}, {'end': 1524.504, 'text': "all right, so that's the files that are going to be copied to the project.", 'start': 1520.799, 'duration': 3.705}, {'end': 1531.571, 'text': 'so make sure that you mark them here, copy them, move back to your folder, your project folder, and paste them in.', 'start': 1524.504, 'duration': 7.067}, {'end': 1534.293, 'text': "and then you're going to choose to replace the old folders.", 'start': 1531.571, 'duration': 2.722}, {'end': 1539.157, 'text': "this one is in Swedish here, so you probably don't understand it if you're not from Sweden.", 'start': 1534.293, 'duration': 4.864}, {'end': 1541.138, 'text': 'but what it says here is to replace it.', 'start': 1539.157, 'duration': 1.981}, {'end': 1547.403, 'text': "so I'm going to click that button and then it's going to ask me if I want to merge the source folder or if I want to replace it.", 'start': 1541.138, 'duration': 6.265}, {'end': 1550.385, 'text': 'so if it asks you to merge it or replace it.', 'start': 1547.403, 'duration': 2.982}], 'summary': 'Creating a react application using create react app, installing dependencies like react router, style components, and prop types for runtime type checking.', 'duration': 519.185, 'max_score': 1031.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE1031200.jpg'}, {'end': 1441.51, 'src': 'embed', 'start': 1416.371, 'weight': 8, 'content': [{'end': 1421.693, 'text': "I'm going to add it in later in the course so we don't get distracted of too much stuff going on.", 'start': 1416.371, 'duration': 5.322}, {'end': 1429.251, 'text': 'Alright, so go back to the terminal, type in npm i prop-types and press enter.', 'start': 1422.691, 'duration': 6.56}, {'end': 1430.865, 'text': "So that's it.", 'start': 1430.285, 'duration': 0.58}, {'end': 1432.186, 'text': "That's our dependencies.", 'start': 1430.985, 'duration': 1.201}, {'end': 1435.167, 'text': "And of course, I didn't mention it at the start of this video.", 'start': 1432.526, 'duration': 2.641}, {'end': 1441.51, 'text': 'You should, of course, be in the folder that we created, the application that we bootstrapped with Create React App.', 'start': 1435.467, 'duration': 6.043}], 'summary': 'In the course, npm i prop-types added as a dependency.', 'duration': 25.139, 'max_score': 1416.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE1416371.jpg'}, {'end': 1819.22, 'src': 'embed', 'start': 1792.456, 'weight': 7, 'content': [{'end': 1798.503, 'text': "But it's really important to mark it with React underscore before the actual name of the environmental variable.", 'start': 1792.456, 'duration': 6.047}, {'end': 1804.629, 'text': "and all this stuff here is something that i created for you, so you don't have to care about this.", 'start': 1799.204, 'duration': 5.425}, {'end': 1813.957, 'text': "so i create the different resources from the endpoint on the movie database here and we're going to use these resources in the course later and then i'm going to talk about more.", 'start': 1804.629, 'duration': 9.328}, {'end': 1819.22, 'text': 'So I have different endpoints for the search, for example, and to get the popular movies.', 'start': 1814.895, 'duration': 4.325}], 'summary': 'Created react underscore for environmental variables and endpoints for search and popular movies.', 'duration': 26.764, 'max_score': 1792.456, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE1792456.jpg'}], 'start': 268.394, 'title': 'React course setup and tooling', 'summary': 'Provides an overview of the react course setup, including the provided zip file with necessary folders and files, as well as instructions for creating the project from scratch using create react app and the required tooling such as node.js, npm, and visual studio code.', 'chapters': [{'end': 302.699, 'start': 268.394, 'title': 'Accessing and saving api key version 3.0', 'summary': 'Explains the process of accessing and saving api key version 3.0, emphasizing the importance of saving the key for future use in the application.', 'duration': 34.305, 'highlights': ['The API key version 3.0 is being used for the application, and it needs to be saved for future use.', 'The process involves accessing the API settings and navigating to the API section in the left menu.']}, {'end': 610.967, 'start': 302.699, 'title': 'Introduction to react and creating components', 'summary': 'Introduces react as a javascript library for building user interfaces, emphasizing on its declarative nature, component-based structure, and reusability, suggesting beginners to visit reactjs.org and highlighting the usage of functional components over class components.', 'duration': 308.268, 'highlights': ['React is a JavaScript library for building user interfaces and is used for more than just building user interfaces, as it can handle all API calls and logic in an application, exemplified by building a Pac-Man game entirely in React.', "React uses the declarative paradigm, enabling the explanation of the user interface's appearance without specifying the exact steps to achieve it, in contrast to the imperative approach of jQuery.", 'Functional components are emphasized over class components, with the explanation that some existing applications may still use class components due to the historical absence of state in functional components.', 'The usage of JSX, a syntax extension for JavaScript that resembles HTML, for creating components and the reusability of these components in the application are highlighted as key aspects of React.']}, {'end': 1041.069, 'start': 611.447, 'title': 'React course setup and tooling', 'summary': 'Provides an overview of the react course setup, including the provided zip file with necessary folders and files, as well as instructions for creating the project from scratch using create react app and the required tooling such as node.js, npm, and visual studio code.', 'duration': 429.622, 'highlights': ['The chapter provides an overview of the React course setup, including the provided zip file with necessary folders and files, as well as instructions for creating the project from scratch using Create React App. The course setup includes a provided zip file with necessary folders and files, offering instructions for creating the project from scratch using Create React App.', 'Instructions are given for setting up the necessary tooling, including Node.js, npm, and Visual Studio Code, as well as the usage of Create React App for quickly and easily bootstrapping the React application. The chapter offers instructions for setting up necessary tooling such as Node.js, npm, and Visual Studio Code, along with using Create React App to quickly bootstrap the React application.', 'Provided information on the usage of MPX instead of globally installing Create React app for grabbing the latest version without global installation. Information is provided on using MPX instead of globally installing Create React app to ensure the usage of the latest version without global installation.']}, {'end': 1339.262, 'start': 1041.069, 'title': 'Setting up react app with dependencies', 'summary': "Demonstrates setting up a react application using 'create react app', installing react router and style components, emphasizing the benefits and features of each library and providing installation instructions.", 'duration': 298.193, 'highlights': ['Create React App is used to bootstrap the application and is commonly used in production applications, leveraging Babel and Webpack for setting up the React environment. Create React App is widely used in production applications and utilizes Babel and Webpack for setting up the React environment.', 'The chapter emphasizes the importance of using React Router for handling routes in a single-page application, with plans to use React Router version six, which is in beta. Emphasizes the significance of React Router for handling routes in a single-page application and plans to use React Router version six, currently in beta.', 'The benefits of using style components with React are highlighted, including the ability to create CSS in isolated and scoped components, along with features such as nesting and dynamic styling with props. Highlights the benefits of using style components with React, such as creating CSS in isolated and scoped components, and features like nesting and dynamic styling with props.']}, {'end': 1858.433, 'start': 1340.726, 'title': 'React dependencies and project setup', 'summary': 'Discusses installing dependencies such as styled components, prop types, and project setup including copying files and adding environmental variables, emphasizing the importance of using prop types for type checking and explaining the structure of the project files and the purpose of each, culminating with setting up the api key for the movie database.', 'duration': 517.707, 'highlights': ['Styled components and prop types are essential dependencies for React, with prop types enabling runtime type checking for React props. The chapter emphasizes the significance of styled components and prop types as essential dependencies for React, highlighting that prop types allow runtime type checking for React props.', 'The importance of using prop types for type checking is stressed, with a plan to introduce TypeScript later in the course. The importance of using prop types for type checking is emphasized, with a mention of introducing TypeScript in a later course module.', 'Detailed overview of the project structure and file organization is provided, emphasizing the purpose of each file and folder. A detailed overview of the project structure and file organization is provided, emphasizing the purpose of each file and folder within the project.', 'Guidance on setting up the API key for the movie database is provided, emphasizing the naming convention and usage within the project. Guidance on setting up the API key for the movie database is provided, emphasizing the naming convention and its usage within the project.']}], 'duration': 1590.039, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE268394.jpg', 'highlights': ['React is a JavaScript library for building user interfaces and handling API calls.', 'Functional components are emphasized over class components in React.', 'The usage of JSX for creating components and their reusability are key aspects of React.', 'Create React App is widely used in production applications and leverages Babel and Webpack.', 'React Router is significant for handling routes in a single-page application.', 'Styled components and prop types are essential dependencies for React.', 'Prop types enable runtime type checking for React props.', 'Detailed overview of the project structure and file organization is provided.', 'Guidance on setting up the API key for the movie database is emphasized.']}, {'end': 3276.799, 'segs': [{'end': 2168.565, 'src': 'embed', 'start': 2137.035, 'weight': 8, 'content': [{'end': 2141.239, 'text': "So let's move back to our terminal and make sure that our dev environment is running.", 'start': 2137.035, 'duration': 4.204}, {'end': 2142.64, 'text': 'So npm start.', 'start': 2141.619, 'duration': 1.021}, {'end': 2146.443, 'text': 'Always use npm start when you start up your dev server.', 'start': 2143.381, 'duration': 3.062}, {'end': 2149.586, 'text': 'And you can see that we have it running here now.', 'start': 2147.944, 'duration': 1.642}, {'end': 2155.835, 'text': "Then I go back to Visual Studio Code and I'm going to be in the app.js file for this one.", 'start': 2150.711, 'duration': 5.124}, {'end': 2160.378, 'text': "It's inside the src folder and this is kind of the heart of our application.", 'start': 2155.975, 'duration': 4.403}, {'end': 2168.565, 'text': 'We have the index.js that is the start file for the application and you can see that I import the app component here.', 'start': 2160.919, 'duration': 7.646}], 'summary': "Ensure dev environment is running with 'npm start', then work on app.js in src folder.", 'duration': 31.53, 'max_score': 2137.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE2137035.jpg'}, {'end': 2348.809, 'src': 'embed', 'start': 2319.558, 'weight': 1, 'content': [{'end': 2323.12, 'text': "And then we're not going to have any props because we haven't talked about props yet.", 'start': 2319.558, 'duration': 3.562}, {'end': 2324.541, 'text': 'So I set that one to null.', 'start': 2323.36, 'duration': 1.181}, {'end': 2326.563, 'text': "And then I'm going to render out the string.", 'start': 2324.841, 'duration': 1.722}, {'end': 2329.344, 'text': 'This is a little star.', 'start': 2327.383, 'duration': 1.961}, {'end': 2331.706, 'text': 'Like that.', 'start': 2331.246, 'duration': 0.46}, {'end': 2335.609, 'text': "And I'm going to remove the sidebar so we can see the component here.", 'start': 2331.986, 'duration': 3.623}, {'end': 2338.962, 'text': 'So this is instead of using JSX.', 'start': 2336.92, 'duration': 2.042}, {'end': 2341.203, 'text': 'And if we want to render this one out.', 'start': 2339.502, 'duration': 1.701}, {'end': 2343.385, 'text': 'Instead of returning this one here.', 'start': 2341.844, 'duration': 1.541}, {'end': 2345.046, 'text': "I'm going to return the star.", 'start': 2343.745, 'duration': 1.301}, {'end': 2348.809, 'text': 'And as this is a function now.', 'start': 2347.448, 'duration': 1.361}], 'summary': 'Discussion about rendering a star instead of using jsx, with no props mentioned.', 'duration': 29.251, 'max_score': 2319.558, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE2319558.jpg'}, {'end': 2902.549, 'src': 'embed', 'start': 2872.435, 'weight': 6, 'content': [{'end': 2875.938, 'text': 'And what I do here is that I provide it with an inline function.', 'start': 2872.435, 'duration': 3.503}, {'end': 2881.021, 'text': 'And when you provide the stage setter with a function, it will get called with a previous state.', 'start': 2876.058, 'duration': 4.963}, {'end': 2883.623, 'text': "So in this case, I'm going to flip that boolean value.", 'start': 2881.262, 'duration': 2.361}, {'end': 2889.007, 'text': "So when I click the button the first time, this value is going to be true instead because it's false initially.", 'start': 2883.904, 'duration': 5.103}, {'end': 2892.91, 'text': "And this one for the button two is going to be false because it's true.", 'start': 2889.628, 'duration': 3.282}, {'end': 2893.571, 'text': 'All right.', 'start': 2893.231, 'duration': 0.34}, {'end': 2895.492, 'text': 'So these are the functions for the light switches.', 'start': 2893.591, 'duration': 1.901}, {'end': 2902.549, 'text': 'So if we look at the JSX here, what we return to the DOM, This one is a room component.', 'start': 2895.892, 'duration': 6.657}], 'summary': 'Function flips boolean value when button clicked, updating state.', 'duration': 30.114, 'max_score': 2872.435, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE2872435.jpg'}, {'end': 3101.832, 'src': 'embed', 'start': 3072.371, 'weight': 0, 'content': [{'end': 3077.073, 'text': 'So in this case, I create dollar sign and curly brackets, and I can use a JavaScript expression.', 'start': 3072.371, 'duration': 4.702}, {'end': 3080.155, 'text': 'And I have this inline function here that gets the props.', 'start': 3077.593, 'duration': 2.562}, {'end': 3085.977, 'text': 'So if we look at the wrapper component down here, you can see that I also send in a prop lamp on and the position.', 'start': 3080.535, 'duration': 5.442}, {'end': 3090.74, 'text': "So I'm just sending along these props that I initially sent into the lamp component.", 'start': 3086.177, 'duration': 4.563}, {'end': 3095.811, 'text': 'So I get them in the lamp component and then I also send them along to the wrapper component.', 'start': 3091.63, 'duration': 4.181}, {'end': 3096.991, 'text': "That's a style component.", 'start': 3095.891, 'duration': 1.1}, {'end': 3101.832, 'text': 'And by doing this, I can, for example, check here if the props.position equals to the left.', 'start': 3097.131, 'duration': 4.701}], 'summary': 'Using javascript expressions, props are passed from lamp component to wrapper component, enabling conditional checks.', 'duration': 29.461, 'max_score': 3072.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE3072371.jpg'}, {'end': 3142.045, 'src': 'embed', 'start': 3110.754, 'weight': 9, 'content': [{'end': 3114.515, 'text': 'So this way I can modify my CSS and make it very, very dynamic.', 'start': 3110.754, 'duration': 3.761}, {'end': 3118.376, 'text': "So that's really sweet that you also can use props in the style components.", 'start': 3114.595, 'duration': 3.781}, {'end': 3121.795, 'text': "All right, that's how style component and props works.", 'start': 3119.454, 'duration': 2.341}, {'end': 3125.257, 'text': "So if we look at the lamp component here, I'm sending in these props here.", 'start': 3122.295, 'duration': 2.962}, {'end': 3128.458, 'text': "And what I'm doing here is I'm using ES6 destructuring.", 'start': 3125.617, 'duration': 2.841}, {'end': 3134.761, 'text': "So from the object that we get that you usually call props, I'm destructuring out these values that I send in.", 'start': 3128.698, 'duration': 6.063}, {'end': 3142.045, 'text': "If I didn't do the destructuring here, and I just do it like this, you can see that it warns me here now.", 'start': 3135.402, 'duration': 6.643}], 'summary': 'Using props and style components to create dynamic css in the lamp component.', 'duration': 31.291, 'max_score': 3110.754, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE3110754.jpg'}], 'start': 1859.013, 'title': 'React development', 'summary': "Covers creating api functions and environmental variables, understanding react and jsx, managing state in react, and react components and props. it emphasizes the importance of not exposing the api key, jsx's wide usage in react, managing state with hooks, and creating dynamic and reusable components with props.", 'chapters': [{'end': 2006.669, 'start': 1859.013, 'title': 'Creating api functions and environmental variables', 'summary': 'Focuses on creating api functions for fetching movie data and environmental variables for the api key, emphasizing the importance of not exposing the key to the client side.', 'duration': 147.656, 'highlights': ['The chapter introduces API.js containing functions for fetching movie data and an environmental variable file, helpers.js, with functions to calculate time and money conversions.', 'The functions in API.js include fetching all movies, fetching a single movie, and fetching credits, along with additional functions for bonus material.', 'Emphasizes the need to set the API key in an environmental variable for security, warning that it will be visible in the client and providing a caution against considering it safe.']}, {'end': 2579.838, 'start': 2006.669, 'title': 'Understanding react and jsx', 'summary': 'Discusses the importance of jsx in react, highlighting that jsx is widely used in react applications, with at least 99% of applications utilizing it, and explains the differences between jsx and regular html, emphasizing the benefits of jsx, such as its ability to embed javascript expressions and use camel case property naming convention.', 'duration': 573.169, 'highlights': ['JSX is widely used in React applications, with at least 99% of applications utilizing it. The speaker emphasizes that JSX is a crucial aspect of React, with at least 99% of applications using JSX in combination with React.', 'Explains the differences between JSX and regular HTML, emphasizing the benefits of JSX, such as its ability to embed JavaScript expressions and use camel case property naming convention. The speaker discusses the differences between JSX and regular HTML, highlighting benefits of JSX, such as the ability to embed JavaScript expressions and use camel case property naming convention.', 'React DOM uses camel case property naming convention instead of HTML attribute names when working with JSX. The speaker mentions that React DOM uses a camel case property naming convention instead of HTML attribute names when working with JSX, and it took some time for him to get used to it.']}, {'end': 2889.007, 'start': 2579.838, 'title': 'Managing state in react', 'summary': 'Discusses managing state in react, using state hooks to create multiple states for components, emphasizing the importance of lifting up the state to a parent component, and utilizing state setters to ensure proper re-rendering of components.', 'duration': 309.169, 'highlights': ['The chapter discusses managing state in React, using state hooks to create multiple states for components React allows the creation of multiple states for components using state hooks, enabling the management of individual component states efficiently.', 'Emphasizing the importance of lifting up the state to a parent component The importance of lifting up the state to a parent component is highlighted, enabling the use of state in multiple child components and facilitating code reuse.', 'Utilizing state setters to ensure proper re-rendering of components The use of state setters is emphasized to ensure proper re-rendering of components, avoiding direct state mutation and updating the DOM effectively in React.']}, {'end': 3276.799, 'start': 2889.628, 'title': 'React components and props', 'summary': 'Introduces the concept of react components and props, explaining how to use state and props to create dynamic and reusable components, with an emphasis on the usage of style components and props to modify css.', 'duration': 387.171, 'highlights': ['The chapter introduces the concept of React components and props The speaker discusses the use of state and props to create dynamic and reusable components, emphasizing the importance of not changing the props in the component that receives them and showcasing the usage of destructuring props for easier access.', 'The usage of style components and props to modify CSS is explained The speaker demonstrates how style components can have props, enabling the modification of CSS dynamically, with a specific example of using props to position elements in the room.', 'The speaker showcases the usage of props to create dynamic and reusable components The speaker illustrates how props can be used to make components dynamic and versatile, allowing the same component to be used in different situations by sending in different callback functions.']}], 'duration': 1417.786, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE1859013.jpg', 'highlights': ['The chapter introduces API.js containing functions for fetching movie data and an environmental variable file, helpers.js, with functions to calculate time and money conversions.', 'Emphasizes the need to set the API key in an environmental variable for security, warning that it will be visible in the client and providing a caution against considering it safe.', 'React allows the creation of multiple states for components using state hooks, enabling the management of individual component states efficiently.', 'The importance of lifting up the state to a parent component is highlighted, enabling the use of state in multiple child components and facilitating code reuse.', 'The use of state setters is emphasized to ensure proper re-rendering of components, avoiding direct state mutation and updating the DOM effectively in React.', 'The speaker discusses the use of state and props to create dynamic and reusable components, emphasizing the importance of not changing the props in the component that receives them and showcasing the usage of destructuring props for easier access.', 'The speaker demonstrates how style components can have props, enabling the modification of CSS dynamically, with a specific example of using props to position elements in the room.', 'The speaker illustrates how props can be used to make components dynamic and versatile, allowing the same component to be used in different situations by sending in different callback functions.', 'JSX is a crucial aspect of React, with at least 99% of applications using JSX in combination with React.', 'React DOM uses a camel case property naming convention instead of HTML attribute names when working with JSX, and it took some time for him to get used to it.', 'The speaker discusses the differences between JSX and regular HTML, highlighting benefits of JSX, such as the ability to embed JavaScript expressions and use camel case property naming convention.']}, {'end': 5545.231, 'segs': [{'end': 3325.782, 'src': 'embed', 'start': 3297.984, 'weight': 4, 'content': [{'end': 3300.788, 'text': 'So that is really useful to use props for that.', 'start': 3297.984, 'duration': 2.804}, {'end': 3303.713, 'text': "All right, so that's short on state and props.", 'start': 3301.189, 'duration': 2.524}, {'end': 3308.16, 'text': 'I hope this one gives you some insight before we start creating our own.', 'start': 3303.873, 'duration': 4.287}, {'end': 3309.382, 'text': "So let's move on.", 'start': 3308.521, 'duration': 0.861}, {'end': 3313.028, 'text': "In the next video, I'm going to talk more about style components and what they are.", 'start': 3309.482, 'duration': 3.546}, {'end': 3319.858, 'text': "There's one last thing I want to talk about before we start creating some code for real.", 'start': 3315.575, 'duration': 4.283}, {'end': 3321.739, 'text': 'And that is style components.', 'start': 3320.318, 'duration': 1.421}, {'end': 3325.782, 'text': "Because in the next video, we're going to create a global styles for our application.", 'start': 3321.979, 'duration': 3.803}], 'summary': 'Introduction to using props, state, and style components in application development.', 'duration': 27.798, 'max_score': 3297.984, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE3297984.jpg'}, {'end': 3369.234, 'src': 'embed', 'start': 3341.433, 'weight': 15, 'content': [{'end': 3344.074, 'text': "It doesn't matter because it's scoped to that component.", 'start': 3341.433, 'duration': 2.641}, {'end': 3348.637, 'text': 'And number two is that you can use syntax kind of like Sass.', 'start': 3344.575, 'duration': 4.062}, {'end': 3352.94, 'text': "For example, you can nest stuff and you don't need to have polyfills and stuff like that.", 'start': 3348.697, 'duration': 4.243}, {'end': 3355.362, 'text': 'It will create all that automatically for you.', 'start': 3353.28, 'duration': 2.082}, {'end': 3358.765, 'text': 'And number three is that you can have props inside of it.', 'start': 3356.022, 'duration': 2.743}, {'end': 3364.51, 'text': "And props is something that we're going to talk a lot about in this course because it's an essential part in React.", 'start': 3358.925, 'duration': 5.585}, {'end': 3369.234, 'text': 'And that means that you can modify the CSS by sending in different props to your styles.', 'start': 3364.95, 'duration': 4.284}], 'summary': 'Styled components in react support nesting, auto-create polyfills, and accept props for css modification.', 'duration': 27.801, 'max_score': 3341.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE3341433.jpg'}, {'end': 3477.885, 'src': 'embed', 'start': 3380.504, 'weight': 2, 'content': [{'end': 3385.968, 'text': 'so that is some benefits that style components will provide to you when using it in your application.', 'start': 3380.504, 'duration': 5.464}, {'end': 3391.733, 'text': "so we already installed this library and when you use it, you have to import something that's called style.", 'start': 3385.968, 'duration': 5.765}, {'end': 3393.494, 'text': 'i think they have an example down here.', 'start': 3391.733, 'duration': 1.761}, {'end': 3399.917, 'text': 'yeah, here import style from styled components, and styled is an object that holds different properties.', 'start': 3393.494, 'duration': 6.423}, {'end': 3402.618, 'text': 'for example, in this case, they want to style a button.', 'start': 3399.917, 'duration': 2.701}, {'end': 3406.64, 'text': 'so these properties corresponds to what they are called in the html.', 'start': 3402.618, 'duration': 4.022}, {'end': 3411.262, 'text': 'so if you want to style a button, if you want to create a style component, that is a button,', 'start': 3406.64, 'duration': 4.622}, {'end': 3415.043, 'text': 'you use styled.button and then you have a template literal.', 'start': 3411.262, 'duration': 3.781}, {'end': 3420.646, 'text': "so this is something that's called a tagged template literal, and that is a function that you call with a template literal.", 'start': 3415.043, 'duration': 5.603}, {'end': 3423.648, 'text': 'So this is ES6 syntax in JavaScript.', 'start': 3421.246, 'duration': 2.402}, {'end': 3430.555, 'text': "And it's super great because if we move up here again, you can see we have this template literal here.", 'start': 3424.149, 'duration': 6.406}, {'end': 3434.039, 'text': 'You have the starting backtick and you have the end backtick here.', 'start': 3431.096, 'duration': 2.943}, {'end': 3436.962, 'text': 'And inside of here, we can write our CSS.', 'start': 3435.14, 'duration': 1.822}, {'end': 3442.486, 'text': "In this case, they're using style.a because they want to style an a tag.", 'start': 3438.382, 'duration': 4.104}, {'end': 3446.469, 'text': 'And then they do some stuff here, plain regular CSS.', 'start': 3442.506, 'duration': 3.963}, {'end': 3450.513, 'text': "But here is something that's happening that's not plain CSS.", 'start': 3447.17, 'duration': 3.343}, {'end': 3453.716, 'text': "And this is because we're using a template literal here.", 'start': 3451.153, 'duration': 2.563}, {'end': 3457.659, 'text': 'We can use JavaScript expressions inside of this template literal.', 'start': 3454.116, 'duration': 3.543}, {'end': 3465.366, 'text': 'And when you want to use an expression inside of a template literal, you do that with a dollar sign and you wrap it inside of curly brackets.', 'start': 3457.999, 'duration': 7.367}, {'end': 3471.744, 'text': 'And then you can have any JavaScript expression that you want inside of here, and it will interpolate it into the string.', 'start': 3465.726, 'duration': 6.018}, {'end': 3477.885, 'text': 'And in this case, you can see that they have their props and they have an inline arrow function.', 'start': 3473.522, 'duration': 4.363}], 'summary': 'Style components enable easy styling and use es6 syntax for dynamic css, allowing for greater flexibility and efficiency.', 'duration': 97.381, 'max_score': 3380.504, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE3380504.jpg'}, {'end': 3658.153, 'src': 'embed', 'start': 3631.959, 'weight': 5, 'content': [{'end': 3640.965, 'text': 'We are going to use our global styles inside of our app component later, meaning that we want to import it here and use it down here in the JSX.', 'start': 3631.959, 'duration': 9.006}, {'end': 3647.069, 'text': 'So that also means that we have to export this style component from this file to export.', 'start': 3641.465, 'duration': 5.604}, {'end': 3648.69, 'text': 'And this is a const.', 'start': 3647.689, 'duration': 1.001}, {'end': 3651.245, 'text': 'also es6 syntax.', 'start': 3649.904, 'duration': 1.341}, {'end': 3653.127, 'text': 'it stands for a constant.', 'start': 3651.245, 'duration': 1.882}, {'end': 3654.669, 'text': "so that's what we have in javascript.", 'start': 3653.127, 'duration': 1.542}, {'end': 3658.153, 'text': 'now we have lets, we have const and we have vars.', 'start': 3654.669, 'duration': 3.484}], 'summary': 'Using global styles in app component, exporting const in es6 syntax.', 'duration': 26.194, 'max_score': 3631.959, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE3631959.jpg'}, {'end': 3755.53, 'src': 'embed', 'start': 3724.755, 'weight': 6, 'content': [{'end': 3727.116, 'text': 'And the rest here is going to be regular plain CSS.', 'start': 3724.755, 'duration': 2.361}, {'end': 3729.798, 'text': 'So first I want to set up some CSS variables.', 'start': 3727.476, 'duration': 2.322}, {'end': 3732.796, 'text': 'The colon root, we do that on the root.', 'start': 3730.575, 'duration': 2.221}, {'end': 3738.079, 'text': 'And when you create a CSS variable, you do that with double dash.', 'start': 3734.838, 'duration': 3.241}, {'end': 3740.541, 'text': 'And then you have your variable name.', 'start': 3739.12, 'duration': 1.421}, {'end': 3741.782, 'text': 'So max width.', 'start': 3740.841, 'duration': 0.941}, {'end': 3745.184, 'text': 'This is camel-cased, as you can see here.', 'start': 3743.122, 'duration': 2.062}, {'end': 3748.646, 'text': "I'm going to set the max width to 1280 pixels.", 'start': 3746.004, 'duration': 2.642}, {'end': 3751.888, 'text': 'And then I have another variable, double dash, white.', 'start': 3749.346, 'duration': 2.542}, {'end': 3755.53, 'text': 'And then I set my white color.', 'start': 3753.669, 'duration': 1.861}], 'summary': 'Setting up css variables: max width to 1280px and white color.', 'duration': 30.775, 'max_score': 3724.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE3724755.jpg'}, {'end': 3850.597, 'src': 'embed', 'start': 3819.092, 'weight': 0, 'content': [{'end': 3823.775, 'text': "then i'm going to set the font for the whole application and also do some resetting here.", 'start': 3819.092, 'duration': 4.683}, {'end': 3829.018, 'text': 'so i have an asterisk like that.', 'start': 3823.775, 'duration': 5.243}, {'end': 3844.714, 'text': "i set the box sizing to border dash box and then i set the font family to able, and that's the google font that is imported from the index.html file.", 'start': 3829.018, 'duration': 15.696}, {'end': 3848.336, 'text': 'and then i have the backup font of sans serif.', 'start': 3844.714, 'duration': 3.622}, {'end': 3850.597, 'text': "all right, that's the resetting.", 'start': 3848.336, 'duration': 2.261}], 'summary': "Setting font for application, including google font 'able' and backup font sans-serif.", 'duration': 31.505, 'max_score': 3819.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE3819092.jpg'}, {'end': 5169.657, 'src': 'heatmap', 'start': 4647.488, 'weight': 0.752, 'content': [{'end': 4649.229, 'text': "And in our case we're going to have the wrapper.", 'start': 4647.488, 'duration': 1.741}, {'end': 4651.93, 'text': "That's the style component that we created.", 'start': 4649.969, 'duration': 1.961}, {'end': 4657.401, 'text': "And inside of the wrapper, we're going to have the content.", 'start': 4653.359, 'duration': 4.042}, {'end': 4660.942, 'text': "That's also a style component that we created.", 'start': 4658.661, 'duration': 2.281}, {'end': 4664.303, 'text': "And then I'm going to have the logo IMG.", 'start': 4661.922, 'duration': 2.381}, {'end': 4669.005, 'text': 'And we can set the source on this one because this is an image tag that we styled.', 'start': 4665.284, 'duration': 3.721}, {'end': 4670.766, 'text': 'So we can use the same attributes.', 'start': 4669.245, 'duration': 1.521}, {'end': 4673.327, 'text': 'The SRC is going to equal.', 'start': 4671.706, 'duration': 1.621}, {'end': 4676.168, 'text': 'And we have imported our RMDB logo.', 'start': 4673.847, 'duration': 2.321}, {'end': 4688.938, 'text': 'rmdb logo like this we set an alt and we can name it rmdb dash logo and then we can self close it like this.', 'start': 4677.612, 'duration': 11.326}, {'end': 4690.759, 'text': "so that's a logo for this application.", 'start': 4688.938, 'duration': 1.821}, {'end': 4697.843, 'text': 'then we have the movie database logo, tmdb logo, img.', 'start': 4690.759, 'duration': 7.084}, {'end': 4699.404, 'text': 'we have the src.', 'start': 4697.843, 'duration': 1.561}, {'end': 4710.862, 'text': "it's going to be the tmdb logo, img, and we set the alt The tmdb-logo.", 'start': 4699.404, 'duration': 11.458}, {'end': 4713.023, 'text': 'And we self-close it.', 'start': 4711.862, 'duration': 1.161}, {'end': 4714.965, 'text': 'Do some auto-formatting.', 'start': 4713.704, 'duration': 1.261}, {'end': 4716.146, 'text': 'And now you can see..', 'start': 4715.265, 'duration': 0.881}, {'end': 4721.189, 'text': 'Okay, I just named it tmdb-logo.', 'start': 4716.146, 'duration': 5.043}, {'end': 4723.111, 'text': "Of course, that's the style component.", 'start': 4721.409, 'duration': 1.702}, {'end': 4723.931, 'text': "We shouldn't use that.", 'start': 4723.131, 'duration': 0.8}, {'end': 4726.093, 'text': 'So tmdb-logo, of course.', 'start': 4724.312, 'duration': 1.781}, {'end': 4729.876, 'text': "And now you can see that it complains here because we're not exporting this one.", 'start': 4726.633, 'duration': 3.243}, {'end': 4731.157, 'text': "It says it's never used.", 'start': 4730.116, 'duration': 1.041}, {'end': 4732.798, 'text': "And that's because we don't export it.", 'start': 4731.197, 'duration': 1.601}, {'end': 4736.148, 'text': 'You should always export it.', 'start': 4734.727, 'duration': 1.421}, {'end': 4738.63, 'text': 'And I like to do the export here at the bottom.', 'start': 4736.228, 'duration': 2.402}, {'end': 4742.393, 'text': 'So export default header.', 'start': 4739.17, 'duration': 3.223}, {'end': 4746.155, 'text': 'And this is also ES6 syntax for exporting something.', 'start': 4743.033, 'duration': 3.122}, {'end': 4748.177, 'text': "So in this case, we don't have a named export.", 'start': 4746.296, 'duration': 1.881}, {'end': 4750.138, 'text': 'We export it as a default.', 'start': 4748.597, 'duration': 1.541}, {'end': 4755.022, 'text': 'Some people like to have their export here instead.', 'start': 4751.399, 'duration': 3.623}, {'end': 4756.643, 'text': "I don't like that.", 'start': 4755.042, 'duration': 1.601}, {'end': 4758.344, 'text': "So that's why I have it at the bottom here.", 'start': 4756.663, 'duration': 1.681}, {'end': 4760.346, 'text': 'But you can do however you want.', 'start': 4758.865, 'duration': 1.481}, {'end': 4764.964, 'text': "And this is our header component for now, but we're not actually using it.", 'start': 4761.499, 'duration': 3.465}, {'end': 4771.733, 'text': "If we go back to our application here, you can see that nothing has happened because we have created a component, but we're not actually using it yet.", 'start': 4765.104, 'duration': 6.629}, {'end': 4773.996, 'text': 'So we have to do something about that.', 'start': 4772.594, 'duration': 1.402}, {'end': 4778.041, 'text': "So let's go back to our app.js file.", 'start': 4775.398, 'duration': 2.643}, {'end': 4788.729, 'text': 'And inside of this div here the wrapping div. this is also something that you have to know, because in React you can always just return one component.', 'start': 4779.082, 'duration': 9.647}, {'end': 4792.132, 'text': 'You have to wrap the components, if you have multiple of them,', 'start': 4789.049, 'duration': 3.083}, {'end': 4798.036, 'text': "in another component or in something that's called a fragment that I'm going to talk about later in this course.", 'start': 4792.132, 'duration': 5.904}, {'end': 4803.02, 'text': "So inside of here, we're going to have our header component, but first we have to import it, of course.", 'start': 4798.737, 'duration': 4.283}, {'end': 4806.723, 'text': 'So what I like to do, I like to mark it.', 'start': 4804.981, 'duration': 1.742}, {'end': 4809.539, 'text': 'with components like this.', 'start': 4807.537, 'duration': 2.002}, {'end': 4819.608, 'text': 'And then I import header from dot forward slash components forward slash header like this.', 'start': 4809.919, 'duration': 9.689}, {'end': 4824.712, 'text': 'When you want to use a component in React you have to import it first like this.', 'start': 4820.769, 'duration': 3.943}, {'end': 4826.714, 'text': 'This is a module that we import.', 'start': 4825.012, 'duration': 1.702}, {'end': 4830.857, 'text': 'Our component is a module that we import with ES6 syntax like this.', 'start': 4826.974, 'duration': 3.883}, {'end': 4833.696, 'text': 'right and then we can use the component here.', 'start': 4831.852, 'duration': 1.844}, {'end': 4836.382, 'text': "for now we don't have any props for this one.", 'start': 4833.696, 'duration': 2.686}, {'end': 4842.755, 'text': 'so just as we did with the global style, we can insert the component here down in the jsx and we have our header.', 'start': 4836.382, 'duration': 6.373}, {'end': 4845.446, 'text': 'So do some auto formatting and save it.', 'start': 4843.766, 'duration': 1.68}, {'end': 4849.547, 'text': "And if we go back to our browser, you can see that we can't really see the images now.", 'start': 4845.526, 'duration': 4.021}, {'end': 4852.368, 'text': "And that's because we haven't set the styling for the images now.", 'start': 4849.607, 'duration': 2.761}, {'end': 4854.668, 'text': "So that's what we're going to do in the next video.", 'start': 4852.908, 'duration': 1.76}, {'end': 4856.909, 'text': 'Or if you choose to not create the styles,', 'start': 4854.968, 'duration': 1.941}, {'end': 4862.97, 'text': "you probably will see the header up here now if you're using the styles that you copied over to your project folder.", 'start': 4856.909, 'duration': 6.061}, {'end': 4868.591, 'text': "But in the next video, we're going to create the styles and that will make the header show up with the logos.", 'start': 4863.79, 'duration': 4.801}, {'end': 4875.055, 'text': "We have created our header component, but we can't really see anything.", 'start': 4871.673, 'duration': 3.382}, {'end': 4877.397, 'text': 'So we have to create the styles for it also.', 'start': 4875.516, 'duration': 1.881}, {'end': 4880.419, 'text': 'You can see, yeah, it looks like crap here.', 'start': 4877.437, 'duration': 2.982}, {'end': 4885.783, 'text': 'So we have to give this some styling also so we see the nice little logos and our header.', 'start': 4880.86, 'duration': 4.923}, {'end': 4893.249, 'text': "So inside our file that's called header.styles.js, we're going to start by creating the wrapper style component.", 'start': 4886.183, 'duration': 7.066}, {'end': 4896.651, 'text': "We're going to set the background on that one.", 'start': 4894.97, 'duration': 1.681}, {'end': 4903.071, 'text': "Background And from our variables, we're going to grab the one that's called dark gray.", 'start': 4897.311, 'duration': 5.76}, {'end': 4904.612, 'text': 'Like this.', 'start': 4904.251, 'duration': 0.361}, {'end': 4912.916, 'text': "And then I'm going to give it some padding, 0 and 20 pixels, and that will give it some padding on the sides.", 'start': 4907.333, 'duration': 5.583}, {'end': 4914.036, 'text': 'Save it.', 'start': 4913.616, 'duration': 0.42}, {'end': 4916.337, 'text': 'Go back to our browser.', 'start': 4914.697, 'duration': 1.64}, {'end': 4921.84, 'text': 'And now you can see that we see our gigantic logos here and our gigantic header.', 'start': 4917.018, 'duration': 4.822}, {'end': 4925.062, 'text': 'So we have to do something about this one also.', 'start': 4922.34, 'duration': 2.722}, {'end': 4927.783, 'text': 'So we have our content div.', 'start': 4925.082, 'duration': 2.701}, {'end': 4937.531, 'text': 'This one is going to be displayed as a flex because I want to place the logos on the left and the right and we can do that with flex.', 'start': 4930.868, 'duration': 6.663}, {'end': 4943.394, 'text': 'So first we align items to center and this will align them vertically.', 'start': 4938.592, 'duration': 4.802}, {'end': 4946.435, 'text': 'And then we justify the content.', 'start': 4944.915, 'duration': 1.52}, {'end': 4952.418, 'text': 'And we set it to space between and this will create space between them and push them to the side.', 'start': 4947.736, 'duration': 4.682}, {'end': 4956, 'text': 'One is going to be pushed to the right and one is going to be pushed to the left.', 'start': 4952.838, 'duration': 3.162}, {'end': 4959.381, 'text': "And I'm also going to set the max width of this one.", 'start': 4957.179, 'duration': 2.202}, {'end': 4962.544, 'text': "And that's why I also have a container that's called content.", 'start': 4959.461, 'duration': 3.083}, {'end': 4965.646, 'text': 'Because the wrapper is going to have this background of dark gray.', 'start': 4962.604, 'duration': 3.042}, {'end': 4969.149, 'text': "But I don't want the content itself to have the full width.", 'start': 4966.087, 'duration': 3.062}, {'end': 4974.994, 'text': 'The max width is going to be from our variable dash dash max width.', 'start': 4969.65, 'duration': 5.344}, {'end': 4975.915, 'text': 'Like this.', 'start': 4975.575, 'duration': 0.34}, {'end': 4983.528, 'text': "And I'm going to set some padding at the top and bottom of 20 pixels and 0 on the sides.", 'start': 4978.024, 'duration': 5.504}, {'end': 4986.811, 'text': 'And I set the margin to 0 auto.', 'start': 4984.249, 'duration': 2.562}, {'end': 4989.773, 'text': 'And this will center the content div itself.', 'start': 4987.671, 'duration': 2.102}, {'end': 4990.894, 'text': 'Save it.', 'start': 4990.494, 'duration': 0.4}, {'end': 4992.715, 'text': "Go back and see what we've got so far.", 'start': 4990.974, 'duration': 1.741}, {'end': 4995.137, 'text': 'You can see that they are pushed to the sides.', 'start': 4992.775, 'duration': 2.362}, {'end': 4996.458, 'text': "And that's great.", 'start': 4995.637, 'duration': 0.821}, {'end': 4999.981, 'text': 'Flexbox is really neat to do stuff like this.', 'start': 4997.279, 'duration': 2.702}, {'end': 5002.403, 'text': "But the size isn't correct on the logo.", 'start': 5000.401, 'duration': 2.002}, {'end': 5003.704, 'text': 'So we have to modify this.', 'start': 5002.423, 'duration': 1.281}, {'end': 5006.486, 'text': 'So we have our logo IMG.', 'start': 5004.844, 'duration': 1.642}, {'end': 5010.633, 'text': "That's the main logo and that's a style image.", 'start': 5008.072, 'duration': 2.561}, {'end': 5013.793, 'text': 'We set the width to 200 pixels on this one.', 'start': 5010.773, 'duration': 3.02}, {'end': 5014.534, 'text': 'Save it.', 'start': 5014.133, 'duration': 0.401}, {'end': 5016.134, 'text': 'Go back to the application.', 'start': 5015.094, 'duration': 1.04}, {'end': 5017.934, 'text': 'You can see that we have the correct size here.', 'start': 5016.154, 'duration': 1.78}, {'end': 5023.636, 'text': 'But we also want to change this size on the logo when we are on smaller devices.', 'start': 5018.955, 'duration': 4.681}, {'end': 5028.437, 'text': 'So we create a media query at media screen and.', 'start': 5024.396, 'duration': 4.041}, {'end': 5031.944, 'text': 'max dash width.', 'start': 5030.183, 'duration': 1.761}, {'end': 5035.366, 'text': "i don't really know if you need to actually use screen today.", 'start': 5031.944, 'duration': 3.422}, {'end': 5039.929, 'text': "i think it's not necessary, but i'm used to that, so i will do that.", 'start': 5035.366, 'duration': 4.563}, {'end': 5042.391, 'text': 'i set the max width to 500 pixel.', 'start': 5039.929, 'duration': 2.462}, {'end': 5048.355, 'text': 'this means that when the screen size is lesser than 500 pixels, this one will kick in.', 'start': 5042.391, 'duration': 5.964}, {'end': 5052.798, 'text': 'so we set the width 150 pixels on that one.', 'start': 5048.355, 'duration': 4.443}, {'end': 5059.106, 'text': 'save it, go back to our application and see what we got, So I can make this smaller.', 'start': 5052.798, 'duration': 6.308}, {'end': 5062.775, 'text': 'And you can see that there the logo gets smaller also.', 'start': 5059.306, 'duration': 3.469}, {'end': 5064.92, 'text': 'So we know that the media query is working.', 'start': 5062.815, 'duration': 2.105}, {'end': 5072.559, 'text': "And this is also something that's super great with style components because you can nest the media queries as I did inside of this component.", 'start': 5065.816, 'duration': 6.743}, {'end': 5079.181, 'text': 'I think this is very readable to do it like this because you know that this specific media query belongs to this component.', 'start': 5073.299, 'duration': 5.882}, {'end': 5080.342, 'text': 'All right.', 'start': 5079.961, 'duration': 0.381}, {'end': 5081.602, 'text': "So that's the main logo.", 'start': 5080.362, 'duration': 1.24}, {'end': 5085.363, 'text': 'Then we just have to style the TMDB logo also.', 'start': 5081.742, 'duration': 3.621}, {'end': 5089.165, 'text': "I'm going to set the width to 100 pixels on this one.", 'start': 5085.383, 'duration': 3.782}, {'end': 5092.406, 'text': 'And then I set a media query on this one also.', 'start': 5089.885, 'duration': 2.521}, {'end': 5094.427, 'text': 'At media screen and.', 'start': 5092.826, 'duration': 1.601}, {'end': 5101.222, 'text': 'max width 500 pixels.', 'start': 5095.68, 'duration': 5.542}, {'end': 5107.165, 'text': 'so it may seem redundant to have two of them here, but actually, as i told you, i think this is very readable.', 'start': 5101.222, 'duration': 5.943}, {'end': 5117.45, 'text': 'if you want to change your media query for just that component, you can do that inside of the nested media query here, and i like that a lot.', 'start': 5107.165, 'duration': 10.285}, {'end': 5124.093, 'text': "so for this one i'm going to set the width to 80 pixels and save it, go back to the application and there you have it.", 'start': 5117.45, 'duration': 6.643}, {'end': 5133.353, 'text': "this is our header And you can see that it's working on both of the logos when we make the viewport smaller.", 'start': 5124.093, 'duration': 9.26}, {'end': 5137.335, 'text': "Sweet, that's the styles for the header.", 'start': 5135.354, 'duration': 1.981}, {'end': 5140.377, 'text': "In the next video, we're going to scaffold out our homepage.", 'start': 5137.755, 'duration': 2.622}, {'end': 5147.242, 'text': "All right, we're going to start building the homepage for our nice little application.", 'start': 5143.519, 'duration': 3.723}, {'end': 5151.164, 'text': "And we're going to have all this stuff here on our homepage.", 'start': 5147.842, 'duration': 3.322}, {'end': 5154.647, 'text': "The homepage is going to be what's called a container component.", 'start': 5151.224, 'duration': 3.423}, {'end': 5160.11, 'text': "And then we're going to create different components, for example for the hero image, for the search bar, for the thumbnails,", 'start': 5154.767, 'duration': 5.343}, {'end': 5162.072, 'text': 'for the grid and for the load more button.', 'start': 5160.11, 'duration': 1.962}, {'end': 5164.373, 'text': "Let's go back to our code editor.", 'start': 5162.512, 'duration': 1.861}, {'end': 5169.657, 'text': 'And inside the components folder, we create a new file that we call home.', 'start': 5166.034, 'duration': 3.623}], 'summary': 'Creating and styling components for header and planning for homepage.', 'duration': 522.169, 'max_score': 4647.488, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE4647488.jpg'}, {'end': 4690.759, 'src': 'embed', 'start': 4661.922, 'weight': 16, 'content': [{'end': 4664.303, 'text': "And then I'm going to have the logo IMG.", 'start': 4661.922, 'duration': 2.381}, {'end': 4669.005, 'text': 'And we can set the source on this one because this is an image tag that we styled.', 'start': 4665.284, 'duration': 3.721}, {'end': 4670.766, 'text': 'So we can use the same attributes.', 'start': 4669.245, 'duration': 1.521}, {'end': 4673.327, 'text': 'The SRC is going to equal.', 'start': 4671.706, 'duration': 1.621}, {'end': 4676.168, 'text': 'And we have imported our RMDB logo.', 'start': 4673.847, 'duration': 2.321}, {'end': 4688.938, 'text': 'rmdb logo like this we set an alt and we can name it rmdb dash logo and then we can self close it like this.', 'start': 4677.612, 'duration': 11.326}, {'end': 4690.759, 'text': "so that's a logo for this application.", 'start': 4688.938, 'duration': 1.821}], 'summary': 'Setting the source and attributes for the rmdb logo image tag.', 'duration': 28.837, 'max_score': 4661.922, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE4661922.jpg'}, {'end': 5164.373, 'src': 'embed', 'start': 5135.354, 'weight': 10, 'content': [{'end': 5137.335, 'text': "Sweet, that's the styles for the header.", 'start': 5135.354, 'duration': 1.981}, {'end': 5140.377, 'text': "In the next video, we're going to scaffold out our homepage.", 'start': 5137.755, 'duration': 2.622}, {'end': 5147.242, 'text': "All right, we're going to start building the homepage for our nice little application.", 'start': 5143.519, 'duration': 3.723}, {'end': 5151.164, 'text': "And we're going to have all this stuff here on our homepage.", 'start': 5147.842, 'duration': 3.322}, {'end': 5154.647, 'text': "The homepage is going to be what's called a container component.", 'start': 5151.224, 'duration': 3.423}, {'end': 5160.11, 'text': "And then we're going to create different components, for example for the hero image, for the search bar, for the thumbnails,", 'start': 5154.767, 'duration': 5.343}, {'end': 5162.072, 'text': 'for the grid and for the load more button.', 'start': 5160.11, 'duration': 1.962}, {'end': 5164.373, 'text': "Let's go back to our code editor.", 'start': 5162.512, 'duration': 1.861}], 'summary': 'In the next video, they will scaffold out the homepage with various components like hero image, search bar, thumbnails, grid, and load more button.', 'duration': 29.019, 'max_score': 5135.354, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE5135354.jpg'}, {'end': 5510.264, 'src': 'embed', 'start': 5482.981, 'weight': 7, 'content': [{'end': 5486.643, 'text': 'We destructure it out and we can also name them individually by doing it like this.', 'start': 5482.981, 'duration': 3.662}, {'end': 5490.109, 'text': 'right. so this is the way to go.', 'start': 5488.408, 'duration': 1.701}, {'end': 5492.031, 'text': 'this is the way you should do it.', 'start': 5490.109, 'duration': 1.922}, {'end': 5495.113, 'text': "so that's the state will that will hold all the movies.", 'start': 5492.031, 'duration': 3.082}, {'end': 5496.854, 'text': "then we're going to have a state for the loading.", 'start': 5495.113, 'duration': 1.741}, {'end': 5501.859, 'text': 'so loading and set loading equals useState.', 'start': 5496.854, 'duration': 5.005}, {'end': 5503.9, 'text': "And this one I'm going to give an initial state.", 'start': 5502.019, 'duration': 1.881}, {'end': 5505.121, 'text': "I'm going to set it to false.", 'start': 5504, 'duration': 1.121}, {'end': 5507.782, 'text': 'And this is also great with the useState hook.', 'start': 5505.641, 'duration': 2.141}, {'end': 5510.264, 'text': 'You can have as many of these ones as you want.', 'start': 5508.043, 'duration': 2.221}], 'summary': 'Using usestate hook to manage state for movies and loading with initial state set to false.', 'duration': 27.283, 'max_score': 5482.981, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE5482981.jpg'}], 'start': 3276.799, 'title': 'Styling and component creation in react', 'summary': 'Covers the use of props, style components, and global styles, with detailed guides on creating header, image, and homepage components in react, also including setting up css variables, defining font and layout styles, and using hooks like usestate.', 'chapters': [{'end': 3477.885, 'start': 3276.799, 'title': 'Using props and style components', 'summary': 'Discusses the use of props to make components dynamic and reusable, as well as the benefits of style components such as scoped css, sass-like syntax, and the ability to use props to modify css. it also introduces the use of template literals and javascript expressions within style components.', 'duration': 201.086, 'highlights': ['The use of props to make components dynamic and reusable Props allow components to be dynamic and reusable, enhancing their adaptability and logic.', 'Benefits of style components such as scoped CSS, Sass-like syntax, and the ability to use props to modify CSS Style components offer benefits like scoped CSS, Sass-like syntax, and the ability to modify CSS using props.', 'Introduction of template literals and JavaScript expressions within style components Style components introduce the use of template literals and JavaScript expressions, enabling dynamic CSS generation.']}, {'end': 3941.679, 'start': 3477.965, 'title': 'Creating global styles with style components', 'summary': 'Introduces creating global styles using style components, including setting up css variables, defining font and layout styles, and the recommended tool for react development. it also includes a guide on starting the development environment and using the necessary tools.', 'duration': 463.714, 'highlights': ['The chapter introduces creating global styles using style components The transcript provides detailed information on how to create global styles using style components in React.', 'Setting up CSS variables The transcript explains the process of setting CSS variables for the application, including max width, color, and font sizes.', 'Defining font and layout styles It includes details on setting font and layout styles for the application, including font sizes and colors for different tags.', 'Recommended tool for React development The chapter recommends using the React Developer Tools extension for development in React, highlighting its benefits for visualizing components and debugging.', 'Guide on starting the development environment and using necessary tools It provides guidance on starting the development environment and using tools like npm start and React Developer Tools for efficient development.']}, {'end': 4660.942, 'start': 3941.759, 'title': 'Adding global styles and creating header component', 'summary': 'Covers adding global styles to the application and creating the header component with detailed explanations of file structure, component creation, importing images, and using style components in react.', 'duration': 719.183, 'highlights': ['Creating a file structure for components and styles Explains the process of creating a folder structure for components and styles, emphasizing the subjective nature of structuring applications and the importance of using the provided folder structure for the course.', 'Importing and using style components in React component Details the process of importing and using style components in a React component, including the creation of placeholder components for styles and the explanation of using an index.js file for each component.', 'Creating the header component with functional components and arrow function Explains the creation of the header component using functional components and arrow function, highlighting the ability to use state in functional components with the introduction of hooks in React.']}, {'end': 5133.353, 'start': 4661.922, 'title': 'Styling image components and creating header', 'summary': 'Covers the process of styling image components and creating a header in react, including setting the source and attributes for logos, importing and using components, creating styles for the header and logos, and using media queries for responsive design.', 'duration': 471.431, 'highlights': ['The chapter covers the process of styling image components and creating a header in React. The chapter includes the process of styling image components and creating a header in React.', 'Setting the source and attributes for logos. The process involves setting the source and attributes for logos, such as importing the RMDB logo, setting the alt attribute, and using self-closing tags.', 'Importing and using components. The transcript explains the process of importing and using components in React, including marking components, importing the header component, and inserting it in JSX.', 'Creating styles for the header and logos. The chapter demonstrates creating styles for the header and logos using wrapper style components, setting background, padding, alignment, and max width, and modifying logo sizes using media queries.', 'Using media queries for responsive design. The process involves using media queries for responsive design, including setting specific widths for logos based on screen size and nesting media queries inside style components.']}, {'end': 5545.231, 'start': 5135.354, 'title': 'Building homepage component in react', 'summary': 'Covers the process of building a homepage component in react, including creating container and individual components, importing resources, using hooks like usestate, and setting up multiple states for loading and error handling.', 'duration': 409.877, 'highlights': ['Creating a container component and individual components for the homepage The chapter discusses creating a homepage component in React, including container components and individual components for the hero image, search bar, thumbnails, grid, and load more button.', 'Importing resources and setting up states using useState hook It covers importing resources such as images and config data, and setting up multiple states for loading and error handling using the useState hook in functional components.', 'Explanation of using the useState hook to create states The chapter explains the usage of the useState hook in functional components to create states, including de-structuring the state and its setter, and providing initial state values.']}], 'duration': 2268.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE3276799.jpg', 'highlights': ['Props allow components to be dynamic and reusable, enhancing their adaptability and logic.', 'Style components offer benefits like scoped CSS, Sass-like syntax, and the ability to modify CSS using props.', 'Style components introduce the use of template literals and JavaScript expressions, enabling dynamic CSS generation.', 'The chapter introduces creating global styles using style components in React.', 'The transcript explains the process of setting CSS variables for the application, including max width, color, and font sizes.', 'It includes details on setting font and layout styles for the application, including font sizes and colors for different tags.', 'The chapter recommends using the React Developer Tools extension for development in React, highlighting its benefits for visualizing components and debugging.', 'It provides guidance on starting the development environment and using tools like npm start and React Developer Tools for efficient development.', 'Explains the process of creating a folder structure for components and styles, emphasizing the subjective nature of structuring applications and the importance of using the provided folder structure for the course.', 'Details the process of importing and using style components in a React component, including the creation of placeholder components for styles and the explanation of using an index.js file for each component.', 'Explains the creation of the header component using functional components and arrow function, highlighting the ability to use state in functional components with the introduction of hooks in React.', 'The chapter includes the process of styling image components and creating a header in React.', 'The process involves setting the source and attributes for logos, such as importing the RMDB logo, setting the alt attribute, and using self-closing tags.', 'The transcript explains the process of importing and using components in React, including marking components, importing the header component, and inserting it in JSX.', 'The chapter demonstrates creating styles for the header and logos using wrapper style components, setting background, padding, alignment, and max width, and modifying logo sizes using media queries.', 'The process involves using media queries for responsive design, including setting specific widths for logos based on screen size and nesting media queries inside style components.', 'The chapter discusses creating a homepage component in React, including container components and individual components for the hero image, search bar, thumbnails, grid, and load more button.', 'It covers importing resources such as images and config data, and setting up multiple states for loading and error handling using the useState hook in functional components.', 'The chapter explains the usage of the useState hook in functional components to create states, including de-structuring the state and its setter, and providing initial state values.']}, {'end': 7830.237, 'segs': [{'end': 6715.741, 'src': 'heatmap', 'start': 6193.806, 'weight': 0.746, 'content': [{'end': 6198.828, 'text': "We haven't actually created this one yet because this one is going to be another state when we create the search bar.", 'start': 6193.806, 'duration': 5.022}, {'end': 6203.471, 'text': "So we're going to add in more states here later and also have a state for the search term.", 'start': 6198.848, 'duration': 4.623}, {'end': 6208.014, 'text': "And if we don't send in a search term, we're going to fall back to an empty string.", 'start': 6204.372, 'duration': 3.642}, {'end': 6210.235, 'text': 'So we set this one as default.', 'start': 6208.494, 'duration': 1.741}, {'end': 6212.156, 'text': "So that's the fetch movies function.", 'start': 6210.715, 'duration': 1.441}, {'end': 6215.118, 'text': "We're going to write this in a trial.", 'start': 6213.577, 'duration': 1.541}, {'end': 6217.531, 'text': 'And catch block.', 'start': 6216.71, 'duration': 0.821}, {'end': 6219.393, 'text': 'Try and catch.', 'start': 6217.831, 'duration': 1.562}, {'end': 6221.636, 'text': 'And we can get the error.', 'start': 6220.675, 'duration': 0.961}, {'end': 6223.918, 'text': "In this case, I'm not actually going to set the error.", 'start': 6221.776, 'duration': 2.142}, {'end': 6226.401, 'text': "I'm just going to have a flag that's telling if it's true or false.", 'start': 6223.998, 'duration': 2.403}, {'end': 6231.387, 'text': 'But of course, you can have a state where you can store the message from the error also if you want to do that.', 'start': 6226.842, 'duration': 4.545}, {'end': 6236.126, 'text': "So in the catch, we're just going to have setError and we set it to true.", 'start': 6232.844, 'duration': 3.282}, {'end': 6239.548, 'text': 'And here you can see how I use this setter for this state.', 'start': 6237.007, 'duration': 2.541}, {'end': 6245.352, 'text': 'So we destructure it out here and to set a new state for that one, we call this one and we give it the value.', 'start': 6239.909, 'duration': 5.443}, {'end': 6250.875, 'text': 'So I call setError and I give it the value true, and this will change that state to true.', 'start': 6245.952, 'duration': 4.923}, {'end': 6254.598, 'text': "Inside our try block, we're first going to set the error to false.", 'start': 6251.356, 'duration': 3.242}, {'end': 6258.38, 'text': "Because now we're grabbing new data.", 'start': 6256.84, 'duration': 1.54}, {'end': 6261.021, 'text': "So we have to make sure that this one isn't set to true.", 'start': 6258.44, 'duration': 2.581}, {'end': 6263.861, 'text': "Because we don't have an error before we have fetched anything.", 'start': 6261.181, 'duration': 2.68}, {'end': 6266.602, 'text': "And we're going to set the loading to true.", 'start': 6265.021, 'duration': 1.581}, {'end': 6267.942, 'text': "Because now we're fetching.", 'start': 6266.682, 'duration': 1.26}, {'end': 6269.382, 'text': 'So we set this flag to true.', 'start': 6268.002, 'duration': 1.38}, {'end': 6272.863, 'text': "And this is how we can keep track on when we're actually fetching.", 'start': 6269.942, 'duration': 2.921}, {'end': 6275.183, 'text': 'And we can show the loading spinner and stuff like that.', 'start': 6272.923, 'duration': 2.26}, {'end': 6276.463, 'text': 'All right.', 'start': 6276.123, 'duration': 0.34}, {'end': 6278.744, 'text': 'Then I create a const that I call movies.', 'start': 6276.943, 'duration': 1.801}, {'end': 6280.784, 'text': 'And this const is going to hold all the movies.', 'start': 6278.804, 'duration': 1.98}, {'end': 6282.644, 'text': "So I'm going to await.", 'start': 6281.744, 'duration': 0.9}, {'end': 6285.985, 'text': 'And from the API that we imported up here.', 'start': 6283.525, 'duration': 2.46}, {'end': 6293.213, 'text': "We have that function that I showed you that's called fetchMovies with an S.", 'start': 6287.25, 'duration': 5.963}, {'end': 6294.014, 'text': 'Really important.', 'start': 6293.213, 'duration': 0.801}, {'end': 6298.016, 'text': "And then we're going to give it the search term and the page.", 'start': 6294.614, 'duration': 3.402}, {'end': 6307.321, 'text': 'So this will hopefully grab the movies for us and we can try this out with console.log movies.', 'start': 6301.738, 'duration': 5.583}, {'end': 6311.783, 'text': "But if we go back to our application, you can see that we don't actually get anything here,", 'start': 6307.861, 'duration': 3.922}, {'end': 6315.545, 'text': "because we haven't triggered this function and we have to do that in a useEffect.", 'start': 6311.783, 'duration': 3.762}, {'end': 6318.932, 'text': "So we have the function now, but we haven't triggered it.", 'start': 6316.869, 'duration': 2.063}, {'end': 6322.296, 'text': 'Do some auto formatting and go below the function here.', 'start': 6319.192, 'duration': 3.104}, {'end': 6324.779, 'text': 'And we call the useEffect.', 'start': 6322.316, 'duration': 2.463}, {'end': 6329.005, 'text': 'And the useEffect is called with an inline function like this.', 'start': 6326.301, 'duration': 2.704}, {'end': 6332.309, 'text': 'And then we can do what we want inside of this useEffect.', 'start': 6329.846, 'duration': 2.463}, {'end': 6340.529, 'text': 'So what we want now is to trigger this only on mount, only when we mount this home component on the initial run of this one.', 'start': 6333.103, 'duration': 7.426}, {'end': 6345.692, 'text': 'So we can do this by specifying a coma here and an empty array.', 'start': 6341.009, 'duration': 4.683}, {'end': 6348.775, 'text': "This is what's called a dependency array for the use effect.", 'start': 6345.872, 'duration': 2.903}, {'end': 6353.758, 'text': 'And we can specify different dependencies on when we want this use effect to trigger.', 'start': 6349.055, 'duration': 4.703}, {'end': 6361.064, 'text': 'In our case, we just want it for now to trigger when we start up the application and when the home component mounts.', 'start': 6354.259, 'duration': 6.805}, {'end': 6369.566, 'text': 'so i specify this as an empty array for now, and when we specify it as an empty array, it will just run once.', 'start': 6361.684, 'duration': 7.882}, {'end': 6370.847, 'text': "so that's really neat.", 'start': 6369.566, 'duration': 1.281}, {'end': 6373.868, 'text': 'in this case we can just call fetch movies.', 'start': 6370.847, 'duration': 3.021}, {'end': 6378.309, 'text': "we're going to send in one because we want to fetch the first page.", 'start': 6373.868, 'duration': 4.441}, {'end': 6381.77, 'text': 'we can also mark this one actually with initial render.', 'start': 6378.309, 'duration': 3.461}, {'end': 6390.613, 'text': 'So we have specified an empty dependency array, meaning that it will only run once on the initial render.', 'start': 6385.168, 'duration': 5.445}, {'end': 6394.015, 'text': 'And inside the useEffect, we call our fetchMovies function.', 'start': 6391.073, 'duration': 2.942}, {'end': 6399.64, 'text': 'And hopefully we will get the console log of all the movies if we save this one and go back to our browser.', 'start': 6394.095, 'duration': 5.545}, {'end': 6402.763, 'text': 'And yes, you can see here we have the movie object here.', 'start': 6400.161, 'duration': 2.602}, {'end': 6408.295, 'text': 'So in this object, we have the page one, and this is all from the movie database API.', 'start': 6403.831, 'duration': 4.464}, {'end': 6409.957, 'text': "So it's nothing that we have set up here.", 'start': 6408.315, 'duration': 1.642}, {'end': 6414.68, 'text': 'We have a total pages of 500, total results of 10,000.', 'start': 6410.497, 'duration': 4.183}, {'end': 6417.464, 'text': "And we have the actual movies in a property that's called results.", 'start': 6414.681, 'duration': 2.783}, {'end': 6422.128, 'text': 'And this is an array and we get 20 movies at a time from the API.', 'start': 6417.684, 'duration': 4.444}, {'end': 6423.49, 'text': "So that's sweet.", 'start': 6422.809, 'duration': 0.681}, {'end': 6429.015, 'text': "We know that we're grabbing data and we know that it just triggers once and that's super great.", 'start': 6423.55, 'duration': 5.465}, {'end': 6437.18, 'text': 'So now when we have the data here, we can actually set our state because we have our state up here and we want to put our movies in the state.', 'start': 6430.35, 'duration': 6.83}, {'end': 6444.297, 'text': "So I'm going to call setState And for this one, I'm going to provide it with an inline function.", 'start': 6438.122, 'duration': 6.175}, {'end': 6449.8, 'text': "It's a callback function that's going to be called with the previous state by the state setter.", 'start': 6444.637, 'duration': 5.163}, {'end': 6454.742, 'text': "If you provide a state setter with a function, it's going to be called with a previous state.", 'start': 6450.14, 'duration': 4.602}, {'end': 6458.324, 'text': "And that's great because we need a previous state when we set the state.", 'start': 6455.202, 'duration': 3.122}, {'end': 6460.345, 'text': "And I'm going to show you why in a second.", 'start': 6458.584, 'duration': 1.761}, {'end': 6462.966, 'text': 'So we have a parameter that I call prev.', 'start': 6460.885, 'duration': 2.081}, {'end': 6464.467, 'text': 'You can call it whatever you want.', 'start': 6463.046, 'duration': 1.421}, {'end': 6467.487, 'text': 'In the state, we want to set an object.', 'start': 6465.467, 'duration': 2.02}, {'end': 6469.468, 'text': 'So we want to return an object.', 'start': 6468.028, 'duration': 1.44}, {'end': 6471.968, 'text': 'So I have a parentheses and curly brackets.', 'start': 6469.728, 'duration': 2.24}, {'end': 6478.209, 'text': "If we didn't have the parentheses, it would think that these curly brackets marks the scope of the function itself.", 'start': 6472.688, 'duration': 5.521}, {'end': 6479.45, 'text': "And that's no good.", 'start': 6478.63, 'duration': 0.82}, {'end': 6484.011, 'text': 'We want to return an object and an object also is marked with curly brackets.', 'start': 6479.91, 'duration': 4.101}, {'end': 6488.131, 'text': 'So we have this parentheses before and this parentheses after.', 'start': 6484.551, 'duration': 3.58}, {'end': 6490.812, 'text': 'And this will make sure that we return an object.', 'start': 6488.672, 'duration': 2.14}, {'end': 6494.533, 'text': 'And this parentheses here is for the setter, of course.', 'start': 6491.892, 'duration': 2.641}, {'end': 6496.573, 'text': 'So we have two parentheses here at the end.', 'start': 6494.653, 'duration': 1.92}, {'end': 6503.335, 'text': 'So I have this little neat little plugin also in Visual Studio Code where you can see I get these different colors of the parentheses.', 'start': 6497.214, 'duration': 6.121}, {'end': 6505.456, 'text': "So it's really easy to see the parentheses.", 'start': 6503.595, 'duration': 1.861}, {'end': 6508.777, 'text': "I think it's called rainbow brackets, that plugin.", 'start': 6505.956, 'duration': 2.821}, {'end': 6510.557, 'text': "So we're going to set the state.", 'start': 6509.537, 'duration': 1.02}, {'end': 6512.658, 'text': 'We have the movies inside of this const.', 'start': 6510.657, 'duration': 2.001}, {'end': 6515.799, 'text': "So I'm going to use the ES6 syntax that's called spread.", 'start': 6513.078, 'duration': 2.721}, {'end': 6518.88, 'text': 'I use three dots and spread the movies.', 'start': 6516.579, 'duration': 2.301}, {'end': 6522.762, 'text': "And this is because I'm going to take this object here and spread it out here.", 'start': 6519.341, 'duration': 3.421}, {'end': 6524.984, 'text': "That means that we're creating a new object.", 'start': 6523.103, 'duration': 1.881}, {'end': 6529.926, 'text': "It's going to take all the properties from these movies and spread them out inside of this object here.", 'start': 6525.164, 'duration': 4.762}, {'end': 6534.268, 'text': 'When you set the state in React, you should always provide it with a new value.', 'start': 6530.687, 'duration': 3.581}, {'end': 6542.353, 'text': "You should never mutate the state in React because if you mutate the state directly, it won't trigger a rerender and there can be a lot of trouble.", 'start': 6534.589, 'duration': 7.764}, {'end': 6545.794, 'text': 'You should always use a setup like this to modify the state.', 'start': 6542.913, 'duration': 2.881}, {'end': 6550.296, 'text': 'And you should always provide it with a new value and not mutate the state.', 'start': 6546.094, 'duration': 4.202}, {'end': 6551.916, 'text': 'Really, really important.', 'start': 6550.696, 'duration': 1.22}, {'end': 6554.437, 'text': 'Never mutate the state in React.', 'start': 6552.416, 'duration': 2.021}, {'end': 6556.618, 'text': 'Okay, so we have the movies.', 'start': 6555.117, 'duration': 1.501}, {'end': 6560.899, 'text': "And then if you remember, we have this property here that's called results.", 'start': 6557.218, 'duration': 3.681}, {'end': 6563.12, 'text': 'So this is holding all the movies.', 'start': 6561.199, 'duration': 1.921}, {'end': 6569.623, 'text': 'but in our case we need to decide on how this new stage should look, because if we load more movies,', 'start': 6563.94, 'duration': 5.683}, {'end': 6575.226, 'text': 'we want to append the new movies to the old state, to the old movies, and not wipe them out.', 'start': 6569.623, 'duration': 5.603}, {'end': 6577.047, 'text': 'so we have to do some check here for that.', 'start': 6575.226, 'duration': 1.821}, {'end': 6577.887, 'text': 'on the results.', 'start': 6577.047, 'duration': 0.84}, {'end': 6583.11, 'text': "so we have the results property, colon and then i'm going to put it on a new row.", 'start': 6577.887, 'duration': 5.223}, {'end': 6586.131, 'text': "i'm going to check if the page is greater than one.", 'start': 6583.11, 'duration': 3.021}, {'end': 6587.352, 'text': 'then i have a question mark.', 'start': 6586.131, 'duration': 1.221}, {'end': 6588.853, 'text': 'this is a turner operator.', 'start': 6587.352, 'duration': 1.501}, {'end': 6594.598, 'text': "here again i'm going to return a new array I spread out from the previous state.", 'start': 6588.853, 'duration': 5.745}, {'end': 6596.821, 'text': "prev, that's the one here, as I told you.", 'start': 6594.598, 'duration': 2.223}, {'end': 6599.765, 'text': 'This one is getting called with the previous state.', 'start': 6597.161, 'duration': 2.604}, {'end': 6604.692, 'text': 'So from the previous state, I spread out the old results.', 'start': 6600.266, 'duration': 4.426}, {'end': 6608.817, 'text': 'Three dots, prev.results with an s at the end.', 'start': 6605.393, 'duration': 3.424}, {'end': 6613.601, 'text': "right. so that's the old movies that we already have in the state.", 'start': 6609.958, 'duration': 3.643}, {'end': 6616.303, 'text': "then i have a coma and i'm going to attach the new movies.", 'start': 6613.601, 'duration': 2.702}, {'end': 6624.67, 'text': 'so from the new movies, dot dot dot movies, dot results, and this one is going to append the new movies to this array.', 'start': 6616.303, 'duration': 8.367}, {'end': 6629.054, 'text': "so we get an array with the old movies and the new movies and that's great.", 'start': 6624.67, 'duration': 4.384}, {'end': 6631.996, 'text': "then we have a colon because if we're not loading more,", 'start': 6629.054, 'duration': 2.942}, {'end': 6638.121, 'text': 'we can wipe out the old movies and just give it the new movies that we got in this const called movies.', 'start': 6631.996, 'duration': 6.125}, {'end': 6646.893, 'text': 'so dot dot dot movies, dot results like this, do some auto formatting and this will hopefully work.', 'start': 6638.121, 'duration': 8.772}, {'end': 6650.294, 'text': "we don't know if it works because we haven't created a load more button yet.", 'start': 6646.893, 'duration': 3.401}, {'end': 6652.414, 'text': "so we'll see that later in the course.", 'start': 6650.294, 'duration': 2.12}, {'end': 6654.135, 'text': "and there's one more thing we have to do,", 'start': 6652.414, 'duration': 1.721}, {'end': 6659.316, 'text': "because we're setting the loading to true here and we have to set it to false when we have grabbed all the movies.", 'start': 6654.135, 'duration': 5.181}, {'end': 6670.778, 'text': "so just below the try and catch block here, at the end of this function we're going to set loading the false like this save the file,", 'start': 6659.316, 'duration': 11.462}, {'end': 6676.145, 'text': "go back to see that it works, reload it and yes, it works and that's super great.", 'start': 6670.778, 'duration': 5.367}, {'end': 6678.027, 'text': "but we're console logging it out here.", 'start': 6676.145, 'duration': 1.882}, {'end': 6680.13, 'text': "we don't know if it works with the state.", 'start': 6678.027, 'duration': 2.103}, {'end': 6689.883, 'text': 'so we remove this console log and go down here somewhere just above the return statement, and we can console, log out the state instead.', 'start': 6680.13, 'duration': 9.753}, {'end': 6693.345, 'text': 'save the file and we hope for the best.', 'start': 6689.883, 'duration': 3.462}, {'end': 6699.45, 'text': 'go back to the browser and yes, you can see we have the state here and you may wonder, why is it showing this many times?', 'start': 6693.345, 'duration': 6.105}, {'end': 6704.852, 'text': "and that's because if we look in the home component, We have three different states here,", 'start': 6699.45, 'duration': 5.402}, {'end': 6707.935, 'text': 'so it will re-render each time we change one of these states.', 'start': 6704.852, 'duration': 3.083}, {'end': 6712.258, 'text': 'And some may say and go crazy, oh, we have a lot of re-renders.', 'start': 6708.375, 'duration': 3.883}, {'end': 6713.139, 'text': "That's crazy.", 'start': 6712.338, 'duration': 0.801}, {'end': 6715.741, 'text': 'It will make this application so slow.', 'start': 6713.619, 'duration': 2.122}], 'summary': 'Creating a search bar function to fetch and set movies state with loading and error handling.', 'duration': 521.935, 'max_score': 6193.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE6193806.jpg'}, {'end': 6542.353, 'src': 'embed', 'start': 6509.537, 'weight': 0, 'content': [{'end': 6510.557, 'text': "So we're going to set the state.", 'start': 6509.537, 'duration': 1.02}, {'end': 6512.658, 'text': 'We have the movies inside of this const.', 'start': 6510.657, 'duration': 2.001}, {'end': 6515.799, 'text': "So I'm going to use the ES6 syntax that's called spread.", 'start': 6513.078, 'duration': 2.721}, {'end': 6518.88, 'text': 'I use three dots and spread the movies.', 'start': 6516.579, 'duration': 2.301}, {'end': 6522.762, 'text': "And this is because I'm going to take this object here and spread it out here.", 'start': 6519.341, 'duration': 3.421}, {'end': 6524.984, 'text': "That means that we're creating a new object.", 'start': 6523.103, 'duration': 1.881}, {'end': 6529.926, 'text': "It's going to take all the properties from these movies and spread them out inside of this object here.", 'start': 6525.164, 'duration': 4.762}, {'end': 6534.268, 'text': 'When you set the state in React, you should always provide it with a new value.', 'start': 6530.687, 'duration': 3.581}, {'end': 6542.353, 'text': "You should never mutate the state in React because if you mutate the state directly, it won't trigger a rerender and there can be a lot of trouble.", 'start': 6534.589, 'duration': 7.764}], 'summary': 'Using spread syntax to create a new object in react state, avoiding mutation.', 'duration': 32.816, 'max_score': 6509.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE6509537.jpg'}, {'end': 6873.909, 'src': 'embed', 'start': 6842.838, 'weight': 1, 'content': [{'end': 6846.738, 'text': "So inside of this file, I'm going to create a new function.", 'start': 6842.838, 'duration': 3.9}, {'end': 6852.96, 'text': "I'm going to export it also because we're going to import this one in our home component and use this custom hook.", 'start': 6847.358, 'duration': 5.602}, {'end': 6856.78, 'text': 'Export const useHomeFetch.', 'start': 6853.62, 'duration': 3.16}, {'end': 6860.641, 'text': 'And I create a regular arrow function like this.', 'start': 6857.98, 'duration': 2.661}, {'end': 6863.241, 'text': "All right, so that's our function.", 'start': 6861.96, 'duration': 1.281}, {'end': 6867.344, 'text': 'Then we go back to our home component inside of the components folder.', 'start': 6863.821, 'duration': 3.523}, {'end': 6873.909, 'text': "And we're going to grab all this logic here, all the states, the fetch movies function and the use effect.", 'start': 6868.245, 'duration': 5.664}], 'summary': 'Creating a new function to be used as a custom hook in the home component.', 'duration': 31.071, 'max_score': 6842.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE6842838.jpg'}, {'end': 6945.536, 'src': 'embed', 'start': 6915.162, 'weight': 3, 'content': [{'end': 6916.623, 'text': 'And we import it from React.', 'start': 6915.162, 'duration': 1.461}, {'end': 6923.701, 'text': "And you can see that I don't import React in this one because we not need the actual React library.", 'start': 6918.697, 'duration': 5.004}, {'end': 6925.962, 'text': 'We just need this stuff from that library.', 'start': 6923.981, 'duration': 1.981}, {'end': 6929.264, 'text': "So that's why we don't have any JSX or anything here.", 'start': 6926.482, 'duration': 2.782}, {'end': 6931.786, 'text': "So that's why we don't need to import React itself.", 'start': 6929.364, 'duration': 2.422}, {'end': 6934.728, 'text': 'We also need to import the API.', 'start': 6932.987, 'duration': 1.741}, {'end': 6939.752, 'text': 'And that one, we can actually just copy this one from the home.', 'start': 6935.729, 'duration': 4.023}, {'end': 6945.536, 'text': 'So go back to the home, cut this one out here, the import API like this.', 'start': 6939.972, 'duration': 5.564}], 'summary': 'Demonstrating how to import react and api, excluding jsx and react library.', 'duration': 30.374, 'max_score': 6915.162, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE6915162.jpg'}, {'end': 7039.492, 'src': 'embed', 'start': 7006.927, 'weight': 4, 'content': [{'end': 7013.15, 'text': "it's always a great idea to have an initial state if you want to reset stuff, and we want to do that later.", 'start': 7006.927, 'duration': 6.223}, {'end': 7018.152, 'text': "so i'm going to structure this state just as the one that we got back from the movie database api.", 'start': 7013.15, 'duration': 5.002}, {'end': 7019.913, 'text': 'so we have the page.', 'start': 7018.152, 'duration': 1.761}, {'end': 7021.694, 'text': "it's going to be zero initially.", 'start': 7019.913, 'duration': 1.781}, {'end': 7022.875, 'text': 'then we have the results.', 'start': 7021.694, 'duration': 1.181}, {'end': 7027.257, 'text': "that's the property that holds all the movies are going to provide it with an empty array.", 'start': 7022.875, 'duration': 4.382}, {'end': 7039.492, 'text': "initially we have the total underscore pages is going to be zero and the total underscore results it's going to be zero also.", 'start': 7027.257, 'duration': 12.235}], 'summary': 'Creating initial state with page=0, results=[], total_pages=0, total_results=0.', 'duration': 32.565, 'max_score': 7006.927, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE7006927.jpg'}], 'start': 5545.431, 'title': 'React component creation, hooks, async await, and state management', 'summary': 'Covers creating and using components in react, utilizing react hooks and the movie database api, implementing async await syntax for fetching data, and managing state while emphasizing key concepts such as custom hooks and component organization.', 'chapters': [{'end': 5614.755, 'start': 5545.431, 'title': 'Creating and using components in react', 'summary': "Discusses creating a home component, exporting it, importing it into the app.js file, and using it to display 'home page' in the application, while addressing warnings about unused values.", 'duration': 69.324, 'highlights': ["The chapter discusses creating a home component, exporting it, importing it into the app.js file, and using it to display 'home page' in the application, while addressing warnings about unused values.", "The home component is created and exported using 'export default home', then imported into the app.js file and used to replace the previous content, displaying 'home page' in the application.", 'Warnings about unused values are mentioned, indicating that they will disappear when used in the component.']}, {'end': 6077.988, 'start': 5615.723, 'title': 'React hooks and movie database api', 'summary': 'Introduces built-in and custom hooks in the react library, emphasizing the use of standard hooks like usestate, useeffect, and usecontext, while also mentioning additional hooks like usereducer, usecallback, and usememo. it then discusses the process of fetching data from the movie database api using useeffect and usestate hooks, highlighting advanced concepts and the creation of custom hooks.', 'duration': 462.265, 'highlights': ['Introduction to React Hooks The chapter provides an overview of built-in and custom hooks in the React library, emphasizing the use of standard hooks like useState, useEffect, and useContext.', 'Fetching Data from Movie Database API The process of fetching data from the Movie Database API is discussed, highlighting the usage of useEffect and useState hooks, as well as the creation of custom hooks.', 'Standard Hooks in React Emphasizes the use of standard hooks like useState, useEffect, and useContext, which are recommended for creating React applications.', 'Additional Hooks in React Mentions additional hooks like useReducer, useCallback, and useMemo, which provide more advanced functionalities for managing state and optimizing performance.', 'Advanced Concepts and Custom Hooks Discusses advanced concepts related to hooks, custom hook creation, and handling side effects when fetching data from an external API.']}, {'end': 6423.49, 'start': 6078.869, 'title': 'Using async await syntax for fetching data', 'summary': 'Discusses how to use the async await syntax for fetching data from an api, including using the fetchmovies function with parameters like search term and page, setting up useeffect to trigger the fetch on the initial render, and obtaining movie data with details such as total pages, total results, and actual movies.', 'duration': 344.621, 'highlights': ['Setting up useEffect to trigger the fetch on the initial render The chapter explains how to set up the useEffect to trigger the fetchMovies function on the initial render of the home component by specifying an empty array as a dependency, ensuring it runs only once.', 'Obtaining movie data with details such as total pages, total results, and actual movies It discusses obtaining movie data with details such as total pages of 500, total results of 10,000, and the actual movies in a property called results, which is an array containing 20 movies at a time from the API.', 'Using the async await syntax for fetching data from an API The chapter emphasizes the usage of the async await syntax for fetching data from an API, highlighting the importance of using the async keyword, handling error with try and catch block, and setting loading flag to true while fetching.']}, {'end': 7160.379, 'start': 6423.55, 'title': 'Fetching movie data and state management', 'summary': 'Demonstrates fetching and managing movie data from the movie database api using useeffect and usestate hooks, with a focus on avoiding state mutation and improving component organization through custom hooks.', 'duration': 736.829, 'highlights': ['The chapter demonstrates fetching and managing movie data from the Movie Database API using useEffect and useState hooks. The transcript covers the process of fetching and managing movie data from the Movie Database API using the useEffect and useState hooks in React.', 'Emphasis on avoiding state mutation and improving component organization through custom hooks. The chapter emphasizes the importance of avoiding state mutation in React and improving component organization through the use of custom hooks, aiming to separate and reuse logic within the application.', 'Explanation on setting state and avoiding state mutation in React. The transcript explains the process of setting state in React and emphasizes the importance of avoiding state mutation to ensure proper rendering and prevent potential issues.']}, {'end': 7830.237, 'start': 7160.539, 'title': 'Creating react custom hook & hero image', 'summary': 'Covers creating a custom hook in react and building a hero image component for the homepage, using data from the movie database api, with an emphasis on naming conventions and prop usage, as well as setting background images and handling conditional rendering.', 'duration': 669.698, 'highlights': ["Creating a custom hook in React The speaker emphasizes the importance of naming custom hooks with 'use' before the name and explains the significance of prop usage for dynamic component changes.", 'Building the hero image component for the homepage The process involves creating separate files for styling and component, setting up the background image and text from the movie database API, and using props for image, title, and text to enable dynamic content.', 'Utilizing conditional rendering and shorthand for fragments The speaker demonstrates the use of conditional rendering and fragments in React for handling multiple components and checking for existing results in the state.']}], 'duration': 2284.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE5545431.jpg', 'highlights': ['Fetching and managing movie data from the Movie Database API using useEffect and useState hooks.', 'Setting up useEffect to trigger the fetch on the initial render by specifying an empty array as a dependency.', 'Using the async await syntax for fetching data from an API, emphasizing the importance of using the async keyword and handling errors with try and catch block.', 'Emphasis on avoiding state mutation and improving component organization through custom hooks.', 'Creating a custom hook in React and explaining the significance of prop usage for dynamic component changes.']}, {'end': 8740.326, 'segs': [{'end': 8265.332, 'src': 'heatmap', 'start': 8005.457, 'weight': 0.757, 'content': [{'end': 8008.799, 'text': "So that's why all these values may seem a little bit odd.", 'start': 8005.457, 'duration': 3.342}, {'end': 8009.479, 'text': 'This one is 39%.', 'start': 8008.839, 'duration': 0.64}, {'end': 8010.78, 'text': 'And the RGBA is going to be 0, 0, 0, 0 again.', 'start': 8009.479, 'duration': 1.301}, {'end': 8013.402, 'text': 'And 41%.', 'start': 8013.122, 'duration': 0.28}, {'end': 8028.974, 'text': 'RGBA zero, zero, zero and zero point six, five.', 'start': 8013.402, 'duration': 15.572}, {'end': 8034.622, 'text': "that's the alpha value, and i see now that this one shouldn't even need to have two of these ones here.", 'start': 8028.974, 'duration': 5.648}, {'end': 8037.667, 'text': 'i think actually i can remove this one here.', 'start': 8034.622, 'duration': 3.045}, {'end': 8039.469, 'text': "We don't need that one.", 'start': 8038.348, 'duration': 1.121}, {'end': 8042.63, 'text': 'And then we set 100%.', 'start': 8040.189, 'duration': 2.441}, {'end': 8046.152, 'text': 'And just after the parentheses, the end parentheses, you have a comma.', 'start': 8042.63, 'duration': 3.522}, {'end': 8048.233, 'text': 'And then we specify the URL.', 'start': 8046.612, 'duration': 1.621}, {'end': 8051.195, 'text': 'And now we can grab that prop that we send in here.', 'start': 8048.814, 'duration': 2.381}, {'end': 8053.576, 'text': 'And you do that as this is a template literal.', 'start': 8051.395, 'duration': 2.181}, {'end': 8057.518, 'text': 'Just as before, we use dollar sign, encoded brackets.', 'start': 8053.876, 'duration': 3.642}, {'end': 8059.099, 'text': 'And we can grab those props.', 'start': 8057.818, 'duration': 1.281}, {'end': 8060.48, 'text': 'You create an inline function.', 'start': 8059.139, 'duration': 1.341}, {'end': 8062.541, 'text': 'And this one will get called with the props.', 'start': 8060.62, 'duration': 1.921}, {'end': 8068.801, 'text': 'from the props we grab the image and if you want to just structure them out, you can do that also here.', 'start': 8064.199, 'duration': 4.602}, {'end': 8086.027, 'text': 'then you have a parenthesis and then you hold the object and then we just structure out the image and we do it like this right now we have a coma and from the variable we grab dark gray and hopefully this will work.', 'start': 8068.801, 'duration': 17.226}, {'end': 8088.667, 'text': 'do some auto formatting and save it.', 'start': 8086.946, 'duration': 1.721}, {'end': 8094.61, 'text': "go back to the browser and you can see that we actually have the image here, but we haven't set any other properties.", 'start': 8088.667, 'duration': 5.943}, {'end': 8096.771, 'text': "so that's why it will look like this.", 'start': 8094.61, 'duration': 2.161}, {'end': 8105.976, 'text': "so let's go back here and we're going to set the background size 100 and cover.", 'start': 8096.771, 'duration': 9.205}, {'end': 8111.679, 'text': "we're going to set the background position to center.", 'start': 8105.976, 'duration': 5.703}, {'end': 8118.487, 'text': 'The height is going to be 600 pixels.', 'start': 8115.086, 'duration': 3.401}, {'end': 8124.909, 'text': "Position is going to be relative because we're going to absolute position our text.", 'start': 8120.108, 'duration': 4.801}, {'end': 8126.71, 'text': "So that's why we have to set this to relative.", 'start': 8124.929, 'duration': 1.781}, {'end': 8129.45, 'text': "And I'm also going to have a slight animation on this one.", 'start': 8127.19, 'duration': 2.26}, {'end': 8136.253, 'text': "So I set an animation that I'm going to call animate hero image.", 'start': 8130.111, 'duration': 6.142}, {'end': 8138.713, 'text': "And it's going to be for one second.", 'start': 8137.433, 'duration': 1.28}, {'end': 8140.214, 'text': 'If we look at the finished here.', 'start': 8138.953, 'duration': 1.261}, {'end': 8143.426, 'text': 'You can see that it kind of fades up.', 'start': 8141.345, 'duration': 2.081}, {'end': 8145.828, 'text': "So that's the animation that I'm going to create.", 'start': 8144.047, 'duration': 1.781}, {'end': 8149.69, 'text': 'And I do that below here.', 'start': 8148.469, 'duration': 1.221}, {'end': 8151.351, 'text': 'I nest it inside of here.', 'start': 8150.11, 'duration': 1.241}, {'end': 8154.093, 'text': 'So at keyframes.', 'start': 8151.411, 'duration': 2.682}, {'end': 8156.634, 'text': 'And the name is animate hero image.', 'start': 8154.613, 'duration': 2.021}, {'end': 8161.897, 'text': 'And I go from opacity.', 'start': 8156.654, 'duration': 5.243}, {'end': 8164.319, 'text': "It's going to be zero.", 'start': 8163.478, 'duration': 0.841}, {'end': 8167.781, 'text': 'To opacity.', 'start': 8166.08, 'duration': 1.701}, {'end': 8169.982, 'text': "It's going to be one.", 'start': 8169.241, 'duration': 0.741}, {'end': 8171.895, 'text': 'save it.', 'start': 8171.374, 'duration': 0.521}, {'end': 8177.079, 'text': "go back and see what we've got and there you have it.", 'start': 8171.895, 'duration': 5.184}, {'end': 8179.641, 'text': "there's some little border up here.", 'start': 8177.079, 'duration': 2.562}, {'end': 8181.042, 'text': "i don't know why.", 'start': 8179.641, 'duration': 1.401}, {'end': 8190.87, 'text': "let's see if it sort itself out when i create other styles, but you can see that it it animates in here quite smoothly.", 'start': 8181.042, 'duration': 9.828}, {'end': 8192.591, 'text': "so that's great.", 'start': 8190.87, 'duration': 1.721}, {'end': 8194.493, 'text': "all right, let's fix the other components.", 'start': 8192.591, 'duration': 1.902}, {'end': 8196.834, 'text': 'so we have the content.', 'start': 8194.493, 'duration': 2.341}, {'end': 8198.556, 'text': 'padding is going to be 20 pixels.', 'start': 8196.834, 'duration': 1.722}, {'end': 8204.735, 'text': 'on that one we set a max width And we grab from our variable the max width.', 'start': 8198.556, 'duration': 6.179}, {'end': 8210.619, 'text': 'And margin is going to be zero in order.', 'start': 8207.857, 'duration': 2.762}, {'end': 8211.94, 'text': 'Save it.', 'start': 8211.519, 'duration': 0.421}, {'end': 8212.86, 'text': "Let's check it out.", 'start': 8212.059, 'duration': 0.801}, {'end': 8215.742, 'text': "You can see that it's in the center now.", 'start': 8213.3, 'duration': 2.442}, {'end': 8218.144, 'text': "That's great.", 'start': 8217.584, 'duration': 0.56}, {'end': 8222.427, 'text': 'And that one removed that nasty little border up there also.', 'start': 8219.365, 'duration': 3.062}, {'end': 8223.188, 'text': "That's sweet.", 'start': 8222.687, 'duration': 0.501}, {'end': 8227.471, 'text': 'Then we have the text.', 'start': 8226.19, 'duration': 1.281}, {'end': 8230.612, 'text': "Let's create that one also.", 'start': 8229.392, 'duration': 1.22}, {'end': 8236.207, 'text': 'I set the set index to 100 just to place it on top.', 'start': 8232.526, 'duration': 3.681}, {'end': 8240.409, 'text': 'I set the max width to 700 pixels on this text.', 'start': 8236.948, 'duration': 3.461}, {'end': 8243.709, 'text': 'Position is going to be absolute.', 'start': 8241.388, 'duration': 2.321}, {'end': 8251.753, 'text': "From bottom I'm going to set it to 40 pixels and margin right is going to be 20 pixels.", 'start': 8245.351, 'duration': 6.402}, {'end': 8255.554, 'text': 'The min height is going to be 100 pixels.', 'start': 8252.633, 'duration': 2.921}, {'end': 8260.516, 'text': 'And the color is going to be from the variables we have the white.', 'start': 8256.754, 'duration': 3.762}, {'end': 8263.85, 'text': 'All right.', 'start': 8263.43, 'duration': 0.42}, {'end': 8265.332, 'text': "So that's our text.", 'start': 8264.411, 'duration': 0.921}], 'summary': 'Styling and animating web elements for a webpage, including setting background size, position, and creating animations.', 'duration': 259.875, 'max_score': 8005.457, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE8005457.jpg'}, {'end': 8094.61, 'src': 'embed', 'start': 8068.801, 'weight': 2, 'content': [{'end': 8086.027, 'text': 'then you have a parenthesis and then you hold the object and then we just structure out the image and we do it like this right now we have a coma and from the variable we grab dark gray and hopefully this will work.', 'start': 8068.801, 'duration': 17.226}, {'end': 8088.667, 'text': 'do some auto formatting and save it.', 'start': 8086.946, 'duration': 1.721}, {'end': 8094.61, 'text': "go back to the browser and you can see that we actually have the image here, but we haven't set any other properties.", 'start': 8088.667, 'duration': 5.943}], 'summary': 'Structuring and formatting an image, setting properties in progress.', 'duration': 25.809, 'max_score': 8068.801, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE8068801.jpg'}, {'end': 8156.634, 'src': 'embed', 'start': 8127.19, 'weight': 1, 'content': [{'end': 8129.45, 'text': "And I'm also going to have a slight animation on this one.", 'start': 8127.19, 'duration': 2.26}, {'end': 8136.253, 'text': "So I set an animation that I'm going to call animate hero image.", 'start': 8130.111, 'duration': 6.142}, {'end': 8138.713, 'text': "And it's going to be for one second.", 'start': 8137.433, 'duration': 1.28}, {'end': 8140.214, 'text': 'If we look at the finished here.', 'start': 8138.953, 'duration': 1.261}, {'end': 8143.426, 'text': 'You can see that it kind of fades up.', 'start': 8141.345, 'duration': 2.081}, {'end': 8145.828, 'text': "So that's the animation that I'm going to create.", 'start': 8144.047, 'duration': 1.781}, {'end': 8149.69, 'text': 'And I do that below here.', 'start': 8148.469, 'duration': 1.221}, {'end': 8151.351, 'text': 'I nest it inside of here.', 'start': 8150.11, 'duration': 1.241}, {'end': 8154.093, 'text': 'So at keyframes.', 'start': 8151.411, 'duration': 2.682}, {'end': 8156.634, 'text': 'And the name is animate hero image.', 'start': 8154.613, 'duration': 2.021}], 'summary': 'A one-second animation called animate hero image creates a fading effect.', 'duration': 29.444, 'max_score': 8127.19, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE8127190.jpg'}, {'end': 8466.588, 'src': 'embed', 'start': 8432.868, 'weight': 0, 'content': [{'end': 8436.112, 'text': "So we're going to create this grid now instead in this video.", 'start': 8432.868, 'duration': 3.244}, {'end': 8439.355, 'text': "So let's start by creating the logic just as usual.", 'start': 8436.552, 'duration': 2.803}, {'end': 8441.297, 'text': 'And in the next video, we create the styles.', 'start': 8439.475, 'duration': 1.822}, {'end': 8446.663, 'text': "Go back to the code editor and inside the components, create a new folder that's called grid.", 'start': 8441.798, 'duration': 4.865}, {'end': 8452.159, 'text': "And inside the grid, create a new file that's called index.js.", 'start': 8448.117, 'duration': 4.042}, {'end': 8457.022, 'text': "And another file that's called grid.styles.js.", 'start': 8452.54, 'duration': 4.482}, {'end': 8459.264, 'text': 'And capital G on the grid, of course.', 'start': 8457.323, 'duration': 1.941}, {'end': 8466.588, 'text': "And just as before, we're going to be in the grid.styles.js first to create the placeholders for the style components.", 'start': 8459.944, 'duration': 6.644}], 'summary': 'In the next video, create a grid folder with index.js and grid.styles.js files.', 'duration': 33.72, 'max_score': 8432.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE8432868.jpg'}], 'start': 7830.618, 'title': 'Front-end development grid logic', 'summary': 'Discusses creating grid logic for front-end development, covering the logic and styles for the grid component, mapping through movie data, and addressing unique key prop warnings in react.', 'chapters': [{'end': 8028.974, 'start': 7830.618, 'title': 'Creating stylish hero component', 'summary': 'Discusses creating a hero component by sending and using props, setting background image and creating a gradient, enabling dynamic styling. the process involves sending props to style components, setting background image using props, and creating a gradient with specific rgba values.', 'duration': 198.356, 'highlights': ['The chapter discusses creating a Hero component by sending and using props, setting background image and creating a gradient, enabling dynamic styling.', 'Sending props to style components allows for cleaner code and dynamic styling based on the image prop sent.', 'Setting a background image using props enables dynamic styling and eliminates the need for inline CSS for dynamic images.', 'Creating a gradient with specific RGBA values, such as 0, 0, 0, 0 and 0, 0, 0, 0.65, allows for a slight gradient below the text to ensure visibility on different backgrounds.']}, {'end': 8412.947, 'start': 8028.974, 'title': 'Css animation and styling in react', 'summary': 'Covers css animations and styling in react, including setting background size, position, height, and other properties, as well as creating media queries and optimizing css. the tutorial also demonstrates creating a hero image animation with a fade effect and applying font sizes based on media queries.', 'duration': 383.973, 'highlights': ['The chapter covers CSS animations and styling in React, including setting background size, position, height, and other properties, as well as creating media queries and optimizing CSS.', 'The tutorial demonstrates creating a hero image animation with a fade effect and applies font sizes based on media queries.', 'The height is set to 600 pixels and the position is relative to enable absolute positioning of text.', 'A hero image animation is created with a fade effect for one second, and media queries are used to set font sizes based on screen width.']}, {'end': 8740.326, 'start': 8413.307, 'title': 'Front-end development: creating grid logic', 'summary': 'Covers the process of creating grid logic for a front-end development project, including creating the logic and styles for the grid component, mapping through movie data, and addressing unique key prop warnings in react.', 'duration': 327.019, 'highlights': ['Creating the logic and styles for the grid component The video demonstrates the creation of logic and styles for the grid component, including the use of styled components, mapping through movie data, and addressing unique key prop warnings in React.', 'Mapping through movie data and displaying titles in the grid The instructor uses the map method to iterate through the movie data, displaying movie titles in the grid and addressing the unique key prop warning by setting the movie ID as the unique key.', 'Explanation of using ES6 syntax and the map method The instructor utilizes ES6 syntax and the map method to iterate through the movie data, providing an explanation of their usage for efficient code implementation.']}], 'duration': 909.708, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE7830618.jpg', 'highlights': ['The chapter discusses creating a Hero component by sending and using props, enabling dynamic styling.', 'The tutorial demonstrates creating a hero image animation with a fade effect and applies font sizes based on media queries.', 'Creating the logic and styles for the grid component, including the use of styled components, mapping through movie data, and addressing unique key prop warnings in React.']}, {'end': 10853.716, 'segs': [{'end': 8910.37, 'src': 'embed', 'start': 8876.696, 'weight': 4, 'content': [{'end': 8885.041, 'text': "then we set something that's called grid template columns, grid dash template dash columns.", 'start': 8876.696, 'duration': 8.345}, {'end': 8892.485, 'text': "we're going to set this one to repeat, and this is a little trick you can use if you want to create a responsive grid.", 'start': 8885.041, 'duration': 7.444}, {'end': 8895.007, 'text': 'so we repeat these columns.', 'start': 8892.485, 'duration': 2.522}, {'end': 8910.37, 'text': "we set it to autofill a coma and then we use the min max 200 pixels that's the minimum width that those little thumbnails can have and then we set it to one fragment.", 'start': 8895.007, 'duration': 15.363}], 'summary': 'Using grid template columns to create a responsive grid with minimum width of 200 pixels.', 'duration': 33.674, 'max_score': 8876.696, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE8876696.jpg'}, {'end': 9171.813, 'src': 'embed', 'start': 9143.897, 'weight': 0, 'content': [{'end': 9146.739, 'text': 'And below here where we map through all of the movies.', 'start': 9143.897, 'duration': 2.842}, {'end': 9149.3, 'text': "We're going to use our thumb instead of this div.", 'start': 9147.119, 'duration': 2.181}, {'end': 9151.922, 'text': 'Remove this one here.', 'start': 9151.001, 'duration': 0.921}, {'end': 9154.42, 'text': 'And we use the thumb.', 'start': 9153.519, 'duration': 0.901}, {'end': 9158.863, 'text': "Then we're going to have a key for this one also.", 'start': 9156.822, 'duration': 2.041}, {'end': 9163.947, 'text': 'Because we always need to have a key when we are mapping through components like this and display them.', 'start': 9159.023, 'duration': 4.924}, {'end': 9167.67, 'text': 'So the key is going to be just as before the movie.id.', 'start': 9164.407, 'duration': 3.263}, {'end': 9170.732, 'text': "We're going to set it to clickable.", 'start': 9169.311, 'duration': 1.421}, {'end': 9171.813, 'text': "That's going to be true.", 'start': 9170.972, 'duration': 0.841}], 'summary': 'Mapping movies with thumbs and setting keys for each movie.id, making them clickable.', 'duration': 27.916, 'max_score': 9143.897, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE9143897.jpg'}, {'end': 9731.755, 'src': 'embed', 'start': 9704.364, 'weight': 2, 'content': [{'end': 9710.728, 'text': "it's spinning like crazy and of course it's only going to be shown when we fetch data from the API.", 'start': 9704.364, 'duration': 6.364}, {'end': 9713.75, 'text': "but for now we're showing it all the time, but we're going to fix that later.", 'start': 9710.728, 'duration': 3.022}, {'end': 9720.06, 'text': "So that's how you create a really simple spinner with some CSS and style components in React.", 'start': 9715.009, 'duration': 5.051}, {'end': 9723.206, 'text': "In the next video, we're going to start creating the search bar.", 'start': 9720.601, 'duration': 2.605}, {'end': 9731.755, 'text': 'so we created a grid with our thumbs and we have our hero image and we want to create our search bar.', 'start': 9726.232, 'duration': 5.523}], 'summary': 'Creating a simple spinner with css and style components in react, and preparing to create a search bar in the next video.', 'duration': 27.391, 'max_score': 9704.364, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE9704364.jpg'}, {'end': 10334.45, 'src': 'heatmap', 'start': 10072.029, 'weight': 0.943, 'content': [{'end': 10075.731, 'text': 'And when that state changes, it also changes the value in the input box.', 'start': 10072.029, 'duration': 3.702}, {'end': 10081.213, 'text': 'And this is great because then we know that our state is in sync with the actual value in the input field.', 'start': 10076.211, 'duration': 5.002}, {'end': 10084.614, 'text': 'We create a state up here, const.', 'start': 10082.853, 'duration': 1.761}, {'end': 10087.055, 'text': 'We can call it state and set state.', 'start': 10084.994, 'duration': 2.061}, {'end': 10099.557, 'text': "equals, use state, and it's going to be an empty string for starters on our input field.", 'start': 10090.006, 'duration': 9.551}, {'end': 10104.162, 'text': 'ah, it all formatted them like this.', 'start': 10099.557, 'duration': 4.605}, {'end': 10113.892, 'text': "i want to have them like this instead, we're going to have an on change handler equals and for this one i'm going to create an inline function.", 'start': 10104.162, 'duration': 9.73}, {'end': 10120.597, 'text': 'you could also create a function up here for that one if you want to do that instead, but i want to show you how to do things differently.', 'start': 10113.892, 'duration': 6.705}, {'end': 10123.058, 'text': 'so in this case i create an inline function.', 'start': 10120.597, 'duration': 2.461}, {'end': 10126.38, 'text': 'we have the event, or you can just type in e, for example.', 'start': 10123.058, 'duration': 3.322}, {'end': 10129.382, 'text': 'you can name it whatever you want.', 'start': 10126.38, 'duration': 3.002}, {'end': 10137.948, 'text': 'then we set the state with the event dot, current target dot value, and this will give us the value in the input field.', 'start': 10129.382, 'duration': 8.566}, {'end': 10144.444, 'text': 'And we need to have this inline function as we are actually invoking this function here with that value.', 'start': 10139.44, 'duration': 5.004}, {'end': 10145.645, 'text': "Otherwise it won't work.", 'start': 10144.524, 'duration': 1.121}, {'end': 10149.448, 'text': 'So by having this inline function, we can provide this one with a value.', 'start': 10146.146, 'duration': 3.302}, {'end': 10151.05, 'text': "So that's why we have this inline function.", 'start': 10149.468, 'duration': 1.582}, {'end': 10154.533, 'text': "Otherwise it will run this function instantly and that's no good.", 'start': 10151.43, 'duration': 3.103}, {'end': 10161.898, 'text': "So if we, for example, had a function that we didn't want to send in some arguments to, that we just want to trigger on change,", 'start': 10155.073, 'duration': 6.825}, {'end': 10164.139, 'text': 'we can have it like this instead and that will work.', 'start': 10161.898, 'duration': 2.241}, {'end': 10168.321, 'text': 'but in this case we want to send in the argument of the current value.', 'start': 10164.139, 'duration': 4.182}, {'end': 10171.562, 'text': "that's why we have this inline function.", 'start': 10168.321, 'duration': 3.241}, {'end': 10171.882, 'text': 'all right.', 'start': 10171.562, 'duration': 0.32}, {'end': 10172.923, 'text': "so that's the on change.", 'start': 10171.882, 'duration': 1.041}, {'end': 10179.866, 'text': 'and then we set the value to the state and there we have successfully created a control component.', 'start': 10172.923, 'duration': 6.943}, {'end': 10180.786, 'text': 'we can see if it works.', 'start': 10179.866, 'duration': 0.92}, {'end': 10190.179, 'text': 'go back to the browser, type something in and you can see the value here now is controlled by react As soon as we set this value to some state value.', 'start': 10180.786, 'duration': 9.393}, {'end': 10192.601, 'text': 'here we are making this a control component.', 'start': 10190.179, 'duration': 2.422}, {'end': 10200.647, 'text': "And every time it changes, it's going to trigger the set state and it gets the value here and replace the value from the text input in the state.", 'start': 10192.981, 'duration': 7.666}, {'end': 10203.709, 'text': 'And then the value is displayed in the text box itself.', 'start': 10201.027, 'duration': 2.682}, {'end': 10207.992, 'text': "So it's kind of a closed circle here on how things work.", 'start': 10203.789, 'duration': 4.203}, {'end': 10210.594, 'text': 'it goes around in this way.', 'start': 10207.992, 'duration': 2.602}, {'end': 10213.216, 'text': 'now we have our input field, but we want something to happen.', 'start': 10210.594, 'duration': 2.622}, {'end': 10219.241, 'text': "also, we want to set the search term that we're going to create in our hook that we created before.", 'start': 10213.216, 'duration': 6.025}, {'end': 10225.285, 'text': "so we're actually going to create a new state inside our use home fetch.", 'start': 10219.241, 'duration': 6.044}, {'end': 10233.832, 'text': "so up here in the use home fetch hook we're going to create a const, call it search term, capital t, and set search term.", 'start': 10225.285, 'duration': 8.547}, {'end': 10237.654, 'text': "Then it's going to equal useState.", 'start': 10235.694, 'duration': 1.96}, {'end': 10241.815, 'text': 'And we set it as an empty string initially.', 'start': 10238.855, 'duration': 2.96}, {'end': 10244.536, 'text': 'Then we also need to export this one.', 'start': 10242.756, 'duration': 1.78}, {'end': 10247.157, 'text': 'So we export it down here.', 'start': 10245.816, 'duration': 1.341}, {'end': 10249.997, 'text': 'And we only need a setter for this one.', 'start': 10248.377, 'duration': 1.62}, {'end': 10254.458, 'text': 'So we can export the setSearchTerm like this.', 'start': 10250.117, 'duration': 4.341}, {'end': 10255.798, 'text': 'Save the file.', 'start': 10255.018, 'duration': 0.78}, {'end': 10257.679, 'text': 'Go back to the home.js.', 'start': 10255.958, 'duration': 1.721}, {'end': 10262.5, 'text': 'And up here where we use our useHomeFetchHook.', 'start': 10258.979, 'duration': 3.521}, {'end': 10269.312, 'text': 'We can destructure out the setSearchTerm.', 'start': 10263.308, 'duration': 6.004}, {'end': 10270.353, 'text': 'All right.', 'start': 10269.972, 'duration': 0.381}, {'end': 10274.415, 'text': 'And this one is going to be the prop for our search bar.', 'start': 10271.313, 'duration': 3.102}, {'end': 10277.737, 'text': "So I'm going to call this prop setSearchTerm also.", 'start': 10275.116, 'duration': 2.621}, {'end': 10280.019, 'text': 'You can call it whatever you want.', 'start': 10278.518, 'duration': 1.501}, {'end': 10282.38, 'text': 'And then I give it the setSearchTerm.', 'start': 10280.779, 'duration': 1.601}, {'end': 10288.864, 'text': 'So this way we pass this along down to our component, the search bar, so that we can use it in the search bar.', 'start': 10282.44, 'duration': 6.424}, {'end': 10292.667, 'text': "So when this one triggers, when we set the search term, it's going to trigger here.", 'start': 10289.004, 'duration': 3.663}, {'end': 10296.263, 'text': "So it's actually changing the state in our hook here.", 'start': 10294.002, 'duration': 2.261}, {'end': 10301.066, 'text': "That's exactly what we want because then we can use it in our hook when we fetch stuff.", 'start': 10297.324, 'duration': 3.742}, {'end': 10307.87, 'text': 'But in this case, we want to have a slight delay when the user types something in before it tries to fetch the data.', 'start': 10301.686, 'duration': 6.184}, {'end': 10310.071, 'text': 'We can look here in the finished application.', 'start': 10308.21, 'duration': 1.861}, {'end': 10314.821, 'text': 'You can see when I type something in here, i have a slight delay.', 'start': 10310.251, 'duration': 4.57}, {'end': 10319.683, 'text': "otherwise it wouldn't be a good user experience if it just instantly started to fetch data.", 'start': 10314.821, 'duration': 4.862}, {'end': 10321.544, 'text': "so that's why i do it this way instead.", 'start': 10319.683, 'duration': 1.861}, {'end': 10325.045, 'text': 'otherwise we could have used this state to actually fetch the data.', 'start': 10321.544, 'duration': 3.501}, {'end': 10331.088, 'text': "but in our case we want a slight delay and then we set the search term that we're going to use for fetching.", 'start': 10325.045, 'duration': 6.043}, {'end': 10334.45, 'text': "so that's why i have dual states for this one.", 'start': 10331.088, 'duration': 3.362}], 'summary': 'Creating controlled components with react and implementing a slight delay for fetching data.', 'duration': 262.421, 'max_score': 10072.029, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE10072029.jpg'}, {'end': 10492.108, 'src': 'embed', 'start': 10463.658, 'weight': 5, 'content': [{'end': 10471.278, 'text': 'here we can console, log the search term so we can see that something is happening.', 'start': 10463.658, 'duration': 7.62}, {'end': 10474.34, 'text': 'So go back to the application again.', 'start': 10471.819, 'duration': 2.521}, {'end': 10477.821, 'text': 'Yeah, I have a typo somewhere.', 'start': 10474.36, 'duration': 3.461}, {'end': 10479.942, 'text': "Maybe I didn't save the home.", 'start': 10478.602, 'duration': 1.34}, {'end': 10482.223, 'text': 'Save, go back to the browser.', 'start': 10480.543, 'duration': 1.68}, {'end': 10483.244, 'text': 'Yeah, and now it works.', 'start': 10482.444, 'duration': 0.8}, {'end': 10487.786, 'text': "You can see it's really important to save your files because it will break otherwise.", 'start': 10483.284, 'duration': 4.502}, {'end': 10489.647, 'text': 'Be sure to save all the files.', 'start': 10488.226, 'duration': 1.421}, {'end': 10492.108, 'text': 'So if I type in test.', 'start': 10490.787, 'duration': 1.321}], 'summary': 'Demonstrating the importance of saving files in the application, as it can lead to breaking if not done, emphasized on the need to save all files.', 'duration': 28.45, 'max_score': 10463.658, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE10463658.jpg'}, {'end': 10749.652, 'src': 'embed', 'start': 10720.569, 'weight': 1, 'content': [{'end': 10723.47, 'text': 'Do some auto formatting, save it, go back to the browser.', 'start': 10720.569, 'duration': 2.901}, {'end': 10729.833, 'text': 'And you can see that we have the search bar here and now we have to style kind of the inner part of the search bar.', 'start': 10724.091, 'duration': 5.742}, {'end': 10733.014, 'text': 'And we do that in the content.', 'start': 10731.393, 'duration': 1.621}, {'end': 10736.175, 'text': 'Inside the content.', 'start': 10735.114, 'duration': 1.061}, {'end': 10742.797, 'text': "I'm going to set the position to relative because we want to place the icon with an absolute position.", 'start': 10737.675, 'duration': 5.122}, {'end': 10749.652, 'text': 'The max width is going to be, from the variables, we have our max width.', 'start': 10744.949, 'duration': 4.703}], 'summary': 'Styling the inner part of the search bar with a relative position and a max width based on variables.', 'duration': 29.083, 'max_score': 10720.569, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE10720569.jpg'}, {'end': 10853.716, 'src': 'embed', 'start': 10815.655, 'weight': 3, 'content': [{'end': 10816.996, 'text': 'Top 14 pixels.', 'start': 10815.655, 'duration': 1.341}, {'end': 10819.858, 'text': 'And width is going to be 30 pixels.', 'start': 10818.077, 'duration': 1.781}, {'end': 10821.099, 'text': 'Save it.', 'start': 10820.719, 'duration': 0.38}, {'end': 10821.619, 'text': 'Go back.', 'start': 10821.199, 'duration': 0.42}, {'end': 10826.563, 'text': 'And now it seems to align correctly and it also has the correct size.', 'start': 10823.04, 'duration': 3.523}, {'end': 10830.424, 'text': 'Great Then we have the input field itself.', 'start': 10827.324, 'duration': 3.1}, {'end': 10834.086, 'text': 'So down below the IMG type in input.', 'start': 10830.744, 'duration': 3.342}, {'end': 10839.849, 'text': 'We set the font size to 28 pixels in this one.', 'start': 10835.827, 'duration': 4.022}, {'end': 10844.371, 'text': 'Position is going to be absolute.', 'start': 10840.509, 'duration': 3.862}, {'end': 10848.413, 'text': 'Left is 0.', 'start': 10845.832, 'duration': 2.581}, {'end': 10852.235, 'text': 'Margin is 8 pixels and 0.', 'start': 10848.413, 'duration': 3.822}, {'end': 10853.716, 'text': 'Padding is going to be 0, 0, 0 and 60 pixels.', 'start': 10852.235, 'duration': 1.481}], 'summary': 'Adjusted image size to 14x30 pixels and input font size to 28 pixels.', 'duration': 38.061, 'max_score': 10815.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE10815655.jpg'}], 'start': 8740.346, 'title': 'Movie thumbnails and search components', 'summary': 'Covers styling grid, creating thumbnails, a spinner, and a search bar in react. it includes setting max width, css grid syntax, movie thumbnails with fallback images, and implementing delayed fetch. it also addresses creating controlled components, syncing state, and implementing a timer for updating the state.', 'chapters': [{'end': 8805.658, 'start': 8740.346, 'title': 'Styling grid and creating thumbnails', 'summary': 'Covers styling the grid and creating thumbnails for the movie application, including the use of unique keys and the need for styling and thumbnails. the instructor also mentions the use of a plugin for syntax highlighting.', 'duration': 65.312, 'highlights': ['The instructor discusses the need for styling the grid and creating thumbnails for the movie application, emphasizing the importance of a unique key for each item. (relevance: 5)', "The instructor recommends using a plugin called 'vs code - style - components' for syntax highlighting within Visual Studio Code. (relevance: 4)", 'The transcript mentions the use of unique keys to resolve a problem in the application. (relevance: 3)', 'The need for styling the grid and creating thumbnails is highlighted, indicating upcoming content in the next video. (relevance: 2)']}, {'end': 9170.732, 'start': 8805.658, 'title': 'Css grid styling and creating thumbnails', 'summary': 'Covers setting max width, centering div, adding padding, using media query, creating responsive grid with css grid syntax and grid gap, and creating thumbnails with image styling for a movie website.', 'duration': 365.074, 'highlights': ['Creating responsive grid with CSS grid syntax The chapter demonstrates creating a responsive grid using CSS grid syntax, with a neat trick to make it fully responsive, showing five items on each row and adapting to various screen sizes.', 'Setting max width and centering div The chapter explains setting the max width from a variable and centering the div with margin 0 auto, providing a neat margin effect in the browser.', 'Adding padding and using media query The speaker sets padding on the sides and uses a media query to change the font size based on the screen width, enhancing the visual appearance of the webpage.', 'Creating thumbnails with image styling The tutorial covers creating thumbnails for movies by structuring components, importing styled components, and styling the image, laying the foundation for a clickable thumbnail feature.']}, {'end': 9647.283, 'start': 9170.972, 'title': 'Creating movie thumbnails and spinner', 'summary': 'Discusses creating movie thumbnails with fallback images and movie ids, and styling the thumbnails with css, along with creating a spinner component using styled components and css animations.', 'duration': 476.311, 'highlights': ['Creating movie thumbnails with fallback images and movie IDs The chapter discusses creating movie thumbnails with fallback images and movie IDs.', 'Styling the thumbnails using CSS The chapter covers styling the thumbnails using CSS, setting width to 100%, max width to 720 pixels, and applying transition effects.', 'Creating a spinner component using styled components and CSS animations The chapter explains creating a spinner component using styled components and CSS animations, setting border, width, height, and an infinite linear animation.']}, {'end': 10213.216, 'start': 9647.283, 'title': 'Creating a simple spinner and search bar in react', 'summary': 'Covers creating a simple spinner and search bar in react, including importing components, creating a controlled component, and explaining the use of usestate, useeffect, and useref. it also demonstrates the use of svg image for the search icon and setting up style components.', 'duration': 565.933, 'highlights': ['Creating a controlled component in React Explains the process of creating a controlled component in React using useState to control the input field value and onChange event to update the search term, ensuring that the state is in sync with the actual value in the input field.', 'Importing and using useState, useEffect, and useRef Demonstrates the use of useState, useEffect, and useRef for creating a controlled component, triggering state changes, and implementing a trick to avoid executing useEffect on the initial render.', 'Importing SVG image for the search icon Mentions the import of an SVG image for the search icon instead of importing the entire Font Awesome library, showcasing the use of SVG as an alternative.']}, {'end': 10492.108, 'start': 10213.216, 'title': 'Setting search term and implementing delayed fetch', 'summary': 'Explains how to set a search term using usestate and export it, implement a delayed fetch using useeffect and settimeout, and handle cleanup using the return function in the useeffect, ensuring a better user experience with a slight delay of 500 milliseconds for fetching data.', 'duration': 278.892, 'highlights': ["Setting search term using useState and exporting it The chapter explains creating a new state 'search term' using useState and exporting the setSearchTerm, allowing for the setting of the search term for fetching.", 'Implementing delayed fetch using useEffect and setTimeout The chapter demonstrates the use of useEffect and setTimeout to introduce a 500 milliseconds delay before triggering the setSearchTerm for fetching data, ensuring a better user experience.', 'Handling cleanup using the return function in useEffect The chapter emphasizes the importance of clearing the timer on each render using the return function in useEffect, ensuring that multiple timers are not created and improving the efficiency of the application.']}, {'end': 10853.716, 'start': 10493.048, 'title': 'Creating control components in react', 'summary': 'Demonstrates creating a control component in react, syncing the state with the input field, and implementing a timer that triggers every half a second to update the state. it also covers passing data to components using props and styling the search bar.', 'duration': 360.668, 'highlights': ['Demonstrating the use of useRef hook to skip initial render in useEffect By using useRef hook, a mutable value is created to skip the initial render in useEffect, allowing the logic to run only when the user has typed something in. This technique enhances performance and avoids unnecessary fetch calls.', 'Implementing a timer to trigger setSearchTerm every 500 milliseconds A timer is set up to call setSearchTerm and update the state with the value from the input field every 500 milliseconds, ensuring the state remains synced with the input field and providing a seamless user experience.', "Styling the search bar and its inner components The process of styling the search bar and its inner components is detailed, including setting the wrapper and content styles, positioning the icon, and adjusting the input field's appearance for a visually appealing interface."]}], 'duration': 2113.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE8740346.jpg', 'highlights': ['Creating responsive grid with CSS grid syntax and making it fully responsive', 'Setting max width from a variable and centering the div for a neat margin effect', 'Creating movie thumbnails with fallback images and movie IDs', 'Creating a controlled component in React using useState and onChange event', 'Implementing delayed fetch using useEffect and setTimeout for better user experience', 'Demonstrating the use of useRef hook to skip initial render in useEffect for performance enhancement']}, {'end': 12069.487, 'segs': [{'end': 11075.673, 'src': 'embed', 'start': 11048.083, 'weight': 0, 'content': [{'end': 11052.845, 'text': 'So we can set stale to the initial stale here, and that will wipe out the stale.', 'start': 11048.083, 'duration': 4.762}, {'end': 11056.046, 'text': "And that's really all there is to it.", 'start': 11054.446, 'duration': 1.6}, {'end': 11059.007, 'text': 'So we save this file, go back to our application.', 'start': 11056.106, 'duration': 2.901}, {'end': 11060.428, 'text': 'We try to search for something.', 'start': 11059.087, 'duration': 1.341}, {'end': 11063.92, 'text': 'And you can see that it works.', 'start': 11062.719, 'duration': 1.201}, {'end': 11065.702, 'text': 'Now this one changes.', 'start': 11064.601, 'duration': 1.101}, {'end': 11069.466, 'text': 'Because this one will always grab the first element in the array of movies.', 'start': 11065.742, 'duration': 3.724}, {'end': 11070.868, 'text': "And that's fine actually.", 'start': 11069.907, 'duration': 0.961}, {'end': 11072.269, 'text': 'You can have it like this if you want.', 'start': 11070.908, 'duration': 1.361}, {'end': 11075.673, 'text': "But I want to remove this hero image when we're in a search.", 'start': 11072.65, 'duration': 3.023}], 'summary': 'Setting initial stale wipes out the stale, allowing successful search functionality.', 'duration': 27.59, 'max_score': 11048.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE11048083.jpg'}, {'end': 11121.17, 'src': 'embed', 'start': 11094.593, 'weight': 1, 'content': [{'end': 11101.217, 'text': "so now we're checking that we don't have a search term and also that we actually have a first element in the array of movies.", 'start': 11094.593, 'duration': 6.624}, {'end': 11106.64, 'text': "but you can see that it warms here now, and that's because we haven't exported this one from our hook.", 'start': 11101.217, 'duration': 5.423}, {'end': 11111.983, 'text': 'so go back to the hook And down below here we can export this one also.', 'start': 11106.64, 'duration': 5.343}, {'end': 11113.324, 'text': 'Search term.', 'start': 11112.323, 'duration': 1.001}, {'end': 11114.505, 'text': 'Like this.', 'start': 11114.145, 'duration': 0.36}, {'end': 11116.086, 'text': 'Save the hook.', 'start': 11115.386, 'duration': 0.7}, {'end': 11117.867, 'text': 'Go back to the home.js.', 'start': 11116.326, 'duration': 1.541}, {'end': 11121.17, 'text': 'And up here where we destructure out everything from the hook.', 'start': 11118.388, 'duration': 2.782}], 'summary': 'Checking for search term and first element in movies array. export hook to fix warnings.', 'duration': 26.577, 'max_score': 11094.593, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE11094593.jpg'}, {'end': 11578.935, 'src': 'embed', 'start': 11546.943, 'weight': 2, 'content': [{'end': 11551.964, 'text': 'Maybe we can use this one instead on the styles for the search bar.', 'start': 11546.943, 'duration': 5.021}, {'end': 11553.004, 'text': 'Because I think I have.', 'start': 11551.984, 'duration': 1.02}, {'end': 11557.465, 'text': 'Yeah, I have the font size.', 'start': 11555.725, 'duration': 1.74}, {'end': 11562.523, 'text': 'of 28 pixels.', 'start': 11561.062, 'duration': 1.461}, {'end': 11570.569, 'text': 'we can use the variable instead variable font big and see how it looks.', 'start': 11562.523, 'duration': 8.046}, {'end': 11572.551, 'text': 'yeah, i think that looks nice.', 'start': 11570.569, 'duration': 1.982}, {'end': 11574.972, 'text': 'actually, we can use that one instead.', 'start': 11572.551, 'duration': 2.421}, {'end': 11576.794, 'text': "but let's check out the button.", 'start': 11574.972, 'duration': 1.822}, {'end': 11578.195, 'text': 'yeah, you can see that it works.', 'start': 11576.794, 'duration': 1.401}, {'end': 11578.935, 'text': 'it looks great.', 'start': 11578.195, 'duration': 0.74}], 'summary': 'Testing new styles for search bar and button with 28px font size, variable font big, and positive results.', 'duration': 31.992, 'max_score': 11546.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE11546943.jpg'}, {'end': 11652.394, 'src': 'embed', 'start': 11618.609, 'weight': 3, 'content': [{'end': 11621.37, 'text': 'so you could do this in other ways also.', 'start': 11618.609, 'duration': 2.761}, {'end': 11623.731, 'text': 'but this is a quite neat way of doing it.', 'start': 11621.37, 'duration': 2.361}, {'end': 11631.695, 'text': 'we have this state that we set the true or false and when it changes we trigger that use effect and then we can trigger to load more movies.', 'start': 11623.731, 'duration': 7.964}, {'end': 11633.056, 'text': 'we first create a state.', 'start': 11631.695, 'duration': 1.361}, {'end': 11640.119, 'text': 'const is loading more camel casing, as always and then we have the setter.', 'start': 11633.056, 'duration': 7.063}, {'end': 11643.384, 'text': 'set is loading more.', 'start': 11640.119, 'duration': 3.265}, {'end': 11645.746, 'text': "it's going to equal and recall the use state hook.", 'start': 11643.384, 'duration': 2.362}, {'end': 11652.394, 'text': 'we set it to false initially and this one is going to be triggered from the button itself.', 'start': 11645.746, 'duration': 6.648}], 'summary': 'Using state to trigger useeffect for loading more movies.', 'duration': 33.785, 'max_score': 11618.609, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE11618609.jpg'}], 'start': 10857.705, 'title': 'Implementing css, search, button, and state in react', 'summary': 'Covers css styling for input fields, search functionality implementation using useeffect, creation and styling of a button component, and demonstration of state management with usestate and useeffect hooks for optimal user experience and performance.', 'chapters': [{'end': 10918.996, 'start': 10857.705, 'title': 'Css styling for input field', 'summary': 'Explains how to remove the outline from an input field using css, setting the border to zero, width to 95%, height to 40 pixels, and transparent background, while highlighting the removal of the outline and potential styling for mobile devices.', 'duration': 61.291, 'highlights': ['The chapter explains how to remove the outline from an input field using CSS, setting the border to zero, width to 95%, height to 40 pixels, and transparent background.', 'The removal of the outline is highlighted as it is considered not to look good.', 'The potential for styling the input field for mobile devices is mentioned.']}, {'end': 11216.198, 'start': 10918.996, 'title': 'Implementing search functionality', 'summary': 'Covers the implementation of search functionality in the app, including the use of useeffect for initial render and search, wiping out old state before making a new search, and dynamically updating the header based on the search term. additionally, the chapter introduces the plan for creating a load more button.', 'duration': 297.202, 'highlights': ['The implementation of search functionality, including the use of useEffect for initial render and search, is covered in the chapter.', 'Wiping out the old state before making a new search is emphasized to ensure the display of new movies grabbed from the search.', "The dynamic update of the header based on the search term is demonstrated, with the header changing to 'search results' when a search term is present and reverting to 'popular movies' when no search term is specified.", "The plan for creating a load more button is introduced for the next video, indicating upcoming development in the app's functionality."]}, {'end': 11723.665, 'start': 11216.198, 'title': 'Creating and styling button component', 'summary': 'Covers the creation and styling of a button component using styled components, including the logic for loading more movies triggered by the button click.', 'duration': 507.467, 'highlights': ['Creation of button component using styled components The chapter discusses the creation of a button component using styled components, including the creation of a new folder with specific files and the implementation of the button logic and callback function.', 'Styling of the button component The process of styling the button component using CSS properties such as display block, background color, width, height, border radius, font size, margin, transition effects, and hover effects is explained, enhancing the appearance and functionality of the button.', 'Implementation of logic for loading more movies The chapter outlines the implementation of the logic for loading more movies triggered by the button click, involving the use of state hooks, the creation of a new state flag, and the triggering of a useEffect hook to load additional movies.']}, {'end': 12069.487, 'start': 11724.586, 'title': 'React state management & use effect', 'summary': 'Demonstrates the implementation of state management in react, including the use of usestate and useeffect hooks to handle state changes and trigger fetch functions for loading more content, ensuring optimal user experience and performance.', 'duration': 344.901, 'highlights': ['The chapter demonstrates the implementation of state management in React, including the use of useState and useEffect hooks to handle state changes and trigger fetch functions for loading more content, ensuring optimal user experience and performance.', "The code snippet showcases the use of useState to set the state of 'isLoadingMore' to true when a button is clicked, triggering the loading of more content while preventing unnecessary re-rendering.", "The tutorial highlights the use of useEffect to trigger the fetchMovies function when 'isLoadingMore' is true, updating the page number and search term and subsequently setting 'isLoadingMore' to false upon completion, ensuring efficient content loading and management.", 'The discussion also addresses the integration of React Router version 6 for efficient routing and navigation, emphasizing the importance of staying updated with the latest technologies and APIs to ensure optimal learning and development experiences.']}], 'duration': 1211.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE10857705.jpg', 'highlights': ['The chapter demonstrates the implementation of state management in React, including the use of useState and useEffect hooks for optimal user experience and performance.', 'The implementation of search functionality, including the use of useEffect for initial render and search, is covered in the chapter.', 'The creation of button component using styled components is discussed, including the creation of a new folder with specific files and the implementation of the button logic and callback function.', 'The chapter explains how to remove the outline from an input field using CSS, setting the border to zero, width to 95%, height to 40 pixels, and transparent background.']}, {'end': 13773.368, 'segs': [{'end': 12257.388, 'src': 'embed', 'start': 12232.701, 'weight': 2, 'content': [{'end': 12241.005, 'text': 'so app.js, and the first thing we have to do is to actually import all the components we need from the router library, from react router.', 'start': 12232.701, 'duration': 8.304}, {'end': 12245.563, 'text': 'We can mark it here with routing if we want to do that.', 'start': 12242.142, 'duration': 3.421}, {'end': 12246.684, 'text': 'Then we import.', 'start': 12245.844, 'duration': 0.84}, {'end': 12248.285, 'text': 'We have curly brackets.', 'start': 12247.064, 'duration': 1.221}, {'end': 12255.748, 'text': "We're going to import something that's called BrowserRouter, capital B, capital R.", 'start': 12249.045, 'duration': 6.703}, {'end': 12257.388, 'text': 'And this name is a little bit long.', 'start': 12255.748, 'duration': 1.64}], 'summary': 'In app.js, import components from react router, including browserrouter.', 'duration': 24.687, 'max_score': 12232.701, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE12232701.jpg'}, {'end': 12659.822, 'src': 'heatmap', 'start': 12394.655, 'weight': 0.724, 'content': [{'end': 12400.436, 'text': "And then we have routes that's going to wrap our routes because you can have routes in different components if you want to do that.", 'start': 12394.655, 'duration': 5.781}, {'end': 12407.442, 'text': "So let's say that you have a component deep down in your app tree and then you want to create some routes for just that component.", 'start': 12400.876, 'duration': 6.566}, {'end': 12411.365, 'text': 'You can wrap them in this routes component and then you create your routes.', 'start': 12407.902, 'duration': 3.463}, {'end': 12415.149, 'text': "So you don't need to have them here in the top of your application.", 'start': 12411.886, 'duration': 3.263}, {'end': 12418.672, 'text': 'And then you use the route component to actually create your route.', 'start': 12415.549, 'duration': 3.123}, {'end': 12421.895, 'text': "And this route component has a prop that's called path.", 'start': 12418.932, 'duration': 2.963}, {'end': 12425.996, 'text': 'So we can specify the path where we want to show a specific component.', 'start': 12422.315, 'duration': 3.681}, {'end': 12428.997, 'text': "And in this case, it's a forward slash because it's the home page.", 'start': 12426.076, 'duration': 2.921}, {'end': 12431.518, 'text': "And then we have another prop that's called element.", 'start': 12429.317, 'duration': 2.201}, {'end': 12433.039, 'text': "It's going to equal.", 'start': 12432.238, 'duration': 0.801}, {'end': 12434.879, 'text': 'And here we can give it our component.', 'start': 12433.219, 'duration': 1.66}, {'end': 12438.381, 'text': 'And we want to give it the home component like this.', 'start': 12435.379, 'duration': 3.002}, {'end': 12442.122, 'text': 'And then we also have to self-close the route component.', 'start': 12439.481, 'duration': 2.641}, {'end': 12445.383, 'text': 'That means that we can remove this home component here.', 'start': 12442.762, 'duration': 2.621}, {'end': 12449.047, 'text': "so that's the first route.", 'start': 12447.346, 'duration': 1.701}, {'end': 12452.008, 'text': 'if we want, we can save this to see that it still works.', 'start': 12449.047, 'duration': 2.961}, {'end': 12457.331, 'text': 'go back to the application, reload it and you can see that it works.', 'start': 12452.008, 'duration': 5.323}, {'end': 12459.352, 'text': "so that's nice.", 'start': 12457.331, 'duration': 2.021}, {'end': 12462.414, 'text': "then we're going to create another route.", 'start': 12459.352, 'duration': 3.062}, {'end': 12470.319, 'text': "so we use the route component again, we set the path and this one is going to be forward slash, And then we're going to do something special here,", 'start': 12462.414, 'duration': 7.905}, {'end': 12476.303, 'text': "because when we're going to fetch an individual movie, we need the movie ID and we can send along route params for that.", 'start': 12470.319, 'duration': 5.984}, {'end': 12481.687, 'text': 'And we create a route param for the route by specifying a colon and then we name it.', 'start': 12477.064, 'duration': 4.623}, {'end': 12483.068, 'text': 'So movie ID.', 'start': 12482.288, 'duration': 0.78}, {'end': 12491.577, 'text': "So this means when we create a link on the thumbnails that we're going to do soon, we can send along the ID for the movie and that ID.", 'start': 12484.275, 'duration': 7.302}, {'end': 12495.498, 'text': 'we can grab that in our movie component and grab data from the API.', 'start': 12491.577, 'duration': 3.921}, {'end': 12501.2, 'text': 'And you can name this to whatever you want, because this is a route param that you decide what you want it to be named.', 'start': 12495.999, 'duration': 5.201}, {'end': 12503.561, 'text': 'So I want it to be named movie ID.', 'start': 12501.62, 'duration': 1.941}, {'end': 12510.143, 'text': 'And then we specify the element on this one and we give it the movie component.', 'start': 12505.141, 'duration': 5.002}, {'end': 12513.204, 'text': 'And we also close the route component.', 'start': 12511.243, 'duration': 1.961}, {'end': 12516.468, 'text': "We haven't actually import the movie components.", 'start': 12514.346, 'duration': 2.122}, {'end': 12517.188, 'text': 'We can do that.', 'start': 12516.528, 'duration': 0.66}, {'end': 12525.794, 'text': 'Import movie from dot forward slash components movie.', 'start': 12518.549, 'duration': 7.245}, {'end': 12534.8, 'text': 'And then we can also import not found from dot forward slash components and not found.', 'start': 12526.334, 'duration': 8.466}, {'end': 12536.962, 'text': 'There you have it.', 'start': 12536.381, 'duration': 0.581}, {'end': 12540.222, 'text': "So that's the route for the individual movie.", 'start': 12538.342, 'duration': 1.88}, {'end': 12540.942, 'text': 'We save it.', 'start': 12540.322, 'duration': 0.62}, {'end': 12544.803, 'text': "And we can't actually click on the thumbnails now because we haven't created that one.", 'start': 12541.463, 'duration': 3.34}, {'end': 12549.624, 'text': 'But what we can do is go up here, create a forward slash, and then we type in some ID.', 'start': 12544.843, 'duration': 4.781}, {'end': 12553.125, 'text': 'And you can see that it types out movie here now.', 'start': 12550.804, 'duration': 2.321}, {'end': 12555.445, 'text': "And that is because it's showing the movie component.", 'start': 12553.285, 'duration': 2.16}, {'end': 12556.625, 'text': "So we know that it's working.", 'start': 12555.485, 'duration': 1.14}, {'end': 12560.006, 'text': "So that's sweet.", 'start': 12559.246, 'duration': 0.76}, {'end': 12563.227, 'text': "And then if we remove this one, we'll show the homepage instead.", 'start': 12560.626, 'duration': 2.601}, {'end': 12565.607, 'text': 'All right.', 'start': 12565.307, 'duration': 0.3}, {'end': 12571.006, 'text': "We're going to create one last route, and that is for a not found component.", 'start': 12567.503, 'duration': 3.503}, {'end': 12576.05, 'text': 'So we create a route with a path of forward slash and an asterisk.', 'start': 12571.146, 'duration': 4.904}, {'end': 12580.954, 'text': "And this will make sure that we show the not found component on any other route that don't exist.", 'start': 12576.11, 'duration': 4.844}, {'end': 12585.278, 'text': 'And we set the element to the not found component.', 'start': 12581.435, 'duration': 3.843}, {'end': 12589.462, 'text': 'And we also self-close this route.', 'start': 12587.98, 'duration': 1.482}, {'end': 12590.783, 'text': 'Save it.', 'start': 12590.362, 'duration': 0.421}, {'end': 12592.144, 'text': 'Go back to the application.', 'start': 12590.923, 'duration': 1.221}, {'end': 12595.427, 'text': 'We know that it works if we specify an ID.', 'start': 12593.125, 'duration': 2.302}, {'end': 12598.742, 'text': 'like this it shows the movie component.', 'start': 12596.601, 'duration': 2.141}, {'end': 12603.084, 'text': 'but what happens if we create another route here like this?', 'start': 12598.742, 'duration': 4.342}, {'end': 12605.525, 'text': "yeah, then it shows the not found and that's super sweet,", 'start': 12603.084, 'duration': 2.441}, {'end': 12613.488, 'text': 'because then we have a fallback component if the user tries to go somewhere else in our application.', 'start': 12605.525, 'duration': 7.963}, {'end': 12617.45, 'text': "so that's the route setup in our app.js file.", 'start': 12613.488, 'duration': 3.962}, {'end': 12625.342, 'text': "then if we move inside of our header component and the index.js file, we're going to create a link on the logo up here.", 'start': 12617.45, 'duration': 7.892}, {'end': 12636.232, 'text': 'we have to import curly brackets and the component is called link from react dash router, dash dom, and this is actually quite simple.', 'start': 12625.342, 'duration': 10.89}, {'end': 12641.237, 'text': 'it works the similar way as the a tag does in html.', 'start': 12636.232, 'duration': 5.005}, {'end': 12648.724, 'text': "so we have a link component, we specify two and in this case it's gonna lead to the home page.", 'start': 12641.237, 'duration': 7.487}, {'end': 12654.977, 'text': 'so we have a forward slash and inside the link component we just put our logo like this.', 'start': 12648.724, 'duration': 6.253}, {'end': 12659.822, 'text': 'so we wrap it inside of the link component and this will make sure that we can link to the home page.', 'start': 12654.977, 'duration': 4.845}], 'summary': 'Creating routes and components for a react application, including path specifications and route parameters for movie data.', 'duration': 265.167, 'max_score': 12394.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE12394655.jpg'}, {'end': 13026.167, 'src': 'embed', 'start': 12979.64, 'weight': 0, 'content': [{'end': 12986.194, 'text': "We know that it works and then we can move on and we're going to start by fetching the data from the API so that we have something to work with.", 'start': 12979.64, 'duration': 6.554}, {'end': 12991.586, 'text': "all right, we're going to create our second custom hook.", 'start': 12989.045, 'duration': 2.541}, {'end': 12999.43, 'text': "now i'm not going to create it first in the movie component and then move it to a custom hook, because now we know how we can create a custom hook,", 'start': 12991.586, 'duration': 7.844}, {'end': 13003.792, 'text': "so that's why i'm doing it instantly in that one instead.", 'start': 12999.43, 'duration': 4.362}, {'end': 13014.739, 'text': "so in the hooks folder let's create a new file that's called use movie fetch, capital m, capital f and dot js and, as i told you before,", 'start': 13003.792, 'duration': 10.947}, {'end': 13019.222, 'text': "it's important to name your hooks with use before the name.", 'start': 13014.739, 'duration': 4.483}, {'end': 13026.167, 'text': "this is the actual file name, so it doesn't matter here, but it's important that you name your actual hook with use before.", 'start': 13019.222, 'duration': 6.945}], 'summary': "Developing a custom hook 'usemoviefetch' to fetch data from api for movie component.", 'duration': 46.527, 'max_score': 12979.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE12979640.jpg'}, {'end': 13689.12, 'src': 'heatmap', 'start': 13430.481, 'weight': 0.947, 'content': [{'end': 13433.443, 'text': 'And as this is ES6 syntax, we just need to type out this.', 'start': 13430.481, 'duration': 2.962}, {'end': 13436.965, 'text': 'It will create it like this automatically.', 'start': 13433.603, 'duration': 3.362}, {'end': 13440.047, 'text': 'All right.', 'start': 13436.985, 'duration': 3.062}, {'end': 13448.011, 'text': "Then we're going to set loading to false like this.", 'start': 13442.608, 'duration': 5.403}, {'end': 13452.434, 'text': 'Auto format it.', 'start': 13451.573, 'duration': 0.861}, {'end': 13454.435, 'text': 'And this should be it for this use effect.', 'start': 13452.494, 'duration': 1.941}, {'end': 13456.276, 'text': 'Actually, I think for now.', 'start': 13454.695, 'duration': 1.581}, {'end': 13460.425, 'text': 'We need to return something from our hook also.', 'start': 13458.203, 'duration': 2.222}, {'end': 13463.667, 'text': 'I return an object with a state.', 'start': 13462.066, 'duration': 1.601}, {'end': 13466.409, 'text': 'Loading And the error.', 'start': 13464.447, 'duration': 1.962}, {'end': 13469.571, 'text': 'Save it.', 'start': 13469.091, 'duration': 0.48}, {'end': 13471.873, 'text': 'Go back to the movie.js file.', 'start': 13469.771, 'duration': 2.102}, {'end': 13473.574, 'text': 'And we can see if it works.', 'start': 13471.893, 'duration': 1.681}, {'end': 13476.036, 'text': 'So down here I marked it with hook.', 'start': 13474.174, 'duration': 1.862}, {'end': 13477.597, 'text': "I'm going to import.", 'start': 13476.816, 'duration': 0.781}, {'end': 13479.778, 'text': 'Use movie fetch.', 'start': 13478.157, 'duration': 1.621}, {'end': 13485.342, 'text': 'From Dot dot forward slash hooks.', 'start': 13480.999, 'duration': 4.343}, {'end': 13487.664, 'text': 'And use movie fetch.', 'start': 13486.123, 'duration': 1.541}, {'end': 13492.127, 'text': 'And then we can try out our hook and see if we get some data back.', 'start': 13489.346, 'duration': 2.781}, {'end': 13498.208, 'text': 'So at the top of our component, we can destructure out the properties that we exported from the hook.', 'start': 13492.907, 'duration': 5.301}, {'end': 13503.329, 'text': 'I also want to show you how you can rename something when you destructure it.', 'start': 13500.308, 'duration': 3.021}, {'end': 13508.27, 'text': 'So we have the state that we destructured and we have a colon and I want to call it movie instead.', 'start': 13503.429, 'duration': 4.841}, {'end': 13509.57, 'text': "So that's how you rename it.", 'start': 13508.49, 'duration': 1.08}, {'end': 13513.011, 'text': 'And then we destructure out the loading and the error.', 'start': 13510.83, 'duration': 2.181}, {'end': 13518.024, 'text': 'And we call our useMovieFetchHook.', 'start': 13515.962, 'duration': 2.062}, {'end': 13520.066, 'text': 'And we also want to give it the movie ID.', 'start': 13518.104, 'duration': 1.962}, {'end': 13522.928, 'text': "But we haven't really got the movie ID.", 'start': 13520.986, 'duration': 1.942}, {'end': 13527.552, 'text': 'So how do we get it? Yeah, and this is from the route that we have up here.', 'start': 13523.008, 'duration': 4.544}, {'end': 13531.035, 'text': 'As I told you about before, we have the ID up here in the route.', 'start': 13527.672, 'duration': 3.363}, {'end': 13534.017, 'text': 'So we can get that one from the router.', 'start': 13531.055, 'duration': 2.962}, {'end': 13537.5, 'text': 'We have to import something up here.', 'start': 13535.939, 'duration': 1.561}, {'end': 13539.142, 'text': 'So we import curly brackets.', 'start': 13537.52, 'duration': 1.622}, {'end': 13541.364, 'text': "It's a hook that's called useParams.", 'start': 13539.442, 'duration': 1.922}, {'end': 13548.297, 'text': 'From react-router-dom.', 'start': 13544.912, 'duration': 3.385}, {'end': 13552.582, 'text': 'So with this hook, we can grab that param that we have in the URL.', 'start': 13549.498, 'duration': 3.084}, {'end': 13561.094, 'text': 'So we do that before we destructure out the state and everything here from our useMovieFetch hook to make sure that we have the ID to send into that hook.', 'start': 13553.263, 'duration': 7.831}, {'end': 13567.777, 'text': 'the const and then we destructure out the movieId equals and we call the useParams.', 'start': 13562.654, 'duration': 5.123}, {'end': 13569.258, 'text': "That's everything you have to do.", 'start': 13568.158, 'duration': 1.1}, {'end': 13575.062, 'text': 'And this one is named movieId because we named it that in the app.js file.', 'start': 13570.019, 'duration': 5.043}, {'end': 13576.803, 'text': 'We called it movieId.', 'start': 13575.623, 'duration': 1.18}, {'end': 13580.566, 'text': 'If we called it something else here, we have to destructure it with that name.', 'start': 13576.823, 'duration': 3.743}, {'end': 13587.13, 'text': 'But this will give us that ID that we have up in the row here in our application.', 'start': 13581.647, 'duration': 5.483}, {'end': 13589.352, 'text': 'So hopefully this will work.', 'start': 13588.211, 'duration': 1.141}, {'end': 13597.057, 'text': 'We tried to console, log out the movie, and this is actually the state, but i renamed it to movie.', 'start': 13589.492, 'duration': 7.565}, {'end': 13601.5, 'text': "so that's why i can console, log it out as movie, save it.", 'start': 13597.057, 'duration': 4.443}, {'end': 13605.162, 'text': 'so we try it out, click a movie and ah, nothing shows up.', 'start': 13601.5, 'duration': 3.662}, {'end': 13608.424, 'text': 'and i think i know why we go inside.', 'start': 13605.162, 'duration': 3.262}, {'end': 13610.205, 'text': 'the use movie fetch hook.', 'start': 13608.424, 'duration': 1.781}, {'end': 13615.488, 'text': 'we also need to actually invoke this function here.', 'start': 13610.205, 'duration': 5.283}, {'end': 13621.271, 'text': 'so we do that at the bottom of our use effect hook, fetch movie.', 'start': 13615.488, 'duration': 5.783}, {'end': 13628.599, 'text': 'Did I name it fetch data?', 'start': 13626.958, 'duration': 1.641}, {'end': 13630.999, 'text': 'We can rename it to fetch movie instead.', 'start': 13628.739, 'duration': 2.26}, {'end': 13632.44, 'text': 'Like this.', 'start': 13632.04, 'duration': 0.4}, {'end': 13636.741, 'text': 'And make sure to invoke it at the bottom of the hook.', 'start': 13634.44, 'duration': 2.301}, {'end': 13638.242, 'text': 'Save it.', 'start': 13637.842, 'duration': 0.4}, {'end': 13639.482, 'text': 'Go back to the application.', 'start': 13638.282, 'duration': 1.2}, {'end': 13641.583, 'text': 'And now you can see that we have the data here.', 'start': 13639.702, 'duration': 1.881}, {'end': 13648.385, 'text': 'So we have all the actors and we also have the directors that we filtered out here.', 'start': 13644.284, 'duration': 4.101}, {'end': 13649.085, 'text': "So that's great.", 'start': 13648.445, 'duration': 0.64}, {'end': 13651.486, 'text': 'All the data that we need is here.', 'start': 13649.865, 'duration': 1.621}, {'end': 13661.203, 'text': 'I want to show you one more thing here and that is if we were to remove this FetchMovie function outside of the UseEffect.', 'start': 13653.916, 'duration': 7.287}, {'end': 13664.246, 'text': 'Like this.', 'start': 13663.846, 'duration': 0.4}, {'end': 13674.456, 'text': "It tells us here that we need to specify the FetchMovie and that's okay because it's outside the UseEffect now.", 'start': 13669.471, 'duration': 4.985}, {'end': 13676.258, 'text': 'So we do that.', 'start': 13675.697, 'duration': 0.561}, {'end': 13679.277, 'text': 'And then it gives us another warning here.', 'start': 13677.657, 'duration': 1.62}, {'end': 13683.018, 'text': 'And this is because this function will get recreated on each render.', 'start': 13679.317, 'duration': 3.701}, {'end': 13687.38, 'text': "And this use effect will think that it's a new function it gets on each render.", 'start': 13683.359, 'duration': 4.021}, {'end': 13689.12, 'text': 'And it will create an infinity loop.', 'start': 13687.5, 'duration': 1.62}], 'summary': 'Using es6 syntax, the transcript explains how to use the usemoviefetch hook to fetch movie data and handle state, including examples of renaming and destructuring. it also demonstrates how to obtain the movie id from the url and how to avoid infinite loops when working with the useeffect hook.', 'duration': 258.639, 'max_score': 13430.481, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE13430481.jpg'}, {'end': 13567.777, 'src': 'embed', 'start': 13537.52, 'weight': 3, 'content': [{'end': 13539.142, 'text': 'So we import curly brackets.', 'start': 13537.52, 'duration': 1.622}, {'end': 13541.364, 'text': "It's a hook that's called useParams.", 'start': 13539.442, 'duration': 1.922}, {'end': 13548.297, 'text': 'From react-router-dom.', 'start': 13544.912, 'duration': 3.385}, {'end': 13552.582, 'text': 'So with this hook, we can grab that param that we have in the URL.', 'start': 13549.498, 'duration': 3.084}, {'end': 13561.094, 'text': 'So we do that before we destructure out the state and everything here from our useMovieFetch hook to make sure that we have the ID to send into that hook.', 'start': 13553.263, 'duration': 7.831}, {'end': 13567.777, 'text': 'the const and then we destructure out the movieId equals and we call the useParams.', 'start': 13562.654, 'duration': 5.123}], 'summary': 'Using useparams hook in react-router-dom to grab url parameter.', 'duration': 30.257, 'max_score': 13537.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE13537520.jpg'}], 'start': 12069.487, 'title': 'React router and web application development', 'summary': 'Covers the update of react router from version 5 to version 6, highlighting a significant reduction in bundle size from 28.4kb to 8.5kb minified. it also includes creating routes and components for a web application, creating a movie page with hooks, states, and effects, and extracting movie data from an api using javascript.', 'chapters': [{'end': 12117.086, 'start': 12069.487, 'title': 'React router version 6 update', 'summary': 'Highlights the update of react router from version 5 to version 6, emphasizing a significant reduction in bundle size from 28.4kb to 8.5kb minified, and directs viewers to reacttraining.com or google for more information.', 'duration': 47.599, 'highlights': ['The bundle size of React Router version 6 is only 8.5 kilobytes minified, significantly smaller than the 28.4 kilobytes of version 5, demonstrating a drastic reduction in package size.', "Viewers are directed to reacttraining.com or encouraged to Google 'React Router version 6' for more detailed information on the update and its usage."]}, {'end': 12774.154, 'start': 12117.086, 'title': 'Creating routes and components', 'summary': 'Covers creating routes and components for a web application, including creating two new components, importing necessary components, setting up routes for the home page, individual movie page, and a not found component, and creating links using react router.', 'duration': 657.068, 'highlights': ["Setting up routes for the home page, individual movie page, and a not found component The chapter covers setting up routes for the home page ('/') using the route component, creating a route for the individual movie page with a route param for the movie ID, and setting up a route for a not found component to serve as a fallback for non-existing routes.", "Creating two new components for routing The transcript describes the creation of two new components, 'not found.js' and 'movie.js', within the components folder to be used for routing purposes.", "Importing necessary components for routing It discusses the process of importing components like BrowserRouter, Routes, and Route from the 'react-router-dom' library to facilitate the routing functionality.", "Creating links using React Router The chapter demonstrates the creation of links using the React Router's Link component within the header and thumb components, allowing for navigation between different pages of the web application."]}, {'end': 13311.823, 'start': 12774.154, 'title': 'Creating a movie page and fetching data', 'summary': 'Covers creating a link component for thumbnails, implementing routing, importing components and creating a movie page with hooks, states, and effects. it also covers fetching movie data and credits from the api.', 'duration': 537.669, 'highlights': ['The chapter covers creating a link component for thumbnails, implementing routing, and ensuring the functionality to click on the thumbnail. It also demonstrates importing components and creating a movie page with hooks and states.', 'Fetching movie data and credits from the API is demonstrated using custom hooks, states, and effects, with detailed explanation of logic and error handling.', 'The process of fetching movie data and credits involves setting loading states, handling errors, and utilizing async functions to ensure data retrieval from the API.']}, {'end': 13773.368, 'start': 13311.823, 'title': 'Movie data extraction', 'summary': 'Details the process of extracting director and cast data from an api response using javascript, including filtering out directors, setting state, and using hooks to fetch and display movie data.', 'duration': 461.545, 'highlights': ['The chapter details the process of extracting director and cast data from an API response using JavaScript. The chapter discusses the process of retrieving director and cast data from an API using JavaScript, indicating a focus on data extraction.', "The process includes filtering out directors from the crew to obtain the director's name. The process involves utilizing the filter method in JavaScript to extract the director's name from the crew data, showcasing a specific data filtering technique.", 'The state is set using the extracted movie data, including actors and directors. The extracted movie data, encompassing actors and directors, is utilized to set the state, demonstrating the use of state management in JavaScript.', 'Hooks are employed to fetch and display movie data, with a discussion on preventing infinite loops using the useCallback hook. Hooks are utilized to fetch and display movie data, with a specific focus on avoiding infinite loops by implementing the useCallback hook, showcasing practical use cases of React hooks.']}], 'duration': 1703.881, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE12069487.jpg', 'highlights': ['The bundle size of React Router version 6 is only 8.5 kilobytes minified, significantly smaller than the 28.4 kilobytes of version 5, demonstrating a drastic reduction in package size.', "Setting up routes for the home page, individual movie page, and a not found component The chapter covers setting up routes for the home page ('/') using the route component, creating a route for the individual movie page with a route param for the movie ID, and setting up a route for a not found component to serve as a fallback for non-existing routes.", 'The chapter covers creating a link component for thumbnails, implementing routing, and ensuring the functionality to click on the thumbnail. It also demonstrates importing components and creating a movie page with hooks and states.', 'The chapter details the process of extracting director and cast data from an API response using JavaScript. The chapter discusses the process of retrieving director and cast data from an API using JavaScript, indicating a focus on data extraction.']}, {'end': 15436.763, 'segs': [{'end': 13877.761, 'src': 'embed', 'start': 13835.616, 'weight': 1, 'content': [{'end': 13845.875, 'text': "and then we export the const that's called content and it equals a styled dot div.", 'start': 13835.616, 'duration': 10.259}, {'end': 13852.499, 'text': 'auto, format it and save it, go back inside of the index.js file in the breadcrumb folder.', 'start': 13845.875, 'duration': 6.624}, {'end': 13857.342, 'text': 'first we import react from react.', 'start': 13852.499, 'duration': 4.843}, {'end': 13867.828, 'text': "we're going to import the link from react-router-dom because we want to be able to link back to the home page.", 'start': 13857.342, 'duration': 10.486}, {'end': 13877.761, 'text': 'then we have our styles import wrapper and content from dot forward,', 'start': 13867.828, 'duration': 9.933}], 'summary': 'Transcript: import react and link, export content as styled div.', 'duration': 42.145, 'max_score': 13835.616, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE13835616.jpg'}, {'end': 13940.24, 'src': 'embed', 'start': 13912.795, 'weight': 0, 'content': [{'end': 13917.016, 'text': "And where do we think it's going to link? Probably guessed it.", 'start': 13912.795, 'duration': 4.221}, {'end': 13919.977, 'text': "It's going to be forward slash because we want to link to the home page.", 'start': 13917.056, 'duration': 2.921}, {'end': 13923.318, 'text': 'This is the first element in the breadcrumb menu.', 'start': 13920.917, 'duration': 2.401}, {'end': 13927.819, 'text': "So we're going to have a regular span here and it's going to say home.", 'start': 13924.338, 'duration': 3.481}, {'end': 13930.955, 'text': "So that's the first one.", 'start': 13929.974, 'duration': 0.981}, {'end': 13932.695, 'text': 'Then after the link.', 'start': 13931.555, 'duration': 1.14}, {'end': 13935.877, 'text': 'We create another span.', 'start': 13934.617, 'duration': 1.26}, {'end': 13938.279, 'text': "And we're going to have a pipe.", 'start': 13935.897, 'duration': 2.382}, {'end': 13940.24, 'text': 'Like this.', 'start': 13939.819, 'duration': 0.421}], 'summary': 'Creating a breadcrumb menu with a link to home page.', 'duration': 27.445, 'max_score': 13912.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE13912795.jpg'}, {'end': 14311.178, 'src': 'embed', 'start': 14289.48, 'weight': 2, 'content': [{'end': 14298.187, 'text': 'move back to your code editor and inside the components folder create a new folder that we call movie info capital m, capital i,', 'start': 14289.48, 'duration': 8.707}, {'end': 14309.597, 'text': "and then we create a new file, index.js, and then another file inside of that folder that's called movie info dot styles, dot js,", 'start': 14298.187, 'duration': 11.41}, {'end': 14311.178, 'text': 'and we scaffold out the styles.', 'start': 14309.597, 'duration': 1.581}], 'summary': "Create 'movie info' folder in components with 'index.js' and 'styles.js' files.", 'duration': 21.698, 'max_score': 14289.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE14289480.jpg'}, {'end': 14727.819, 'src': 'embed', 'start': 14673.588, 'weight': 3, 'content': [{'end': 14676.75, 'text': 'So just see if it works with some other stuff here.', 'start': 14673.588, 'duration': 3.162}, {'end': 14677.991, 'text': 'Yeah, it does.', 'start': 14676.81, 'duration': 1.181}, {'end': 14678.552, 'text': "So that's great.", 'start': 14678.011, 'duration': 0.541}, {'end': 14683.135, 'text': 'Move back inside of the index.js file in the movie info folder.', 'start': 14679.554, 'duration': 3.581}, {'end': 14687.996, 'text': "So we created our thumb and just below the thumb we're going to have our text.", 'start': 14683.155, 'duration': 4.841}, {'end': 14691.156, 'text': 'So we use the text style component.', 'start': 14689.056, 'duration': 2.1}, {'end': 14694.817, 'text': "And inside of that one we're going to have an h1 tag.", 'start': 14692.337, 'duration': 2.48}, {'end': 14698.758, 'text': "And we're going to grab the movie.title for that one.", 'start': 14694.837, 'duration': 3.921}, {'end': 14702.319, 'text': 'Then we have an h3 tag.', 'start': 14700.758, 'duration': 1.561}, {'end': 14704.719, 'text': "And it's going to say plot.", 'start': 14702.339, 'duration': 2.38}, {'end': 14707.98, 'text': 'Or something else if you want that.', 'start': 14706.56, 'duration': 1.42}, {'end': 14719.273, 'text': "next we have a p tag and we're going to grab the movie dot overview and that's the short text about the movie.", 'start': 14708.866, 'duration': 10.407}, {'end': 14724.597, 'text': 'and inside of here i actually going to create some regular classes with class name because i want to show that also.', 'start': 14719.273, 'duration': 5.324}, {'end': 14727.819, 'text': 'you could create style components also if you want to do that.', 'start': 14724.597, 'duration': 3.222}], 'summary': 'Creating movie info display with title, plot, and overview using text style component.', 'duration': 54.231, 'max_score': 14673.588, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE14673588.jpg'}], 'start': 13774.568, 'title': 'Creating movie page components', 'summary': 'Explains creating a breadcrumb component, movie info component, movie components, and styling movie components and web content using css, resulting in a functional movie display with a rating of 5.1 and director details, aiming for flexibility and responsiveness.', 'chapters': [{'end': 14244.977, 'start': 13774.568, 'title': 'Creating breadcrumb component for movie page', 'summary': 'Explains the process of creating a breadcrumb component for the movie page, including creating the folder and files, styling the components, and integrating it into the movie page, with the intention to style it in the next video.', 'duration': 470.409, 'highlights': ['The chapter explains the process of creating a breadcrumb component for the movie page, including creating the folder and files, styling the components, and integrating it into the movie page, with the intention to style it in the next video.', 'The breadcrumb component is created with a two-level breadcrumb structure, featuring a home button to go back to the home page and displaying the movie title.', 'The breadcrumb component is styled by setting the wrapper as a flex container with specified dimensions, background color, and alignment, and styling the content and span elements with flex display, width, padding, font size, and color.', 'The chapter concludes with the intention to give the breadcrumb component some styling in the next video.']}, {'end': 14556.018, 'start': 14246.317, 'title': 'Creating movie info component', 'summary': 'Covers the creation of the movie info component, involving the creation of jsx and styling, and emphasizes the reuse of components for flexibility.', 'duration': 309.701, 'highlights': ['Creation of movie info component The largest individual component in the application is the movie info component, involving the creation of JSX and styling.', 'Importing and reusing components Emphasizes the reuse of components in React to increase flexibility and avoid creating similar components.', 'Styling the components Involves the creation of wrapper, content, and text components with specific styling patterns.']}, {'end': 14921.418, 'start': 14556.018, 'title': 'Creating movie components', 'summary': 'Demonstrates the creation of movie components including the image, text, rating, and directors using props and javascript expressions to display movie information and styling, resulting in a functional movie display with a rating of 5.1 and director details.', 'duration': 365.4, 'highlights': ['The chapter demonstrates the creation of movie components including the image, text, rating, and directors using props and JavaScript expressions to display movie information and styling. The chapter covers the creation of movie components like image, text, rating, and directors using props and JavaScript expressions for displaying movie information and styling.', 'The resulting movie display shows a rating of 5.1 and director details, providing a functional movie component. The resulting movie display demonstrates a rating of 5.1 and director details, showcasing a functional movie component.', 'The chapter emphasizes the use of props and JavaScript expressions for dynamic rendering. The chapter highlights the significance of props and JavaScript expressions for dynamic rendering of movie components.']}, {'end': 15120.981, 'start': 14924.42, 'title': 'Styling movieinfo component', 'summary': 'Covers styling the movieinfo component, setting backgrounds based on props, creating inline arrow functions, and adding animations for a fade effect.', 'duration': 196.561, 'highlights': ["Setting background based on prop 'backdrop' using a turner operator, with a fallback to black if backdrop does not exist, to ensure dynamic styling based on prop (quantifiable: dynamic background based on prop)", "Creating inline arrow function to check if the backdrop exists and displaying it as background if true, or setting background to black if backdrop doesn't exist, ensuring conditional rendering of background (quantifiable: conditional rendering based on prop)", 'Adding animation to the MovieInfo component to create a fade effect using keyframes, with opacity changing from 0 to 1 over one second, enhancing visual appeal and user experience (quantifiable: animation duration)']}, {'end': 15436.763, 'start': 15120.981, 'title': 'Styling web content with css', 'summary': 'Covers the process of styling web content using css, including setting display properties, adjusting color and size, and utilizing media queries for responsiveness.', 'duration': 315.782, 'highlights': ['Setting display properties and max-width for web content, including border radius and media queries for responsiveness.', 'Styling the text content with specific width, padding, color, and overflow properties.', 'Defining classes for elements such as Rating-Director and setting their display and alignment properties.']}], 'duration': 1662.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE13774568.jpg', 'highlights': ['The resulting movie display shows a rating of 5.1 and director details, providing a functional movie component.', "Setting background based on prop 'backdrop' using a turner operator, with a fallback to black if backdrop does not exist, to ensure dynamic styling based on prop (quantifiable: dynamic background based on prop)", 'Creation of movie info component The largest individual component in the application is the movie info component, involving the creation of JSX and styling.', 'The chapter demonstrates the creation of movie components including the image, text, rating, and directors using props and JavaScript expressions to display movie information and styling.', 'Importing and reusing components Emphasizes the reuse of components in React to increase flexibility and avoid creating similar components.']}, {'end': 16422.536, 'segs': [{'end': 15553.93, 'src': 'embed', 'start': 15523.92, 'weight': 0, 'content': [{'end': 15530.982, 'text': 'Export const content equals styled.div and double backticks.', 'start': 15523.92, 'duration': 7.062}, {'end': 15534.742, 'text': 'Save the file and go back to the index.js file.', 'start': 15531.942, 'duration': 2.8}, {'end': 15537.123, 'text': 'We import React from React.', 'start': 15535.282, 'duration': 1.841}, {'end': 15544.182, 'text': "And then we're going to use some helper functions that are provided for us.", 'start': 15541.3, 'duration': 2.882}, {'end': 15551.549, 'text': 'If we take a look in the helpers.js file, you can see that I have one function for calculating the time and one for converting the money.', 'start': 15544.583, 'duration': 6.966}, {'end': 15553.93, 'text': 'So this one, for example, the convert money.', 'start': 15552.109, 'duration': 1.821}], 'summary': 'The transcript discusses using helper functions for time calculation and money conversion in react.', 'duration': 30.01, 'max_score': 15523.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE15523920.jpg'}, {'end': 15608.578, 'src': 'embed', 'start': 15571.122, 'weight': 2, 'content': [{'end': 15577.623, 'text': 'so move back to the index.js file and i mark it with helpers.', 'start': 15571.122, 'duration': 6.501}, {'end': 15583.905, 'text': 'import calc time, camel casing and convert money.', 'start': 15577.623, 'duration': 6.282}, {'end': 15589.487, 'text': 'also, camel casing from dot dot forward slash and dot dot forward slash.', 'start': 15583.905, 'duration': 5.582}, {'end': 15592.692, 'text': 'again, help us All right.', 'start': 15589.487, 'duration': 3.205}, {'end': 15594.433, 'text': 'Then we have our styles.', 'start': 15593.332, 'duration': 1.101}, {'end': 15599.495, 'text': 'So we import curly brackets and wrapper and content.', 'start': 15594.833, 'duration': 4.662}, {'end': 15604.917, 'text': 'From dot forward slash movie info bar styles.', 'start': 15601.916, 'duration': 3.001}, {'end': 15606.037, 'text': 'All right.', 'start': 15605.637, 'duration': 0.4}, {'end': 15608.578, 'text': 'And then we can create our component.', 'start': 15607.118, 'duration': 1.46}], 'summary': 'In the index.js file, helpers are imported for calc time, camel casing, and convert money. styles are also imported for the movie info bar.', 'duration': 37.456, 'max_score': 15571.122, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE15571122.jpg'}, {'end': 15895.98, 'src': 'embed', 'start': 15857.375, 'weight': 5, 'content': [{'end': 15860.916, 'text': 'I set the max width of a variable.', 'start': 15857.375, 'duration': 3.541}, {'end': 15863.818, 'text': 'From the variable max width.', 'start': 15862.297, 'duration': 1.521}, {'end': 15869.874, 'text': 'I set the width to 100%.', 'start': 15867.873, 'duration': 2.001}, {'end': 15873.894, 'text': 'And the margin is going to be 0 in order.', 'start': 15869.874, 'duration': 4.02}, {'end': 15878.556, 'text': "Then we have that class that's called Column.", 'start': 15875.915, 'duration': 2.641}, {'end': 15879.796, 'text': 'So .column.', 'start': 15878.956, 'duration': 0.84}, {'end': 15883.837, 'text': "That's the one, if you remember, that we have here.", 'start': 15881.996, 'duration': 1.841}, {'end': 15885.077, 'text': 'The class name, Column.', 'start': 15883.877, 'duration': 1.2}, {'end': 15890.359, 'text': "And I'm also going to display that one as a flex.", 'start': 15888.338, 'duration': 2.021}, {'end': 15893.539, 'text': 'Flexbox is a really handy tool in CSS.', 'start': 15890.939, 'duration': 2.6}, {'end': 15895.98, 'text': 'Align items is going to be sender.', 'start': 15894.3, 'duration': 1.68}], 'summary': 'Set max width to 100%, margin to 0, and display .column as flex.', 'duration': 38.605, 'max_score': 15857.375, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE15857375.jpg'}, {'end': 16168.511, 'src': 'embed', 'start': 16136.275, 'weight': 4, 'content': [{'end': 16144.381, 'text': 'right. then we just need to export default actor and our component is good to go.', 'start': 16136.275, 'duration': 8.106}, {'end': 16157.745, 'text': 'so go back to the movie.js file, import it up here, import actor from dot forward slash actor, All right.', 'start': 16144.381, 'duration': 13.364}, {'end': 16166.21, 'text': "And then move down to our JSX and just below the movie info bar, we're going to show these actors and we're going to show them inside of our grid.", 'start': 16158.486, 'duration': 7.724}, {'end': 16168.511, 'text': 'So we first display our grid.', 'start': 16166.57, 'duration': 1.941}], 'summary': "Movie.js component needs to export default actor and import actor from './actor'.", 'duration': 32.236, 'max_score': 16136.275, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE16136275.jpg'}, {'end': 16295.436, 'src': 'embed', 'start': 16243.341, 'weight': 1, 'content': [{'end': 16248.207, 'text': 'So we check if we have an actor.profile underscore path.', 'start': 16243.341, 'duration': 4.866}, {'end': 16254.213, 'text': "And then we have a question mark, and we're going to return our nice little URL.", 'start': 16249.79, 'duration': 4.423}, {'end': 16260.417, 'text': 'So I have double back ticks, dollar sign, and I have curly brackets, and I grab the image base URL.', 'start': 16254.673, 'duration': 5.744}, {'end': 16267.222, 'text': 'And then directly after that, I have another dollar sign, curly brackets, and I grab my poster size.', 'start': 16260.637, 'duration': 6.585}, {'end': 16276.028, 'text': "And then I have a third dollar sign and curly brackets, and I'm going to grab actor.profile underscore path.", 'start': 16268.022, 'duration': 8.006}, {'end': 16279.063, 'text': 'Be very careful with the spelling here.', 'start': 16277.182, 'duration': 1.881}, {'end': 16282.586, 'text': "It's very easy to get a typo when you do stuff like this.", 'start': 16279.384, 'duration': 3.202}, {'end': 16284.267, 'text': 'Then we have our colon.', 'start': 16283.227, 'duration': 1.04}, {'end': 16287.69, 'text': "And if we don't have a profile path, we give it a no image.", 'start': 16284.628, 'duration': 3.062}, {'end': 16294.215, 'text': 'And then below here, we need to close that component also.', 'start': 16289.631, 'duration': 4.584}, {'end': 16295.436, 'text': 'Do some auto formatting.', 'start': 16294.295, 'duration': 1.141}], 'summary': 'Code snippet extracts actor profile path and generates a url with image base url and poster size.', 'duration': 52.095, 'max_score': 16243.341, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE16243341.jpg'}], 'start': 15436.763, 'title': 'Creating movie and actor components', 'summary': "Covers the process of creating a movie info bar component, including the folder and file structure and the initial styles and components setup, and illustrates the creation of a movie info bar component that displays the running time, budget, and revenue, with further instructions for styling the component. additionally, it covers the creation of an actor component, styling of actors' grid, and the display of actors' information, achieving a functional application capable of showing actors' details and images.", 'chapters': [{'end': 15523.78, 'start': 15436.763, 'title': 'Creating movie info bar component', 'summary': 'Covers the process of creating the movie info bar component, including the folder and file structure and the initial styles and components setup.', 'duration': 87.017, 'highlights': ['Creating the movie info bar component with running time, budget and revenue The video demonstrates the creation of the movie info bar component, showcasing running time, budget, and revenue.', "Setting up folder and file structure for the component The process involves creating a folder named 'movie info bar' and files like index.js and movie info bar styles.js to establish the structure.", 'Initial setup of styles using styled components The initial styles are set up using styled components, with the creation of wrapper and content components for the movie info bar.']}, {'end': 15975.584, 'start': 15523.92, 'title': 'Movie info bar component', 'summary': 'Illustrates the creation of a movie info bar component that displays the running time, budget, and revenue, with helper functions used to calculate time and convert money, and further instructions for styling the component.', 'duration': 451.664, 'highlights': ['The movie info bar component is created to display running time, budget, and revenue using helper functions for time calculation and money conversion. The chapter illustrates the creation of a movie info bar component that displays the running time, budget, and revenue, with helper functions used to calculate time and convert money.', 'Helper functions for calculating time and converting money are provided, with the convert money function specifically set for converting amounts into US dollars. The chapter mentions the availability of helper functions for calculating time and converting money, with a specific function tailored to convert amounts into US dollars.', 'Instructions are given for importing the movie info bar component and providing it with appropriate props for time, budget, and revenue. The chapter provides instructions for importing the movie info bar component and assigning it the necessary props for time, budget, and revenue.', 'Styling instructions are provided for the movie info bar component, including the wrapper, content, and column elements, along with a media query for responsiveness. The chapter outlines styling instructions for the movie info bar component, covering the wrapper, content, and column elements, and includes a media query for responsiveness.']}, {'end': 16422.536, 'start': 15975.584, 'title': 'React application actor component', 'summary': "Covers the creation of an actor component, styling of actors' grid, and the display of actors' information, achieving a functional application capable of showing actors' details and images.", 'duration': 446.952, 'highlights': ["The actor component is created with the ability to display the actor's name, character, and image URL, contributing to the completion of the basic functionality of the application. The actor component is created with the ability to display the actor's name, character, and image URL, contributing to the completion of the basic functionality of the application.", "Detailed styling is applied to the actor component, including setting the color, background, border radius, padding, text align for the wrapper, and defining the display, width, height, object-fit, and border-radius for the image, enhancing the visual presentation of the actors' grid. Detailed styling is applied to the actor component, including setting the color, background, border radius, padding, text align for the wrapper, and defining the display, width, height, object-fit, and border-radius for the image, enhancing the visual presentation of the actors' grid.", "The actors' grid is populated with actors' information, including their names, characters, and images, achieving a functional display of actors' details within the application. The actors' grid is populated with actors' information, including their names, characters, and images, achieving a functional display of actors' details within the application."]}], 'duration': 985.773, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE15436763.jpg', 'highlights': ['Creating the movie info bar component with running time, budget and revenue', 'Setting up folder and file structure for the component', 'Initial setup of styles using styled components', 'The movie info bar component is created to display running time, budget, and revenue using helper functions for time calculation and money conversion', 'Helper functions for calculating time and converting money are provided, with the convert money function specifically set for converting amounts into US dollars', 'Instructions are given for importing the movie info bar component and providing it with appropriate props for time, budget, and revenue', 'Styling instructions are provided for the movie info bar component, including the wrapper, content, and column elements, along with a media query for responsiveness', "The actor component is created with the ability to display the actor's name, character, and image URL, contributing to the completion of the basic functionality of the application", "Detailed styling is applied to the actor component, including setting the color, background, border radius, padding, text align for the wrapper, and defining the display, width, height, object-fit, and border-radius for the image, enhancing the visual presentation of the actors' grid", "The actors' grid is populated with actors' information, including their names, characters, and images, achieving a functional display of actors' details within the application"]}, {'end': 17253.033, 'segs': [{'end': 16455.824, 'src': 'embed', 'start': 16423.936, 'weight': 0, 'content': [{'end': 16426.016, 'text': "There's something wrong here with the background.", 'start': 16423.936, 'duration': 2.08}, {'end': 16429.296, 'text': "Yeah, and that's because I have a typo.", 'start': 16427.037, 'duration': 2.259}, {'end': 16431.757, 'text': 'It should say border-radius.', 'start': 16429.357, 'duration': 2.4}, {'end': 16433.098, 'text': 'Like that.', 'start': 16432.637, 'duration': 0.461}, {'end': 16434.558, 'text': 'Not radius.', 'start': 16433.457, 'duration': 1.101}, {'end': 16436.353, 'text': 'Save it.', 'start': 16435.973, 'duration': 0.38}, {'end': 16436.874, 'text': 'Go back.', 'start': 16436.433, 'duration': 0.441}, {'end': 16438.354, 'text': 'And there you have it.', 'start': 16437.734, 'duration': 0.62}, {'end': 16442.657, 'text': "Let's make sure that it works on all devices.", 'start': 16439.115, 'duration': 3.542}, {'end': 16443.317, 'text': 'And it does.', 'start': 16442.857, 'duration': 0.46}, {'end': 16446.438, 'text': 'Sweet, sweet, sweet.', 'start': 16445.098, 'duration': 1.34}, {'end': 16449.14, 'text': 'And that concludes the basic stuff for this application.', 'start': 16446.598, 'duration': 2.542}, {'end': 16455.824, 'text': "In the next video, we're going to talk about prop types and how you can type check the props that you send in to your components.", 'start': 16449.741, 'duration': 6.083}], 'summary': 'Fixed typo, implemented border-radius, confirmed compatibility, completed basic application setup.', 'duration': 31.888, 'max_score': 16423.936, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE16423936.jpg'}, {'end': 16999.775, 'src': 'embed', 'start': 16969.82, 'weight': 1, 'content': [{'end': 16970.8, 'text': 'We can skip that one.', 'start': 16969.82, 'duration': 0.98}, {'end': 16971.881, 'text': 'We have the hero image.', 'start': 16970.94, 'duration': 0.941}, {'end': 16974.042, 'text': 'And this one have three of them.', 'start': 16972.641, 'duration': 1.401}, {'end': 16980.025, 'text': 'We import PropTypes, capital P, from prop-types.', 'start': 16975.142, 'duration': 4.883}, {'end': 16991.228, 'text': 'below the component we type in hero image, dot, prop types, lowercase p.', 'start': 16983.482, 'duration': 7.746}, {'end': 16994.03, 'text': 'we have our object and we have the image.', 'start': 16991.228, 'duration': 2.802}, {'end': 16998.374, 'text': 'we check against the prop types with capital p dot string.', 'start': 16994.03, 'duration': 4.344}, {'end': 16999.775, 'text': 'all of these are going to be strings.', 'start': 16998.374, 'duration': 1.401}], 'summary': 'Component has three hero images with proptypes for string validation.', 'duration': 29.955, 'max_score': 16969.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE16969820.jpg'}], 'start': 16423.936, 'title': 'React proptypes and type checking', 'summary': 'Introduces react proptypes for type checking props, comparing its functionality with typescript and covering deeper prop type validation syntaxes, including object checking, exact checking, and verifying arrays and objects for various components.', 'chapters': [{'end': 16608.707, 'start': 16423.936, 'title': 'React proptypes and type checking', 'summary': 'Introduces react proptypes for type checking props in react components, emphasizing its usage when not using typescript and comparing its functionality with typescript.', 'duration': 184.771, 'highlights': ['React PropTypes is used for type checking the props sent into the components, and it is recommended for non-TypeScript users to ensure type safety.', 'The chapter provides examples of how to use PropTypes to check for string, number, boolean, and object types for props, and it mentions the ability to perform shape validation for object properties.', 'The tutorial also emphasizes the advantages of using TypeScript for type checking, highlighting that it eliminates the need for PropTypes.']}, {'end': 17253.033, 'start': 16608.707, 'title': 'Deeper prop type validation and usage', 'summary': 'Covers the deeper prop type validation syntaxes, including checking objects with warnings on extra properties, exact checking, and verifying arrays and objects to ensure they contain only specified data types. it also demonstrates how to use proptypes to validate props for various components in the application.', 'duration': 644.326, 'highlights': ['The chapter covers the deeper prop type validation syntaxes, including checking objects with warnings on extra properties, exact checking, and verifying arrays and objects to ensure they contain only specified data types. The transcript provides insights into performing deeper prop type validation, such as checking objects with warnings on extra properties, exact checking, and ensuring arrays and objects contain only specified data types.', 'Demonstrates how to use PropTypes to validate props for various components in the application. The transcript demonstrates the usage of PropTypes to validate props for different components, including checking for strings, numbers, booleans, and functions, with specific examples for each component.']}], 'duration': 829.097, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE16423936.jpg', 'highlights': ['The chapter covers the deeper prop type validation syntaxes, including checking objects with warnings on extra properties, exact checking, and verifying arrays and objects to ensure they contain only specified data types.', 'The tutorial also emphasizes the advantages of using TypeScript for type checking, highlighting that it eliminates the need for PropTypes.', 'React PropTypes is used for type checking the props sent into the components, and it is recommended for non-TypeScript users to ensure type safety.', 'The chapter provides examples of how to use PropTypes to check for string, number, boolean, and object types for props, and it mentions the ability to perform shape validation for object properties.']}, {'end': 18788.817, 'segs': [{'end': 17912.813, 'src': 'embed', 'start': 17890.209, 'weight': 4, 'content': [{'end': 17899.19, 'text': 'save the file, go back to the browser and you can already see it when i save the file, it that it that it wrote the home state here for us.', 'start': 17890.209, 'duration': 8.981}, {'end': 17906.752, 'text': 'so we have the results here and we can actually go back to the code and do some console logging.', 'start': 17899.19, 'duration': 7.562}, {'end': 17912.813, 'text': 'so up here in the search and initial inside the if statement, where we grab from the session storage,', 'start': 17906.752, 'duration': 6.061}], 'summary': 'Transcript demonstrates file saving and session storage usage.', 'duration': 22.604, 'max_score': 17890.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE17890209.jpg'}, {'end': 18385.573, 'src': 'embed', 'start': 18356.154, 'weight': 0, 'content': [{'end': 18360.836, 'text': "so that's what we're going to do in the next video.", 'start': 18356.154, 'duration': 4.682}, {'end': 18367.437, 'text': "i'm going to show you two ways in this video how to deploy your site to netlify, and the first one is going to be really easy actually,", 'start': 18360.836, 'duration': 6.601}, {'end': 18374.347, 'text': "because if you log into your account at netlify and you're at this dashboard side down below at the bottom,", 'start': 18367.437, 'duration': 6.91}, {'end': 18380.35, 'text': 'you will have this little zone here where you can drop your site, want to deploy a new site without connecting to git.', 'start': 18374.347, 'duration': 6.003}, {'end': 18385.573, 'text': 'drag and drop your site folder here, and this is really sweet with natlify, actually.', 'start': 18380.35, 'duration': 5.223}], 'summary': 'Demonstrating two easy ways to deploy a site to netlify, including drag and drop feature.', 'duration': 29.419, 'max_score': 18356.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE18356154.jpg'}, {'end': 18565.967, 'src': 'embed', 'start': 18539.001, 'weight': 1, 'content': [{'end': 18547.381, 'text': 'all right, it seems to be working back to the terminal and if we read here, we can add the dash dash prod flag if we want to go live with it.', 'start': 18539.001, 'duration': 8.38}, {'end': 18555.643, 'text': 'so we run netlify, deploy dash dash prod and this will make it go live.', 'start': 18547.381, 'duration': 8.262}, {'end': 18557.924, 'text': "yeah, of course i shouldn't have space.", 'start': 18555.643, 'duration': 2.281}, {'end': 18565.967, 'text': 'it should be dash dash prod like this, and the publish directory is just as before dot, forward, slash,', 'start': 18557.924, 'duration': 8.043}], 'summary': "To deploy live, use 'netlify deploy --prod' command from the terminal.", 'duration': 26.966, 'max_score': 18539.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE18539001.jpg'}], 'start': 17253.033, 'title': 'Utilizing session storage and deploying to netlify', 'summary': 'Covers the importance of prop types, session storage for state persistence, session storage management in react, and deploying to netlify. it emphasizes proper data validation, state persistence, and optimizing user experience, providing practical guidance for the audience.', 'chapters': [{'end': 17291.715, 'start': 17253.033, 'title': 'Introduction to prop types', 'summary': 'Covers the importance of prop types in react, emphasizing the need to incorporate prop types when creating components to ensure proper data validation and reduce potential errors. the speaker also highlights the significance of learning about react before diving into prop types, but still aims to provide a foundational understanding for the audience.', 'duration': 38.682, 'highlights': ['The speaker emphasizes the importance of incorporating prop types when creating components to ensure proper data validation and reduce potential errors, stressing the habit of always implementing prop types for components that receive props.', 'The speaker notes the decision to save the topic of prop types for last, aiming to avoid confusion before the audience had learned more about React, which is a logical approach for effective learning and comprehension.', 'The speaker expresses the intention to provide a foundational understanding of prop types without delving too deeply into complex checks, indicating a practical and accessible approach to learning about prop types.']}, {'end': 17708.358, 'start': 17292.415, 'title': 'Session storage for state persistence', 'summary': 'Explains how to optimize state persistence using session storage, highlighting the differences between local and session storage, the process of reading and writing data to session storage, and the use of session storage for persisting state for the homepage.', 'duration': 415.943, 'highlights': ['The differences between local and session storage Local storage persists until manually removed, while session storage is wiped out after each session, ensuring that the data changes with each session.', 'The process of reading and writing data to session storage The process involves creating a function to read from session storage and checking for existing session state before retrieving data from the API, and converting data to and from JSON when interacting with session storage.', 'The use of session storage for persisting state for the homepage The chapter explains how to persist the state in session storage for the homepage, creating a function to read from session storage, and considering conditions for reading and writing to session storage based on search terms.']}, {'end': 18125.849, 'start': 17710.398, 'title': 'Session storage management in react', 'summary': 'Discusses managing session storage in react, including retrieving and setting state from session storage, writing to session storage, and persisting state for individual movies. it emphasizes avoiding unnecessary api calls and optimizing user experience.', 'duration': 415.451, 'highlights': ['Persisting state for individual movies in session storage The transcript discusses storing individual movie states in session storage, emphasizing the importance of persisting state for each movie to optimize user experience and avoid unnecessary API calls.', 'Writing to session storage The chapter explains the process of writing to session storage, including converting state to a string using JSON.stringify and setting the item using setItem method, with an emphasis on optimizing user experience and avoiding unnecessary API calls.', 'Retrieving and setting state from session storage The transcript covers the retrieval of state from session storage and setting the state with the retrieved data, highlighting the importance of managing session storage to optimize user experience and minimize API calls.']}, {'end': 18788.817, 'start': 18126.41, 'title': 'Utilizing session storage and deploying to netlify', 'summary': 'Explains how to utilize session storage to persist state in the application, demonstrated by instantly grabbing and saving movies. additionally, it details two methods of deploying the application to netlify: drag-and-drop on the netlify dashboard and using the netlify cli for continuous deployment from github.', 'duration': 662.407, 'highlights': ['Utilizing session storage to persist the state in the application, allowing instant grabbing and saving of movies The chapter demonstrates how to use session storage to persist the state in the application, enabling the instant grabbing and saving of movies, enhancing the user experience.', 'Two methods of deploying the application to Netlify: drag-and-drop on the Netlify dashboard and using the Netlify CLI for continuous deployment from GitHub The chapter explains two methods of deploying the application to Netlify: the first involves drag-and-drop on the Netlify dashboard for easy deployment, while the second method uses the Netlify CLI for continuous deployment from GitHub, ensuring automatic build and publish upon pushing changes to the repository.']}], 'duration': 1535.784, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE17253033.jpg', 'highlights': ['The speaker emphasizes the importance of incorporating prop types for proper data validation and reducing potential errors.', 'The differences between local and session storage: Local storage persists until manually removed, while session storage is wiped out after each session.', 'Persisting state for individual movies in session storage to optimize user experience and avoid unnecessary API calls.', 'Utilizing session storage to persist the state in the application, allowing instant grabbing and saving of movies.', 'Two methods of deploying the application to Netlify: drag-and-drop on the Netlify dashboard and using the Netlify CLI for continuous deployment from GitHub.']}, {'end': 20325.027, 'segs': [{'end': 19165.414, 'src': 'embed', 'start': 19140.892, 'weight': 5, 'content': [{'end': 19148.235, 'text': "So we destructure this one out from the props because we send in this function here that's going to trigger when we do a search.", 'start': 19140.892, 'duration': 7.343}, {'end': 19149.795, 'text': 'Then we have our timeout.', 'start': 19148.755, 'duration': 1.04}, {'end': 19152.376, 'text': "It's the one here.", 'start': 19151.636, 'duration': 0.74}, {'end': 19154.697, 'text': 'So copy this one, move it inside of there.', 'start': 19152.676, 'duration': 2.021}, {'end': 19160.849, 'text': "Instead of const timer we're going to set this one to this timeout that we created up here.", 'start': 19156.385, 'duration': 4.464}, {'end': 19165.414, 'text': 'So this dot timeout is going to equal this one here.', 'start': 19160.869, 'duration': 4.545}], 'summary': 'Destructure function from props, set timeout trigger for search.', 'duration': 24.522, 'max_score': 19140.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE19140892.jpg'}, {'end': 19223.068, 'src': 'embed', 'start': 19194.683, 'weight': 8, 'content': [{'end': 19196.843, 'text': 'So we grab that property from our state.', 'start': 19194.683, 'duration': 2.16}, {'end': 19202.665, 'text': 'And instead of the state here, we give it the value.', 'start': 19199.044, 'duration': 3.621}, {'end': 19205.206, 'text': 'Like this.', 'start': 19204.826, 'duration': 0.38}, {'end': 19213.686, 'text': "So every time we type something in, we're going to set the state, and that will update the component, and it will trigger this one.", 'start': 19207.585, 'duration': 6.101}, {'end': 19216.667, 'text': 'We clear the current timeout, and then we set a new one.', 'start': 19214.166, 'duration': 2.501}, {'end': 19223.068, 'text': 'And at every 500 milliseconds, we will trigger this search function, just as we did before.', 'start': 19217.487, 'duration': 5.581}], 'summary': 'Updating state triggers component update; search function triggered every 500ms.', 'duration': 28.385, 'max_score': 19194.683, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE19194683.jpg'}, {'end': 19502.62, 'src': 'embed', 'start': 19473.238, 'weight': 3, 'content': [{'end': 19474.059, 'text': 'Below the state.', 'start': 19473.238, 'duration': 0.821}, {'end': 19475.701, 'text': 'We have to remove const.', 'start': 19474.46, 'duration': 1.241}, {'end': 19478.744, 'text': "fetchMovies It's the same here.", 'start': 19477.102, 'duration': 1.642}, {'end': 19485.614, 'text': "Here we have to do something else because we don't have this state as separate states now.", 'start': 19481.107, 'duration': 4.507}, {'end': 19487.137, 'text': 'So we remove this once.', 'start': 19485.634, 'duration': 1.503}, {'end': 19489.461, 'text': 'And this.setState.', 'start': 19487.718, 'duration': 1.743}, {'end': 19491.364, 'text': 'We have our object.', 'start': 19490.562, 'duration': 0.802}, {'end': 19493.287, 'text': 'We set the error to false.', 'start': 19491.945, 'duration': 1.342}, {'end': 19495.15, 'text': 'And we set loading.', 'start': 19494.188, 'duration': 0.962}, {'end': 19502.62, 'text': "the true like this and here you can see we're only changing the properties that we want to change.", 'start': 19497.076, 'duration': 5.544}], 'summary': 'Removing const, setting error to false, and changing loading to true in the object.', 'duration': 29.382, 'max_score': 19473.238, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE19473238.jpg'}, {'end': 19825.598, 'src': 'embed', 'start': 19790.542, 'weight': 9, 'content': [{'end': 19795.683, 'text': 'So up here, as the first line in the random method, I have a const.', 'start': 19790.542, 'duration': 5.141}, {'end': 19802.044, 'text': 'I destructure out the search term, movies, loading, and error.', 'start': 19797.103, 'duration': 4.941}, {'end': 19804.905, 'text': 'Equals this.state.', 'start': 19803.265, 'duration': 1.64}, {'end': 19810.286, 'text': 'Alright So that will fix a few things.', 'start': 19804.925, 'duration': 5.361}, {'end': 19818.091, 'text': "Here we have to change state because it's going to be from the movies.results.", 'start': 19813.988, 'duration': 4.103}, {'end': 19825.598, 'text': 'And I do that on all three of these movies.', 'start': 19821.414, 'duration': 4.184}], 'summary': 'In the random method, the state is changed to movies.results, fixing issues.', 'duration': 35.056, 'max_score': 19790.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE19790542.jpg'}, {'end': 19978.59, 'src': 'embed', 'start': 19948.114, 'weight': 1, 'content': [{'end': 19956.677, 'text': 'we have the same functionality in the application itself, but we have refactored the home page to use the class component instead and, as you can see,', 'start': 19948.114, 'duration': 8.563}, {'end': 19963.54, 'text': "i think there's a lot more code here and i think it's actually not that easy to to separate out things.", 'start': 19956.677, 'duration': 6.863}, {'end': 19968.602, 'text': "so that's why i prefer to use functional component and use state hook and use effect instead.", 'start': 19963.54, 'duration': 5.062}, {'end': 19978.59, 'text': "I don't really like this way of doing it anymore, especially with a state, because you have to nest a lot of stuff here as you only have one state.", 'start': 19969.966, 'duration': 8.624}], 'summary': 'Refactored home page to class component, prefers functional component for simplicity and less nesting.', 'duration': 30.476, 'max_score': 19948.114, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE19948114.jpg'}, {'end': 20293.225, 'src': 'embed', 'start': 20262.534, 'weight': 0, 'content': [{'end': 20267.376, 'text': "so now we have access to a prop that's called params.", 'start': 20262.534, 'duration': 4.842}, {'end': 20277.938, 'text': "so i destructure that one out because we're going to need the movie id like this equals this dot props, dot params,", 'start': 20267.376, 'duration': 10.562}, {'end': 20280.639, 'text': 'and that will grab that one for us.', 'start': 20277.938, 'duration': 2.701}, {'end': 20284.561, 'text': 'all right, these ones are going to be the same and this one also set state.', 'start': 20280.639, 'duration': 3.922}, {'end': 20293.225, 'text': 'we have to change this one, this one also this dot set state, and the state is going to be movie.', 'start': 20284.561, 'duration': 8.664}], 'summary': "Destructured 'params' prop to obtain 'movie id' for state change.", 'duration': 30.691, 'max_score': 20262.534, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE20262534.jpg'}], 'start': 18788.817, 'title': 'Refactoring to class components in react', 'summary': 'Covers the process of publishing on netlify, refactoring an application using class components, usage of lifecycle methods, state management, benefits, challenges, and significance of refactoring, spreading the previous state, handling search and loading more movies, restructuring logic from functional to class components, and usage of lifecycle methods and hooks for state management.', 'chapters': [{'end': 18995.383, 'start': 18788.817, 'title': 'Publishing on netlify & refactoring with class components', 'summary': 'Explains the process of publishing on netlify and refactoring an application using class components, highlighting the advantages and challenges of class components and the significance of refactoring.', 'duration': 206.566, 'highlights': ['The chapter concludes the main part of the course and introduces bonus content. The chapter concludes the main part of the course and introduces bonus content for further learning.', 'The instructor plans to demonstrate the refactoring of the application using class components and mentions upcoming topics on using TypeScript and the Movie Database API. The instructor outlines the plan to demonstrate refactoring the application using class components and mentions upcoming topics on using TypeScript and the Movie Database API for further enhancement.', 'The instructor emphasizes the continued relevance of class components in many existing code bases despite the popularity of functional components with hooks. The instructor highlights the continued relevance of class components in many existing code bases, despite the popularity of functional components with hooks, emphasizing their significance in the industry.']}, {'end': 19523.314, 'start': 18995.383, 'title': 'Refactoring to class components and lifecycle methods', 'summary': "Explains the usage of lifecycle methods in a class component in react, particularly focusing on 'componentdidupdate' and the refactoring of search bar and home component. it also covers the use of state, props, and the restructuring of logic from functional to class components.", 'duration': 527.931, 'highlights': ["The chapter explains the usage of lifecycle methods in a class component in React, particularly focusing on 'componentDidUpdate' and the refactoring of search bar and home component. Explains the importance of lifecycle methods, specifically 'componentDidUpdate', for class components in React and the restructuring of search bar and home components.", 'It covers the use of state, props, and the restructuring of logic from functional to class components. Details the usage of state and props in class components and the process of restructuring logic from functional to class components.']}, {'end': 19863.579, 'start': 19523.314, 'title': 'React class components state management', 'summary': 'Discusses setting state in class components, including spreading the previous state, handling search and loading more movies, and using callback functions for state updates and fetching data from the movie database api.', 'duration': 340.265, 'highlights': ['Setting state in class components by spreading the previous state and merging the new data from the movie database API.', 'Handling search functionality by resetting the movies to initial state and triggering a callback function to fetch the movies when the search term is updated.', 'Implementing the function to load more movies by incrementing the page and providing the search term if in a search.', 'Destructuring the search term, movies, loading, and error from the state inside the render method.']}, {'end': 20325.027, 'start': 19863.579, 'title': 'Refactoring to class components', 'summary': 'Covers the process of refactoring functional components to class components in react, highlighting the challenges and benefits, and explaining the use of lifecycle methods and hooks for state management.', 'duration': 461.448, 'highlights': ['The chapter demonstrates the refactoring of functional components to class components in React, emphasizing the challenges and benefits of this approach. The process of refactoring functional components to class components is highlighted, showcasing the challenges and benefits of this approach in React development.', 'The use of lifecycle methods, such as componentDidMount, for triggering actions when a component mounts, is explained and exemplified. The explanation and demonstration of using the componentDidMount lifecycle method to trigger actions upon component mounting are provided, enhancing understanding of React component lifecycle.', 'The preference for functional components and state hooks over class components for easier state management and separation of concerns is expressed, citing the difficulty of nesting state in class components. The preference for functional components and state hooks over class components is expressed, citing the challenges of nesting state in class components and advocating for easier state management and separation of concerns.']}], 'duration': 1536.21, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE18788817.jpg', 'highlights': ['The instructor outlines the plan to demonstrate refactoring the application using class components and mentions upcoming topics on using TypeScript and the Movie Database API for further enhancement.', 'The instructor highlights the continued relevance of class components in many existing code bases, despite the popularity of functional components with hooks, emphasizing their significance in the industry.', "Explains the importance of lifecycle methods, specifically 'componentDidUpdate', for class components in React and the restructuring of search bar and home components.", 'Details the usage of state and props in class components and the process of restructuring logic from functional to class components.', 'Setting state in class components by spreading the previous state and merging the new data from the movie database API.', 'Handling search functionality by resetting the movies to initial state and triggering a callback function to fetch the movies when the search term is updated.', 'Implementing the function to load more movies by incrementing the page and providing the search term if in a search.', 'The process of refactoring functional components to class components is highlighted, showcasing the challenges and benefits of this approach in React development.', 'The explanation and demonstration of using the componentDidMount lifecycle method to trigger actions upon component mounting are provided, enhancing understanding of React component lifecycle.', 'The preference for functional components and state hooks over class components is expressed, citing the challenges of nesting state in class components and advocating for easier state management and separation of concerns.']}, {'end': 21782.02, 'segs': [{'end': 20522.455, 'src': 'embed', 'start': 20498.256, 'weight': 1, 'content': [{'end': 20504.561, 'text': "and there's a lot of code base out there that hasn't been refactor and you probably shouldn't do it for all of the applications either.", 'start': 20498.256, 'duration': 6.305}, {'end': 20510.366, 'text': 'But TypeScript is great if you have quite a large application and you want to keep track on types.', 'start': 20505.262, 'duration': 5.104}, {'end': 20517.131, 'text': "And it's really great also because it's kind of like to have a second coder beside you that tells you what you do wrong.", 'start': 20510.446, 'duration': 6.685}, {'end': 20518.392, 'text': 'Meanwhile, you code.', 'start': 20517.451, 'duration': 0.941}, {'end': 20522.455, 'text': "So it's a great way to write a lot more errorless code.", 'start': 20518.712, 'duration': 3.743}], 'summary': 'Typescript is great for large applications, acting like a second coder to help write errorless code.', 'duration': 24.199, 'max_score': 20498.256, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE20498256.jpg'}, {'end': 20930.088, 'src': 'embed', 'start': 20902.31, 'weight': 4, 'content': [{'end': 20905.454, 'text': 'And this is the config you can set up for TypeScript.', 'start': 20902.31, 'duration': 3.144}, {'end': 20911.661, 'text': 'So this is why I wanted a bootstrapped application with Create React App, because they already set this one up for us.', 'start': 20906.095, 'duration': 5.566}, {'end': 20915.786, 'text': "So they have a lot of great defaults here that's set up for us.", 'start': 20911.781, 'duration': 4.005}, {'end': 20920.271, 'text': "And if there's something special you want to configure for TypeScript, you can do it in this file.", 'start': 20916.146, 'duration': 4.125}, {'end': 20921.592, 'text': 'So you can add them here.', 'start': 20920.731, 'duration': 0.861}, {'end': 20924.876, 'text': "There's actually a lot you can do to set it up just as you like it.", 'start': 20921.612, 'duration': 3.264}, {'end': 20926.786, 'text': "But we're not going to do that.", 'start': 20925.765, 'duration': 1.021}, {'end': 20930.088, 'text': "We're going to use the defaults that Create React App provides for us.", 'start': 20926.846, 'duration': 3.242}], 'summary': 'Using create react app provides default typescript configurations for a bootstrapped application.', 'duration': 27.778, 'max_score': 20902.31, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE20902310.jpg'}, {'end': 21666.27, 'src': 'embed', 'start': 21635.834, 'weight': 0, 'content': [{'end': 21642.297, 'text': 'the only thing we have to do here, if we want, is to specify those as strings, because all of them is strings.', 'start': 21635.834, 'duration': 6.463}, {'end': 21644.018, 'text': 'this one can be undefined also.', 'start': 21642.297, 'duration': 1.721}, {'end': 21646.499, 'text': 'so yeah, well, we can do it.', 'start': 21644.018, 'duration': 2.481}, {'end': 21650.899, 'text': 'api url, colon string, This one colon string.', 'start': 21646.499, 'duration': 4.4}, {'end': 21657.964, 'text': 'And if it can have more than one value, we can have this pipe and we specify it as undefined also.', 'start': 21651.4, 'duration': 6.564}, {'end': 21666.27, 'text': 'Because you can see if I remove this one here, it complains because it tells us that type string undefined is not assignable to type string.', 'start': 21658.304, 'duration': 7.966}], 'summary': 'Specified api parameters as strings, handling undefined values.', 'duration': 30.436, 'max_score': 21635.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE21635834.jpg'}, {'end': 21748.568, 'src': 'embed', 'start': 21717.9, 'weight': 3, 'content': [{'end': 21721.963, 'text': "this is a style component, so it's fine like it is now.", 'start': 21717.9, 'duration': 4.063}, {'end': 21726.986, 'text': "the helpers.ts here we're going to type this once up also.", 'start': 21721.963, 'duration': 5.023}, {'end': 21734.724, 'text': 'so here we have this time param, so we create parentheses And this one is going to be a number.', 'start': 21726.986, 'duration': 7.738}, {'end': 21738.465, 'text': 'But the return type of the function itself is going to be a string.', 'start': 21735.524, 'duration': 2.941}, {'end': 21740.346, 'text': 'So we type it like this.', 'start': 21739.265, 'duration': 1.081}, {'end': 21744.307, 'text': 'And ours is going to be a number.', 'start': 21741.226, 'duration': 3.081}, {'end': 21748.568, 'text': "And the min's is also going to be a number.", 'start': 21746.548, 'duration': 2.02}], 'summary': 'Creating type annotations for parameters and return types in a style component.', 'duration': 30.668, 'max_score': 21717.9, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE21717900.jpg'}], 'start': 20327.677, 'title': 'Refactoring react with typescript', 'summary': "Covers implementing componentdidmount, fetching movie data, and destructuring state variables. it introduces refactoring a react application with typescript for errorless code. it details bootstrapping a typescript application, setting up the project, and specifies function parameters and return types in typescript. it discusses using 'type' over 'interface' in react applications and the importance of exporting types for accessibility.", 'chapters': [{'end': 20397.122, 'start': 20327.677, 'title': 'React lifecycle method and state destructuring', 'summary': 'Covers the implementation of the componentdidmount lifecycle method, fetching movie data and destructuring state variables in a react component, resulting in successful retrieval of data from session storage.', 'duration': 69.445, 'highlights': ['The implementation of the componentDidMount lifecycle method and fetching movie data resulted in successful data retrieval from session storage.', "The deconstruction of state variables, including movie, loading, and error, from the component's state in the render function enabled successful data retrieval.", 'The chapter also includes code formatting and testing to ensure the successful implementation of the discussed functionality.']}, {'end': 20697.914, 'start': 20397.122, 'title': 'React typescript refactoring', 'summary': 'Introduces refactoring a react application into using typescript, highlighting the benefits of typescript in creating errorless code and setting up the project using create react app with typescript support.', 'duration': 300.792, 'highlights': ['The chapter introduces refactoring a React application into using TypeScript The speaker discusses the process of refactoring a React application to use TypeScript, emphasizing the benefits and implications of this transition.', 'The benefits of TypeScript in creating errorless code TypeScript is highlighted as a tool for creating errorless, more reliable code, providing a powerful IntelliSense to identify and prevent coding errors.', 'Setting up the project using Create React App with TypeScript support The speaker demonstrates the process of setting up a new application with TypeScript support using Create React App, including the installation of necessary dependencies such as styled components and React Router.']}, {'end': 21000.34, 'start': 20698.274, 'title': 'Typescript project bootstrapping and file setup', 'summary': 'Details the process of bootstrapping a new typescript application, transferring old files, and setting up the project, including renaming files to .ts and .tsx extensions, and configuring the tsconfig.json file for typescript.', 'duration': 302.066, 'highlights': ['The chapter details the process of transferring old files into a newly bootstrapped TypeScript application, advising to keep the index.tsx and react app files while removing unnecessary files like tests, service worker, logo, and index.css, and to copy essential files like API, components, config, global style, helpers, hooks, and images.', 'The importance of moving the .env file from the src folder to the root folder of the project is emphasized to enable fetching data from the movie database API, and the process of setting up environmental variables in the .env file is explained.', "The significance of cleaning up the index.tsx file by removing unnecessary references, and the purpose of the tsconfig.json file in configuring TypeScript settings for the project is highlighted, emphasizing the advantage of using Create React App's default settings for TypeScript setup.", 'Guidance is provided for renaming files to .ts and .tsx extensions, ensuring proper file type indication for TypeScript compatibility, and the necessity of using .tsx extension when JSX is used is emphasized to avoid TypeScript failure.']}, {'end': 21782.02, 'start': 21001.26, 'title': 'Typescript function parameters and return types', 'summary': "Covers the process of specifying function parameters and return types in typescript, including the use of colon to specify types, creating custom types for objects and arrays, and exporting types for use in other files. it also discusses the recommendation to use 'type' over 'interface' in react applications and the importance of exporting types for accessibility throughout the application.", 'duration': 780.76, 'highlights': ['The chapter covers the process of specifying function parameters and return types in TypeScript, including the use of colon to specify types, creating custom types for objects and arrays, and exporting types for use in other files.', "It discusses the recommendation to use 'type' over 'interface' in React applications and the importance of exporting types for accessibility throughout the application.", 'The transcript details the process of specifying function parameters and return types in TypeScript, demonstrating the use of colon to specify types and creating custom types for objects and arrays, as well as the importance of exporting types for accessibility throughout the application.', "It explains the process of specifying function parameters and return types in TypeScript, including the use of colon to specify types and creating custom types for objects and arrays, as well as the recommendation to use 'type' over 'interface' in React applications and the importance of exporting types for accessibility throughout the application."]}], 'duration': 1454.343, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE20327677.jpg', 'highlights': ['The benefits of TypeScript in creating errorless code TypeScript is highlighted as a tool for creating errorless, more reliable code, providing a powerful IntelliSense to identify and prevent coding errors.', 'The chapter introduces refactoring a React application into using TypeScript The speaker discusses the process of refactoring a React application to use TypeScript, emphasizing the benefits and implications of this transition.', 'The chapter covers the process of specifying function parameters and return types in TypeScript, including the use of colon to specify types, creating custom types for objects and arrays, and exporting types for use in other files.', 'The implementation of the componentDidMount lifecycle method and fetching movie data resulted in successful data retrieval from session storage.', "The deconstruction of state variables, including movie, loading, and error, from the component's state in the render function enabled successful data retrieval."]}, {'end': 23348.213, 'segs': [{'end': 22055.21, 'src': 'embed', 'start': 22033.044, 'weight': 0, 'content': [{'end': 22041.367, 'text': "And for the style file, we don't need to do anything there, but in the index.tsx file, We have to do some stuff because now we have some props here.", 'start': 22033.044, 'duration': 8.323}, {'end': 22043.447, 'text': "And we're also going to remove prop types.", 'start': 22041.847, 'duration': 1.6}, {'end': 22046.388, 'text': "We don't need that one when we're in TypeScript.", 'start': 22043.527, 'duration': 2.861}, {'end': 22049.028, 'text': 'So remove everything that has to do with the prop types.', 'start': 22046.408, 'duration': 2.62}, {'end': 22052.949, 'text': "Then here I'm going to specify types.", 'start': 22049.668, 'duration': 3.281}, {'end': 22055.21, 'text': 'And I create a type that I call props.', 'start': 22053.409, 'duration': 1.801}], 'summary': 'In the index.tsx file, remove prop types and specify types for props.', 'duration': 22.166, 'max_score': 22033.044, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE22033044.jpg'}, {'end': 22353.426, 'src': 'embed', 'start': 22326.213, 'weight': 1, 'content': [{'end': 22331.817, 'text': 'But if we go back to the home and see where we have the search bar, you can see here.', 'start': 22326.213, 'duration': 5.604}, {'end': 22334.719, 'text': 'And here we actually get that type.', 'start': 22332.697, 'duration': 2.022}, {'end': 22337.781, 'text': 'So when you hover over stuff, we get that type.', 'start': 22334.859, 'duration': 2.922}, {'end': 22341.123, 'text': "And that's really good because we can actually just copy this one.", 'start': 22337.921, 'duration': 3.202}, {'end': 22347.521, 'text': 'Copy and move back to the index.tsx file in the search bar.', 'start': 22343.697, 'duration': 3.824}, {'end': 22350.463, 'text': 'And then we paste it in here.', 'start': 22349.022, 'duration': 1.441}, {'end': 22353.426, 'text': 'So this is a React.dispatch.', 'start': 22351.725, 'duration': 1.701}], 'summary': 'Demonstrating the process of using react.dispatch.', 'duration': 27.213, 'max_score': 22326.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE22326213.jpg'}, {'end': 22799.527, 'src': 'embed', 'start': 22771.047, 'weight': 4, 'content': [{'end': 22774.01, 'text': 'And we save it, go back to the movie.', 'start': 22771.047, 'duration': 2.963}, {'end': 22776.171, 'text': 'And now it should work.', 'start': 22774.45, 'duration': 1.721}, {'end': 22781.24, 'text': "Yeah So that's probably the way to do it instead, so you don't have to do all this converting.", 'start': 22776.272, 'duration': 4.968}, {'end': 22785.762, 'text': 'And now we have to refactor the components that we use for the movie page also.', 'start': 22781.86, 'duration': 3.902}, {'end': 22788.123, 'text': "So let's begin with the actors.", 'start': 22786.702, 'duration': 1.421}, {'end': 22794.525, 'text': 'The actor.styles is going to be actor.styles.ts, and index is going to be .tsx.', 'start': 22788.623, 'duration': 5.902}, {'end': 22799.527, 'text': "We don't have any props in the styles, so we're only going to be in the index.tsx.", 'start': 22795.165, 'duration': 4.362}], 'summary': 'Refactoring components for the movie page, modifying actor styles and index files.', 'duration': 28.48, 'max_score': 22771.047, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE22771047.jpg'}], 'start': 21784.922, 'title': 'Typescript refactoring and best practices', 'summary': "Discusses best practices for parsing json and refactoring applications to use typescript. it emphasizes the importance of maintaining type checking and code quality, highlighting the avoidance of 'any' type and the successful conversion of react functional components to typescript. the chapter also introduces the movie database api and outlines steps for creating a login and voting system.", 'chapters': [{'end': 21835.506, 'start': 21784.922, 'title': 'Json parsing best practices', 'summary': "Discusses best practices for parsing json, emphasizing the avoidance of using 'any' type to maintain type checking, and only using it in specific cases where the return type is 'any'. it also highlights the importance of naming conventions and provides a cautionary note on the potential drawbacks of using 'any' type extensively.", 'duration': 50.584, 'highlights': ["Always avoid using 'any' type to maintain type checking, except in specific cases where the return type is 'any'.", 'Naming conventions are crucial, as incorrect naming can lead to errors in the code.', "Using 'any' type extensively removes type checking and can lead to potential issues in the codebase."]}, {'end': 22375.929, 'start': 21835.866, 'title': 'Refactoring to typescript', 'summary': 'Covers the refactoring of an application to use typescript, including renaming files, specifying types, and resolving type-related errors, with a focus on improving code quality and maintaining application integrity.', 'duration': 540.063, 'highlights': ['Renaming files from .js to .ts and .tsx, resolving type-related errors, and specifying types to improve code quality and maintain application integrity.', 'Specifying types for props, removing prop types, and using React.fc to define functional components, enhancing code quality and maintainability.', 'Copying type definitions from one component to another, leveraging hover-over type information, and ensuring type consistency across components for improved code quality and maintainability.']}, {'end': 22771.027, 'start': 22376.97, 'title': 'React component refactoring and typescript conversion', 'summary': 'Covers refactoring react functional components to typescript, including renaming file extensions, specifying prop types, and converting to react.fc, demonstrating the successful conversion and error resolution using typescript.', 'duration': 394.057, 'highlights': ['Successfully converted React components to TypeScript, including renaming file extensions and specifying prop types The chapter explains the process of converting the search bar, spinner, and thumb components to TypeScript by renaming file extensions to .tsx and .ts, and specifying prop types such as image as string, movie id as number, and clickable as boolean.', 'Resolved errors using TypeScript by specifying correct types and refactoring code The tutorial demonstrates resolving errors in TypeScript by specifying correct types for movie state, converting movie ID to string, and refactoring useMovieFetch and API file to ensure consistency in type specifications.', 'Verified successful TypeScript conversion and error resolution by running the application without errors The chapter concludes with the successful verification of the TypeScript conversion and error resolution by running the application using npm start without encountering any errors, indicating a successful conversion and error resolution using TypeScript.']}, {'end': 23348.213, 'start': 22771.047, 'title': 'Refactoring to typescript and introduction to movie database api', 'summary': 'Covers the process of refactoring components to typescript, eliminating repetitive tasks, and ensuring the successful implementation of typescript. additionally, it introduces the movie database api and outlines the steps for creating a login, including obtaining a session id and rating movies. the chapter also emphasizes the creation of a global context for storing the logged-in user and provides insights into building a login form and voting system.', 'duration': 577.166, 'highlights': ['The chapter covers the process of refactoring components to TypeScript, eliminating repetitive tasks, and ensuring the successful implementation of TypeScript. The speaker explains the process of refactoring components to TypeScript, emphasizing the elimination of repetitive tasks and the successful implementation of TypeScript.', 'Introduces the movie database API and outlines the steps for creating a login, including obtaining a session ID and rating movies. The chapter introduces the movie database API and outlines the steps for creating a login, which involves obtaining a session ID and rating movies using the API.', 'Emphasizes the creation of a global context for storing the logged-in user and provides insights into building a login form and voting system. The speaker emphasizes the creation of a global context for storing the logged-in user and provides insights into building a login form and voting system using the movie database API.']}], 'duration': 1563.291, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE21784922.jpg', 'highlights': ['Successfully converted React components to TypeScript, including renaming file extensions and specifying prop types.', 'Introduces the movie database API and outlines the steps for creating a login, including obtaining a session ID and rating movies.', 'Resolving errors using TypeScript by specifying correct types and refactoring code.', 'Renaming files from .js to .ts and .tsx, resolving type-related errors, and specifying types to improve code quality and maintain application integrity.', 'Emphasizes the creation of a global context for storing the logged-in user and provides insights into building a login form and voting system.']}, {'end': 25826.873, 'segs': [{'end': 23700.48, 'src': 'embed', 'start': 23671.785, 'weight': 5, 'content': [{'end': 23673.827, 'text': "So that's what we're going to start doing in the next video.", 'start': 23671.785, 'duration': 2.042}, {'end': 23684.489, 'text': "going to start creating our login component and i didn't say that i'm using the version of the application without typescript,", 'start': 23676.764, 'duration': 7.725}, {'end': 23686.891, 'text': "so you shouldn't use the one with typescript.", 'start': 23684.489, 'duration': 2.402}, {'end': 23693.555, 'text': 'use the original one that we finished before we did anything with typescript and also before we refactor it to classes,', 'start': 23686.891, 'duration': 6.664}, {'end': 23700.48, 'text': "because i'm using the functional component version just to be super clear, so that you know what product you're using for this one.", 'start': 23693.555, 'duration': 6.925}], 'summary': 'Next video will focus on creating a login component using the original non-typescript version.', 'duration': 28.695, 'max_score': 23671.785, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE23671785.jpg'}, {'end': 24869.917, 'src': 'embed', 'start': 24833.048, 'weight': 6, 'content': [{'end': 24837.35, 'text': "We're going to show a button to log in, and I'm just going to place it in the middle actually here.", 'start': 24833.048, 'duration': 4.302}, {'end': 24842.533, 'text': "It maybe should be to the right, but yeah, as I told you, I'm not doing any heavy styling for this section.", 'start': 24837.51, 'duration': 5.023}, {'end': 24844.774, 'text': 'So you can style it to your own likings later.', 'start': 24842.873, 'duration': 1.901}, {'end': 24849.136, 'text': "So let's go back inside of the application and inside the header component.", 'start': 24845.294, 'duration': 3.842}, {'end': 24851.998, 'text': 'So the header folder and the index.js file.', 'start': 24849.156, 'duration': 2.842}, {'end': 24857.681, 'text': 'The one thing we need to add to the imports here is to actually import the context.', 'start': 24852.798, 'duration': 4.883}, {'end': 24869.917, 'text': 'So we import context from dot dot forward slash and dot dot forward slash again.', 'start': 24861.693, 'duration': 8.224}], 'summary': 'Adding a login button to the header component, importing context files.', 'duration': 36.869, 'max_score': 24833.048, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE24833048.jpg'}, {'end': 24968.934, 'src': 'embed', 'start': 24910.724, 'weight': 2, 'content': [{'end': 24912.564, 'text': "We're going to grab the user from the context.", 'start': 24910.724, 'duration': 1.84}, {'end': 24914.365, 'text': "We don't need to set anything here.", 'start': 24912.604, 'duration': 1.761}, {'end': 24915.566, 'text': 'We just need the user.', 'start': 24914.405, 'duration': 1.161}, {'end': 24917.907, 'text': 'And we call the use context hook.', 'start': 24916.226, 'duration': 1.681}, {'end': 24920.608, 'text': 'We actually need to import that one also up here.', 'start': 24918.427, 'duration': 2.181}, {'end': 24925.652, 'text': 'So import React, comma, curly brackets, use context.', 'start': 24921.55, 'duration': 4.102}, {'end': 24930.854, 'text': 'So we give this use context hook the context.', 'start': 24928.533, 'duration': 2.321}, {'end': 24933.476, 'text': 'And this will bring us the user.', 'start': 24932.135, 'duration': 1.341}, {'end': 24937.217, 'text': "We don't need to destructure out the setter for this state.", 'start': 24934.876, 'duration': 2.341}, {'end': 24938.398, 'text': 'We just need the user.', 'start': 24937.498, 'duration': 0.9}, {'end': 24940.919, 'text': "So that's why we're not destructuring out that one.", 'start': 24938.418, 'duration': 2.501}, {'end': 24945.722, 'text': 'And we can do a console log user like this.', 'start': 24941.8, 'duration': 3.922}, {'end': 24949.323, 'text': 'Save the file, go back to our application.', 'start': 24947.582, 'duration': 1.741}, {'end': 24950.704, 'text': "I'm going to try to log in again.", 'start': 24949.403, 'duration': 1.301}, {'end': 24957.787, 'text': 'I click login.', 'start': 24956.966, 'duration': 0.821}, {'end': 24961.849, 'text': 'And you can see that we get this console log here.', 'start': 24960.108, 'duration': 1.741}, {'end': 24964.391, 'text': 'So we have the session ID and the username of Weben.', 'start': 24961.889, 'duration': 2.502}, {'end': 24967.353, 'text': "And that's of course for Weben Falk.", 'start': 24965.272, 'duration': 2.081}, {'end': 24968.934, 'text': 'All right.', 'start': 24968.534, 'duration': 0.4}], 'summary': 'Using usecontext hook to retrieve user data, resulting in console log of user details.', 'duration': 58.21, 'max_score': 24910.724, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE24910724.jpg'}, {'end': 25049.965, 'src': 'embed', 'start': 25022.125, 'weight': 1, 'content': [{'end': 25027.889, 'text': "so when we are logged in, we're going to show the text logged in as and we're also showing the username.", 'start': 25022.125, 'duration': 5.764}, {'end': 25033.392, 'text': "otherwise, if we're not logged in, we have a colon here and we have a new pair of parentheses.", 'start': 25027.889, 'duration': 5.503}, {'end': 25038.978, 'text': "I'm going to use the link component and it's going to link to.", 'start': 25035.276, 'duration': 3.702}, {'end': 25045.442, 'text': 'if you remember this one, the link component is the one that we use from React Router to navigate inside of our application.', 'start': 25038.978, 'duration': 6.464}, {'end': 25049.965, 'text': 'This one is going to link to the login page like this.', 'start': 25046.403, 'duration': 3.562}], 'summary': "Describes displaying 'logged in as' text and username, with a link to the login page.", 'duration': 27.84, 'max_score': 25022.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE25022125.jpg'}, {'end': 25250.795, 'src': 'embed', 'start': 25221.904, 'weight': 4, 'content': [{'end': 25226.649, 'text': "in the next video we're going to create the rate component that we're going to show somewhere here.", 'start': 25221.904, 'duration': 4.745}, {'end': 25237.031, 'text': "i think We're almost finished with the voting system, but we need a rating component that we can place here in the movie info component.", 'start': 25226.649, 'duration': 10.382}, {'end': 25238.671, 'text': "So we're going to create that one now.", 'start': 25237.331, 'duration': 1.34}, {'end': 25246.214, 'text': 'Move back inside of the code editor and inside the components, create a new folder that we call Rate capital R.', 'start': 25239.071, 'duration': 7.143}, {'end': 25250.795, 'text': "And inside of that folder, we create a new file that's called index.js.", 'start': 25246.214, 'duration': 4.581}], 'summary': 'Creating a rate component for the voting system.', 'duration': 28.891, 'max_score': 25221.904, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE25221904.jpg'}, {'end': 25493.262, 'src': 'embed', 'start': 25469.041, 'weight': 9, 'content': [{'end': 25475.724, 'text': 'so that when we press this rate button we will send along this rating number to the API and we will rate this movie.', 'start': 25469.041, 'duration': 6.683}, {'end': 25480.176, 'text': "All right, we're almost finished.", 'start': 25478.635, 'duration': 1.541}, {'end': 25482.717, 'text': 'And this is actually the last video in this course.', 'start': 25480.236, 'duration': 2.481}, {'end': 25484.658, 'text': 'So hope you enjoy the course.', 'start': 25482.997, 'duration': 1.661}, {'end': 25486.479, 'text': "We're going to tie this together.", 'start': 25485.178, 'duration': 1.301}, {'end': 25493.262, 'text': "So let's move inside of the code and inside the movie info component in the index.js file.", 'start': 25486.699, 'duration': 6.563}], 'summary': 'Developing a movie rating feature for an api, concluding the course.', 'duration': 24.221, 'max_score': 25469.041, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE25469041.jpg'}, {'end': 25564.343, 'src': 'embed', 'start': 25525.195, 'weight': 0, 'content': [{'end': 25528.857, 'text': 'because we can access it from any component in the application.', 'start': 25525.195, 'duration': 3.662}, {'end': 25537.663, 'text': "and in this case we're going to grab the user and the session id, so we can send along the session id to the api when the user rate the movie.", 'start': 25528.857, 'duration': 8.806}, {'end': 25539.804, 'text': "and now we're making this implicit return.", 'start': 25537.663, 'duration': 2.141}, {'end': 25543.706, 'text': "we're going to change this one to an explicit return.", 'start': 25539.804, 'duration': 3.902}, {'end': 25549.21, 'text': 'so return and i create the curly bracket and then we need to have one below.', 'start': 25543.706, 'duration': 5.504}, {'end': 25564.343, 'text': "also there do some auto formatting and go back up, give it some space, and first we're going to grab the user from our context, just as we did before.", 'start': 25549.21, 'duration': 15.133}], 'summary': 'Modifying code to grab user and session id for movie rating.', 'duration': 39.148, 'max_score': 25525.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE25525195.jpg'}], 'start': 23348.593, 'title': 'Global context in react', 'summary': 'Covers creating and setting up global context and state in react, integrating context provider, implementing login component logic and styling, accessing user information and session id for rating movies, and creating a rate component for movie info.', 'chapters': [{'end': 23593.744, 'start': 23348.593, 'title': 'Creating global context and state in react', 'summary': 'Focuses on creating a global context and state in react by developing a context.js file and implementing a user provider component that wraps the application and provides a state and setter accessible throughout the application.', 'duration': 245.151, 'highlights': ['Developing a context.js file to create a context in React for providing a state value and a setter accessible throughout the application. The tutorial focuses on creating a context.js file in the src folder, which enables the provision of a state value and a setter accessible from anywhere in the application.', 'Implementing a user provider component to wrap the application and provide a state and setter to the entire application. The user provider component is designed to wrap the application, ensuring that the state and setter are available to the complete application and all its components.']}, {'end': 24593.473, 'start': 23594.704, 'title': 'Setting up global context in react', 'summary': 'Covers setting up a global context and state in a react application, integrating context provider, creating a login component, controlling input fields, handling form submission, and navigating programmatically, resulting in successful login with a session id and redirecting to the homepage.', 'duration': 998.769, 'highlights': ['Creating a login component and integrating context provider Setting up a global context, creating a login component, and integrating context provider for global access', 'Controlling input fields and handling form submission Controlling input fields with state, handling form submission, and setting error state', 'Navigating programmatically and successfully logging in Navigating programmatically using React Router, successfully logging in with a session ID, and redirecting to the homepage']}, {'end': 24851.998, 'start': 24594.213, 'title': 'Login component logic and styling', 'summary': 'Covers the implementation of logic for the login component, including error handling and styling, and the creation of a login system in the header, with details on code adjustments and visual outcomes.', 'duration': 257.785, 'highlights': ["The logic for the login component is implemented, including error handling and validation, resulting in the display of an error message and confirmation of the try and catch block's functionality. Implementation of logic for the login component, display of error message, confirmation of try and catch block functionality.", 'Styling for the login component is created, encompassing the wrapper, input fields, and error class, resulting in a visually cohesive and functional appearance. Creation of styling for the login component, including wrapper, input fields, and error class, resulting in a visually cohesive and functional appearance.', 'Introduction of a login system in the header, with a focus on button placement and a note on the absence of heavy styling, providing flexibility for individual customization. Introduction of a login system in the header, emphasis on button placement, and note on flexibility for individual customization.']}, {'end': 25221.904, 'start': 24852.798, 'title': 'Implementing context and user login', 'summary': 'Details the process of implementing context and user login functionality, including importing context, using the usecontext hook to retrieve user information, and displaying logged-in user details and login button functionality. the chapter also mentions the storage of user information and provides insights into creating a backend for a login system in a react application.', 'duration': 369.106, 'highlights': ["The use of useContext hook to retrieve user information from the context is demonstrated, showcasing the console log of the user's session ID and username, providing a practical example of implementing user authentication and context usage.", "The process of displaying the logged-in user's details and the login button functionality is explained, demonstrating the conditional rendering of 'logged in as' text along with the username and the 'login' button functionality, showcasing the visual representation of a user's logged-in state.", 'Insights are provided into the storage of user information, including the mention of storing the session ID in the application itself, with a discussion on best practices for user information storage and a reference to a tutorial on creating a backend and setting up JSON web tokens for a login system in a React application.', 'The process of importing context and changing implicit return to explicit return is detailed, demonstrating the modification of code to incorporate functionality within the context and highlighting the importance of explicitly returning values.', "The styling adjustments for displaying the 'logged in as' text and the login button are mentioned, showcasing the utilization of CSS styling to enhance the visual representation of the user interface."]}, {'end': 25493.262, 'start': 25221.904, 'title': 'Creating rate component', 'summary': 'Covers creating a rate component for the movie info component, utilizing a range slider for rating between 1 to 10, and implementing a callback function to send the rating to the api.', 'duration': 271.358, 'highlights': ['Creating a rate component for movie info The chapter focuses on creating a rate component to be integrated into the movie info component.', 'Utilizing a range slider for rating The component includes a range slider for rating between 1 to 10, with the initial value set to 5.', 'Implementing a callback function to send rating to API The chapter demonstrates the implementation of a callback function to send the rating number to the API for rating the movie.']}, {'end': 25826.873, 'start': 25493.302, 'title': 'Using global state for movie rating', 'summary': 'Covers using global state and context to access user information and session id for rating movies, making an api call to rate a movie, and conditional rendering of the rating slider based on user login status, with demonstration and console logs of the rating process and potential next steps for the application.', 'duration': 333.571, 'highlights': ['Demonstration of using global state and context to access user information and session ID for rating movies, enabling access from any component in the application.', 'Explanation of making an API call to rate a movie, including passing user session ID, movie ID, and rating value, with a demonstration and console log of the rating process.', 'Conditional rendering of the rating slider based on user login status, with a demonstration of the slider being displayed upon login and hidden when not logged in.', 'Console logs demonstrating the success and status messages upon rating a movie, showcasing the potential for updating and removing the rating score.', 'Suggestion for potential next steps, including creating a logout button by removing the user from the global state and directing to additional resources for further learning and tutorials.']}], 'duration': 2478.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nTeuhbP7wdE/pics/nTeuhbP7wdE23348593.jpg', 'highlights': ['Demonstration of using global state and context to access user information and session ID for rating movies, enabling access from any component in the application.', 'Creating a login component and integrating context provider Setting up a global context, creating a login component, and integrating context provider for global access', 'Developing a context.js file to create a context in React for providing a state value and a setter accessible throughout the application.', "The use of useContext hook to retrieve user information from the context is demonstrated, showcasing the console log of the user's session ID and username, providing a practical example of implementing user authentication and context usage.", 'Creating a rate component for movie info The chapter focuses on creating a rate component to be integrated into the movie info component.', 'Controlling input fields and handling form submission Controlling input fields with state, handling form submission, and setting error state', 'Introduction of a login system in the header, emphasis on button placement, and note on flexibility for individual customization.', "The process of displaying the logged-in user's details and the login button functionality is explained, demonstrating the conditional rendering of 'logged in as' text along with the username and the 'login' button functionality, showcasing the visual representation of a user's logged-in state.", 'Navigating programmatically and successfully logging in Navigating programmatically using React Router, successfully logging in with a session ID, and redirecting to the homepage', 'Implementing a callback function to send rating to API The chapter demonstrates the implementation of a callback function to send the rating number to the API for rating the movie.']}], 'highlights': ['The course by Thomas Weibenfolk covers basic, intermediate, and advanced React topics, including building a movie application using the Movie Database API.', 'The course on building a movie application using the Movie Database API focuses on design, fetching movie data, obtaining a free API key, and registering for an account at the Movie Database.', 'React is a JavaScript library for building user interfaces and handling API calls.', 'Functional components are emphasized over class components in React.', 'React Router is significant for handling routes in a single-page application.', 'The chapter introduces API.js containing functions for fetching movie data and an environmental variable file, helpers.js, with functions to calculate time and money conversions.', 'Emphasizes the need to set the API key in an environmental variable for security, warning that it will be visible in the client and providing a caution against considering it safe.', 'React allows the creation of multiple states for components using state hooks, enabling the management of individual component states efficiently.', 'Props allow components to be dynamic and reusable, enhancing their adaptability and logic.', 'Style components offer benefits like scoped CSS, Sass-like syntax, and the ability to modify CSS using props.', 'Fetching and managing movie data from the Movie Database API using useEffect and useState hooks.', 'The chapter covers the deeper prop type validation syntaxes, including checking objects with warnings on extra properties, exact checking, and verifying arrays and objects to ensure they contain only specified data types.', 'Persisting state for individual movies in session storage to optimize user experience and avoid unnecessary API calls.', 'The instructor outlines the plan to demonstrate refactoring the application using class components and mentions upcoming topics on using TypeScript and the Movie Database API for further enhancement.', 'The benefits of TypeScript in creating errorless code TypeScript is highlighted as a tool for creating errorless, more reliable code, providing a powerful IntelliSense to identify and prevent coding errors.', 'Demonstration of using global state and context to access user information and session ID for rating movies, enabling access from any component in the application.']}