title
Lyric Search App With React & Context API [1] - Top 10 Tracks

description
In this project mini-series we will create an app that we can use to search song lyrics using Reacts built in context API along with the Musixmatch public API. This is video 1 of 3 Sponsor: DevMountain Bootcamp - https://goo.gl/6q0dEa Code For This Project: https://github.com/bradtraversy/lyricfinder React Front To Back (Full Course): https://www.udemy.com/react-front-to-back/?couponCode=TRAVERSYMEDIA Musixmatch Developer Site: https://developer.musixmatch.com/ 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: https://www.facebook.com/traversymedia https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia

detail
{'title': 'Lyric Search App With React & Context API [1] - Top 10 Tracks', 'heatmap': [{'end': 463.824, 'start': 415.381, 'weight': 0.754}, {'end': 1146.645, 'start': 1110.413, 'weight': 0.831}, {'end': 1930.729, 'start': 1862.362, 'weight': 0.752}, {'end': 2198.761, 'start': 2122.169, 'weight': 1}], 'summary': "Covers building a react app with music's match api, accessing 30 lyrics with 2000 free api calls, using react moment, context api, npx, bootstrap, and font awesome, setting up global state with react router, managing state with context api, accessing api data with axios, and displaying top 10 tracks with artist names.", 'chapters': [{'end': 134.626, 'segs': [{'end': 69.507, 'src': 'embed', 'start': 23.862, 'weight': 0, 'content': [{'end': 29.945, 'text': "So in this video series, we're going to be building a react application that finds lyrics for songs.", 'start': 23.862, 'duration': 6.083}, {'end': 37.57, 'text': "OK, so we can search for a song, we can get the the lyrics and we're able to do this because we're using the music's match API.", 'start': 30.045, 'duration': 7.525}, {'end': 40.832, 'text': "OK, this is the developer site for music's match.", 'start': 37.59, 'duration': 3.242}, {'end': 47.837, 'text': "And as far as the the API goes, it's free for 2000 API calls per day.", 'start': 41.493, 'duration': 6.344}, {'end': 55.481, 'text': "If you want more than that, you're going to have to pay, and if you want access to all of the lyrics, you also have to pay.", 'start': 48.877, 'duration': 6.604}, {'end': 58.842, 'text': 'so with the free plan, you get access to 30 of the lyrics.', 'start': 55.481, 'duration': 3.361}, {'end': 65.325, 'text': "so basically, it's like um, it's, it's for development, testing, learning stuff like that, and that that's all we're doing here.", 'start': 58.842, 'duration': 6.483}, {'end': 69.507, 'text': "we're not building a production level app that we're selling or anything like that.", 'start': 65.325, 'duration': 4.182}], 'summary': "Building a react app to find song lyrics using music's match api, free for 2000 api calls per day.", 'duration': 45.645, 'max_score': 23.862, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk23862.jpg'}], 'start': 7.059, 'title': "Building react application with music's match api", 'summary': "Discusses building a react application that finds song lyrics using the music's match api, which allows 2000 free api calls per day and provides access to 30 lyrics with the free plan, emphasizing it is for development and testing purposes, and requires signing up for an api key.", 'chapters': [{'end': 134.626, 'start': 7.059, 'title': "Building react application with music's match api", 'summary': "Discusses building a react application that finds song lyrics using the music's match api, which allows 2000 free api calls per day and provides access to 30 lyrics with the free plan, emphasizing it is for development and testing purposes, and requires signing up for an api key.", 'duration': 127.567, 'highlights': ["The Music's Match API allows 2000 free API calls per day. The API provides a generous allowance of 2000 free API calls per day, making it suitable for building and testing applications without incurring extra costs.", "Access to 30 lyrics is available with the free plan, with the option to pay for more. The free plan offers access to 30 lyrics, while additional access or features require payment, making it essential to consider the plan's limitations when developing the application.", 'Emphasizing the purpose of the application as being for development and testing, not for production level use. The chapter stresses the purpose of the application as being for development, testing, and learning purposes, not for building a production level app for commercial use.']}], 'duration': 127.567, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk7059.jpg', 'highlights': ["The Music's Match API allows 2000 free API calls per day.", 'Access to 30 lyrics is available with the free plan, with the option to pay for more.', 'Emphasizing the purpose of the application as being for development and testing, not for production level use.']}, {'end': 967.989, 'segs': [{'end': 186.216, 'src': 'embed', 'start': 157.226, 'weight': 0, 'content': [{'end': 158.607, 'text': "So that's what we'll be building, guys.", 'start': 157.226, 'duration': 1.381}, {'end': 159.827, 'text': "Let's go ahead and get into it.", 'start': 158.647, 'duration': 1.18}, {'end': 160.367, 'text': 'All right.', 'start': 160.127, 'duration': 0.24}, {'end': 166.249, 'text': "So I have this code open here and we're going to generate our application using create react app.", 'start': 160.407, 'duration': 5.842}, {'end': 170.851, 'text': "Now, as far as state management, what I'm going to do is use the context API.", 'start': 166.669, 'duration': 4.182}, {'end': 172.231, 'text': "We're not going to use Redux.", 'start': 170.931, 'duration': 1.3}, {'end': 178.353, 'text': 'I think this is a good example of a smaller application where the context API is a nice solution.', 'start': 172.351, 'duration': 6.002}, {'end': 186.216, 'text': 'I mean you could build it without, without even using that, but you have to kind of pass, pass along From the search.', 'start': 178.393, 'duration': 7.823}], 'summary': 'Building a react app with context api for state management, avoiding redux.', 'duration': 28.99, 'max_score': 157.226, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk157226.jpg'}, {'end': 266.269, 'src': 'embed', 'start': 203.395, 'weight': 2, 'content': [{'end': 208.898, 'text': "And if you don't know what NPX is, it's available with NPM 5+, I believe.", 'start': 203.395, 'duration': 5.503}, {'end': 217.424, 'text': 'And it allows us to use Create React App and things like that, tools like that, without having to actually install them globally on our machine.', 'start': 209.539, 'duration': 7.885}, {'end': 222.187, 'text': 'So I can simply say NPX Create React App.', 'start': 217.804, 'duration': 4.383}, {'end': 224.728, 'text': 'And I want to generate everything in this folder.', 'start': 222.527, 'duration': 2.201}, {'end': 225.869, 'text': "So I'm just going to put a dot.", 'start': 224.748, 'duration': 1.121}, {'end': 235.069, 'text': "Okay, and I noticed it does take a little longer to generate when you use NPX, but you don't have to install it on your system, which is a plus.", 'start': 227.003, 'duration': 8.066}, {'end': 238.612, 'text': 'And you always get the latest version.', 'start': 237.15, 'duration': 1.462}, {'end': 251.281, 'text': 'Okay Okay, so that should be done any second.', 'start': 242.414, 'duration': 8.867}, {'end': 264.688, 'text': 'And just make sure that you sign up at developer dot music match so that you can get your API key because we will need that to make our requests.', 'start': 255.586, 'duration': 9.102}, {'end': 266.269, 'text': 'All right.', 'start': 265.968, 'duration': 0.301}], 'summary': 'Npx allows using tools like create react app without global installation, ensuring latest version and no need for global installation.', 'duration': 62.874, 'max_score': 203.395, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk203395.jpg'}, {'end': 393.991, 'src': 'embed', 'start': 368.632, 'weight': 4, 'content': [{'end': 374.696, 'text': 'Hello One other thing I like to do is go into the app CSS and just get rid of all that styling.', 'start': 368.632, 'duration': 6.064}, {'end': 377.699, 'text': 'OK, I keep the file, but just get rid of the styling.', 'start': 374.716, 'duration': 2.983}, {'end': 380.28, 'text': 'And now it should just look like this.', 'start': 378.179, 'duration': 2.101}, {'end': 386.725, 'text': 'Okay, so we are going to use bootstrap and font awesome in this in this application.', 'start': 381.221, 'duration': 5.504}, {'end': 390.388, 'text': "So let's go to get bootstrap and get started.", 'start': 386.786, 'duration': 3.602}, {'end': 393.991, 'text': "And we're just going to get the CSS, we don't need the JavaScript for anything.", 'start': 390.608, 'duration': 3.383}], 'summary': 'Using bootstrap and font awesome for styling, excluding javascript.', 'duration': 25.359, 'max_score': 368.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk368632.jpg'}, {'end': 472.552, 'src': 'heatmap', 'start': 415.381, 'weight': 6, 'content': [{'end': 426.287, 'text': "we'll say find lyrics for your favorite songs and we'll paste the bootstrap link right here.", 'start': 415.381, 'duration': 10.906}, {'end': 428.488, 'text': 'and then we just need to get the font awesome.', 'start': 426.287, 'duration': 2.201}, {'end': 432.961, 'text': "So let's go to fontawesome.com.", 'start': 430.859, 'duration': 2.102}, {'end': 436.863, 'text': "We'll go to how to use and then grab the link right here.", 'start': 433.401, 'duration': 3.462}, {'end': 443.487, 'text': 'Close that up and paste that into the index file right there.', 'start': 438.024, 'duration': 5.463}, {'end': 444.848, 'text': 'And we should be good.', 'start': 444.028, 'duration': 0.82}, {'end': 447.89, 'text': "So we'll save that and close it up.", 'start': 444.908, 'duration': 2.982}, {'end': 454.014, 'text': 'If we go back to our application, the title is changed and you can also see that the bootstrap styling is in effect.', 'start': 448.05, 'duration': 5.964}, {'end': 455.771, 'text': 'All right.', 'start': 455.41, 'duration': 0.361}, {'end': 463.824, 'text': "So what we're going to do first is is create the header or the navbar component, because that's very simple.", 'start': 456.031, 'duration': 7.793}, {'end': 465.867, 'text': "There's no there's nothing to that, really.", 'start': 463.884, 'duration': 1.983}, {'end': 467.346, 'text': "We'll add that.", 'start': 466.585, 'duration': 0.761}, {'end': 470.069, 'text': "We'll install the React router.", 'start': 467.807, 'duration': 2.262}, {'end': 472.552, 'text': 'Let me just show you kind of how this is structured.', 'start': 470.089, 'duration': 2.463}], 'summary': 'Setting up bootstrap and font awesome for application styling and adding a simple header component', 'duration': 24.502, 'max_score': 415.381, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk415381.jpg'}, {'end': 712.341, 'src': 'embed', 'start': 678.955, 'weight': 7, 'content': [{'end': 683.077, 'text': "We're using React, so of course we need to use class name.", 'start': 678.955, 'duration': 4.122}, {'end': 686.158, 'text': "And we're going to say navbar.", 'start': 683.097, 'duration': 3.061}, {'end': 698.174, 'text': "Let's do navbar dark, bgdark for the background, which will make it black, and mb-5, which is margin bottom 5.", 'start': 686.378, 'duration': 11.796}, {'end': 704.117, 'text': "All right, so inside here, we're going to have a span with the class of navvar-brand.", 'start': 698.174, 'duration': 5.943}, {'end': 708.639, 'text': "Let's also do mb0, margin-bottom 0.", 'start': 705.037, 'duration': 3.602}, {'end': 712.341, 'text': "And I want it to display as an h1, so I'm going to do h1 as a class.", 'start': 708.639, 'duration': 3.702}], 'summary': 'Using react to create a navbar with class names for styling.', 'duration': 33.386, 'max_score': 678.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk678955.jpg'}], 'start': 134.626, 'title': 'React app development', 'summary': 'Covers building a music search app with react, optimizing a react app with a running server, and the process of creating a react application, emphasizing the use of react moment, context api, npx, bootstrap, and font awesome.', 'chapters': [{'end': 311.369, 'start': 134.626, 'title': 'Building a music search app with react', 'summary': 'Demonstrates building a music search app using react, employing react moment for date formatting, context api for state management, and npx for creating the application, emphasizing the need for an api key to make requests.', 'duration': 176.743, 'highlights': ['The chapter demonstrates building a music search app using React, employing React Moment for date formatting, Context API for state management, and NPX for creating the application.', 'The use of Context API is emphasized as a suitable solution for a smaller application, eliminating the need for Redux and simplifying data transfer between components.', 'NPX is recommended for generating the application, providing the latest version without the need for global installation, but may take longer for generation.', 'The importance of signing up at developer dot music match to obtain an API key for making requests is highlighted.']}, {'end': 447.89, 'start': 312.369, 'title': 'Optimizing react app with server running', 'summary': 'Highlights the process of cleaning up a react app with a running server, including deleting unnecessary files, optimizing styling, and integrating bootstrap and font awesome, resulting in a streamlined and enhanced application.', 'duration': 135.521, 'highlights': ['The server failed to compile after deleting unnecessary files, such as the logo and index.css, causing errors in the application.', 'Integrating Bootstrap and Font Awesome into the application for enhanced styling and design, without requiring the JavaScript components.', 'Optimizing the application by simplifying the app.js file, removing unnecessary imports, and refining the styling in the app CSS file for a cleaner look.']}, {'end': 967.989, 'start': 448.05, 'title': 'React application development', 'summary': 'Covers the process of creating a react application, including setting up the navbar component, installing react router, and structuring the components and routes.', 'duration': 519.939, 'highlights': ['The chapter covers the process of creating a React application, including setting up the navbar component, installing React router, and structuring the components and routes. Creating React application, setting up navbar component, installing React router, structuring components and routes.', 'The index component is connected to the home route, and the React Router version 4 is installed for routing. Index component connected to home route, React Router version 4 installed.', 'The process involves creating the navbar component as a functional component and using ES7 React Redux, GraphQL React Native Snippets extension for generating snippets. Creating navbar component, using ES7 React Redux, GraphQL React Native Snippets extension.', 'The use of React, class names, and bootstrap classes for styling the navbar component is demonstrated. Using React, class names, bootstrap classes for styling navbar component.']}], 'duration': 833.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk134626.jpg', 'highlights': ['Covers building a music search app using React, employing React Moment, Context API, and NPX for creating the application.', 'Emphasizes the use of Context API as a suitable solution for smaller applications, simplifying data transfer between components.', 'Recommends NPX for generating the application, providing the latest version without global installation.', 'Highlights the importance of signing up at developer dot music match to obtain an API key for making requests.', 'Integrating Bootstrap and Font Awesome into the application for enhanced styling and design, without requiring JavaScript components.', 'Optimizing the application by simplifying the app.js file, removing unnecessary imports, and refining the styling in the app CSS file for a cleaner look.', 'Covers the process of creating a React application, including setting up the navbar component, installing React Router, and structuring the components and routes.', 'Demonstrates the use of React, class names, and bootstrap classes for styling the navbar component.']}, {'end': 1298.204, 'segs': [{'end': 1013.321, 'src': 'embed', 'start': 967.989, 'weight': 3, 'content': [{'end': 976.772, 'text': 'we wanted to match our path, exactly when the path is going to be a slash, and then the component is going to be the index component,', 'start': 967.989, 'duration': 8.783}, {'end': 979.272, 'text': "which we haven't created yet, but we will in a second.", 'start': 976.772, 'duration': 2.5}, {'end': 985.502, 'text': "OK If I go ahead and save this, we're going to get an error because index is not defined.", 'start': 980.473, 'duration': 5.029}, {'end': 989.605, 'text': "So we will have to bring in index even though I haven't created it yet.", 'start': 985.562, 'duration': 4.043}, {'end': 990.886, 'text': "We'll just go ahead and bring it in.", 'start': 989.645, 'duration': 1.241}, {'end': 992.107, 'text': "I'll copy this down.", 'start': 991.086, 'duration': 1.021}, {'end': 998.911, 'text': "I am going to put it in the layout because it doesn't really have any functionality other than holding other components.", 'start': 992.587, 'duration': 6.324}, {'end': 1001.353, 'text': 'So it is basically part of just the layout.', 'start': 999.091, 'duration': 2.262}, {'end': 1003.355, 'text': "So we'll bring in index.", 'start': 1002.034, 'duration': 1.321}, {'end': 1007.037, 'text': "OK, we'll still get an error because we haven't created the file yet.", 'start': 1003.375, 'duration': 3.662}, {'end': 1011.56, 'text': "So in layout, let's create a file called Index Dot J.S.", 'start': 1007.137, 'duration': 4.423}, {'end': 1013.321, 'text': 'Capital I.', 'start': 1011.62, 'duration': 1.701}], 'summary': "Creating and incorporating the 'index' component into the layout, encountering errors along the way.", 'duration': 45.332, 'max_score': 967.989, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk967989.jpg'}, {'end': 1146.645, 'src': 'heatmap', 'start': 1110.413, 'weight': 0.831, 'content': [{'end': 1120.561, 'text': "so let's create a an uppercase t tracks.js that's going to be our tracks component And this is actually going to be a class based component.", 'start': 1110.413, 'duration': 10.148}, {'end': 1122.343, 'text': "So I'm going to do RCC tab.", 'start': 1120.581, 'duration': 1.762}, {'end': 1126.967, 'text': "Again, if you don't have this extension, just go ahead and copy this,", 'start': 1122.903, 'duration': 4.064}, {'end': 1134.335, 'text': "except I'm going to get rid of the export default and put it down here and just export the class name.", 'start': 1126.967, 'duration': 7.368}, {'end': 1135.315, 'text': 'All right.', 'start': 1135.035, 'duration': 0.28}, {'end': 1140.44, 'text': "And for now, we'll put an H1 in here and just say tracks just to make sure that it gets displayed.", 'start': 1135.376, 'duration': 5.064}, {'end': 1144.523, 'text': "Okay, so let's go to our browser, let's go to our app, and there we go.", 'start': 1141.161, 'duration': 3.362}, {'end': 1146.645, 'text': 'So we get our tracks displayed.', 'start': 1144.583, 'duration': 2.062}], 'summary': "Created an uppercase tracks.js class-based component with an h1 displaying 'tracks'.", 'duration': 36.232, 'max_score': 1110.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk1110413.jpg'}, {'end': 1224.901, 'src': 'embed', 'start': 1159.853, 'weight': 0, 'content': [{'end': 1163.356, 'text': "let's see we have our navbar component and then we have.", 'start': 1159.853, 'duration': 3.503}, {'end': 1165.557, 'text': 'our switch with our route.', 'start': 1164.136, 'duration': 1.421}, {'end': 1169.38, 'text': 'OK, so this is the index component right here.', 'start': 1165.577, 'duration': 3.803}, {'end': 1172.163, 'text': 'And inside that we have our tracks component.', 'start': 1169.861, 'duration': 2.302}, {'end': 1173.584, 'text': 'All right.', 'start': 1172.183, 'duration': 1.401}, {'end': 1177.767, 'text': 'Good So now we have to start to think about state.', 'start': 1173.664, 'duration': 4.103}, {'end': 1186.774, 'text': 'And we could put the the tracks, the state inside the tracks component.', 'start': 1179.328, 'duration': 7.446}, {'end': 1188.016, 'text': "But I don't want to do that.", 'start': 1187.195, 'duration': 0.821}, {'end': 1192.479, 'text': 'I want a global point of reference, a global state.', 'start': 1188.056, 'duration': 4.423}, {'end': 1195.482, 'text': "So that's why we're going to use the context API.", 'start': 1192.94, 'duration': 2.542}, {'end': 1206.631, 'text': "OK, so we're going to create in the let's see, in the source folder, we're going to create a file called Context Dot JS.", 'start': 1195.862, 'duration': 10.769}, {'end': 1212.258, 'text': 'OK So in the root context, JS.', 'start': 1207.452, 'duration': 4.806}, {'end': 1220.4, 'text': "So the way that this works is we create what's called a provider and the provider is just like any other react component.", 'start': 1213.218, 'duration': 7.182}, {'end': 1224.901, 'text': "We're just going to wrap everything in this provider component.", 'start': 1221.46, 'duration': 3.441}], 'summary': 'Creating a global state using context api for the tracks component.', 'duration': 65.048, 'max_score': 1159.853, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk1159853.jpg'}], 'start': 967.989, 'title': 'React router component setup and global state creation', 'summary': 'Covers setting up the react router component, bringing in the index component and creating index dot j.s. capital i in the layout. it also details creating a global state using the context api, aiming to set up a global point of reference for state management.', 'chapters': [{'end': 1013.321, 'start': 967.989, 'title': 'React router component setup', 'summary': 'Covers setting up the react router component, including creating and bringing in the index component, and creating a file called index dot j.s. capital i in the layout.', 'duration': 45.332, 'highlights': ['Creating a file called Index Dot J.S. Capital I in the layout', 'Bringing in the index component', 'Matching the path to a slash']}, {'end': 1298.204, 'start': 1013.321, 'title': 'Creating global state with context api', 'summary': 'Details the process of creating a global state using the context api, including the creation of a provider component and the use of context in managing state, aiming to set up a global point of reference for state management.', 'duration': 284.883, 'highlights': ['The chapter details the process of creating a global state using the Context API The chapter covers the implementation of a global state using the Context API for managing state across components.', 'including the creation of a provider component The creation of a provider component is emphasized as a key step in setting up the global state using the Context API.', 'the use of context in managing state The usage of context for managing state is highlighted, indicating its significance in establishing a global point of reference for state management.', 'aiming to set up a global point of reference for state management The ultimate objective is to establish a global point of reference for state management through the implementation of the Context API.']}], 'duration': 330.215, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk967989.jpg', 'highlights': ['Creating a global state using the Context API for managing state across components', 'Including the creation of a provider component as a key step in setting up the global state using the Context API', 'Aiming to set up a global point of reference for state management', 'Bringing in the index component', 'Creating a file called Index Dot J.S. Capital I in the layout', 'Matching the path to a slash']}, {'end': 1846.848, 'segs': [{'end': 1324.957, 'src': 'embed', 'start': 1300.928, 'weight': 0, 'content': [{'end': 1309.371, 'text': 'OK, because this is the provider is going to wrap around every other component so that we can access whatever state we put in this provider.', 'start': 1300.928, 'duration': 8.443}, {'end': 1316.113, 'text': "We'll be able to access with, you know, through all the other components as long as we use what's called the consumer.", 'start': 1309.711, 'duration': 6.402}, {'end': 1323.197, 'text': "OK, so for our state, let's go up here just like any other component.", 'start': 1317.854, 'duration': 5.343}, {'end': 1324.957, 'text': "We're just going to add state.", 'start': 1323.797, 'duration': 1.16}], 'summary': 'Provider wraps around components for state access.', 'duration': 24.029, 'max_score': 1300.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk1300928.jpg'}, {'end': 1433.059, 'src': 'embed', 'start': 1404.851, 'weight': 1, 'content': [{'end': 1409.432, 'text': 'Now this is in the provider state, but we want to be able to access this from any component.', 'start': 1404.851, 'duration': 4.581}, {'end': 1417.434, 'text': 'So in the context provider, we can provide a value and we can pass whatever we want into this.', 'start': 1410.152, 'duration': 7.282}, {'end': 1419.615, 'text': "I'm going to pass the entire state.", 'start': 1417.594, 'duration': 2.021}, {'end': 1429.052, 'text': "Okay, now you could pass in this.state.tracklist if that's all you wanted available, but I want the entire state available.", 'start': 1420.717, 'duration': 8.335}, {'end': 1433.059, 'text': "In fact, I'm going to put a heading value in the state as well.", 'start': 1429.552, 'duration': 3.507}], 'summary': 'Context provider allows access to entire state from any component.', 'duration': 28.208, 'max_score': 1404.851, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk1404851.jpg'}, {'end': 1760.808, 'src': 'embed', 'start': 1731.725, 'weight': 2, 'content': [{'end': 1735.227, 'text': 'And we also get the heading of top 10 tracks, so the whole state.', 'start': 1731.725, 'duration': 3.502}, {'end': 1739.029, 'text': "So we're accessing the entire state from the tracks component.", 'start': 1735.647, 'duration': 3.382}, {'end': 1741.571, 'text': 'And we could do this from any component we want.', 'start': 1739.409, 'duration': 2.162}, {'end': 1744.753, 'text': "All right, so let's go back.", 'start': 1742.711, 'duration': 2.042}, {'end': 1755.326, 'text': "Now, instead of just having dummy data in our context and our state here, let's make a request to the musics match API and fill this with real data.", 'start': 1745.653, 'duration': 9.673}, {'end': 1760.808, 'text': "So to do that, just like any other component we're going to use component did mount,", 'start': 1756.127, 'duration': 4.681}], 'summary': 'Accessing and filling state with real data from the music match api using component did mount.', 'duration': 29.083, 'max_score': 1731.725, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk1731725.jpg'}], 'start': 1300.928, 'title': 'Using context api in react', 'summary': 'Covers using react context provider and consumer to manage and access state, utilizing a dummy data object, accessing global state with context, and fetching data from an api, while also demonstrating accessing the entire state from any component using the context api.', 'chapters': [{'end': 1452.557, 'start': 1300.928, 'title': 'React context provider and consumer', 'summary': 'Introduces using react context provider and consumer to manage and access state across components, with a focus on sharing track list data and utilizing a dummy data object, while also discussing the purpose of a heading value in the state.', 'duration': 151.629, 'highlights': ['The provider wraps around every other component, allowing access to state through the consumer, enabling the entire state to be passed and accessed from any component.', 'The track list in the state initially contains 10 tracks, which can change based on user search, and dummy data is used to work with the API response format.', "A heading value is added to the state, initially set as 'top 10 tracks' and later expected to change to 'search results' upon user search."]}, {'end': 1577.802, 'start': 1452.617, 'title': 'Using context to access global state', 'summary': 'Discusses using context in react to access global state, similar to using connect with redux, to import and use the global state in a component, while also touching upon the process of fetching data from an api.', 'duration': 125.185, 'highlights': ['The chapter discusses using context in React to access global state, similar to using connect with Redux, to import and use the global state in a component.', 'The process of fetching data from the API and implementing it in the track list component is mentioned as a future step.', 'The details of exporting and importing the context consumer are explained, showcasing the process of bringing in the global state into the tracks component.']}, {'end': 1846.848, 'start': 1578.242, 'title': 'Using context api to access state in react', 'summary': 'Demonstrates how to use the context api in react to access the entire state from any component, making use of the provider and axios to fetch real data.', 'duration': 268.606, 'highlights': ['The context API in React allows accessing the entire state from any component, eliminating the need to pass data around, even when the component is deeply nested.', 'The provider, similar to Redux, needs to wrap around everything in the app, including the router, to enable access to the context.', 'Using Axios and the component lifecycle method componentDidMount, the chapter demonstrates how to fetch real data from the Musics Match API.', 'The use of Axios for making requests and handling the promise returned is highlighted, showcasing the process of fetching and logging the result data.']}], 'duration': 545.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk1300928.jpg', 'highlights': ['The provider wraps around every other component, allowing access to state through the consumer, enabling the entire state to be passed and accessed from any component.', 'The context API in React allows accessing the entire state from any component, eliminating the need to pass data around, even when the component is deeply nested.', 'Using Axios and the component lifecycle method componentDidMount, the chapter demonstrates how to fetch real data from the Musics Match API.']}, {'end': 2152.566, 'segs': [{'end': 1934.091, 'src': 'heatmap', 'start': 1862.362, 'weight': 0, 'content': [{'end': 1868.584, 'text': 'Right And you get this by going to plans, get started on the free plan and then applications.', 'start': 1862.362, 'duration': 6.222}, {'end': 1875.147, 'text': "Now, I'm going to put this inside of what's called an environment variable or an environmental variable.", 'start': 1869.164, 'duration': 5.983}, {'end': 1884.312, 'text': "So I'm going to create a file in the root, not in the source, but in the absolute root, a file called .env.", 'start': 1875.687, 'duration': 8.625}, {'end': 1892.616, 'text': 'And here is where we can put basically variables that we can access from anywhere in our application.', 'start': 1885.752, 'duration': 6.864}, {'end': 1897.706, 'text': 'Now they have to start with React underscore app and then you can do whatever you want.', 'start': 1893.063, 'duration': 4.643}, {'end': 1902.73, 'text': "I'm going to do MM key and then I'm going to just paste in my key and save it.", 'start': 1897.726, 'duration': 5.004}, {'end': 1906.972, 'text': 'That way I can just access it wherever and whenever I want.', 'start': 1902.81, 'duration': 4.162}, {'end': 1908.093, 'text': 'All right.', 'start': 1906.992, 'duration': 1.101}, {'end': 1916.159, 'text': "So now that that's in there, let's go back to our little Axios dot get and the URL that we want.", 'start': 1908.173, 'duration': 7.986}, {'end': 1917.8, 'text': 'If we go to the documentation.', 'start': 1916.219, 'duration': 1.581}, {'end': 1920.342, 'text': "Let's see.", 'start': 1919.842, 'duration': 0.5}, {'end': 1923.805, 'text': 'So these are all the API methods.', 'start': 1922.164, 'duration': 1.641}, {'end': 1926.206, 'text': "And we're going to use quite a few of these.", 'start': 1924.425, 'duration': 1.781}, {'end': 1930.729, 'text': "We're going to use this one here, charttracks.get.", 'start': 1926.246, 'duration': 4.483}, {'end': 1934.091, 'text': 'This will get the top songs in any given country.', 'start': 1931.27, 'duration': 2.821}], 'summary': 'Set up environment variable for api key and access it in the application for fetching top songs from a country using axios.', 'duration': 86.262, 'max_score': 1862.362, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk1862362.jpg'}, {'end': 2121.668, 'src': 'embed', 'start': 2096.061, 'weight': 4, 'content': [{'end': 2104.45, 'text': "Okay, so it's making the request, but it's giving us this no access control allow origin.", 'start': 2096.061, 'duration': 8.389}, {'end': 2106.793, 'text': "I'm sure you guys have seen this plenty of times.", 'start': 2104.471, 'duration': 2.322}, {'end': 2110.657, 'text': 'It has to do with cores and what they allow.', 'start': 2106.893, 'duration': 3.764}, {'end': 2111.739, 'text': "I'm not sure why.", 'start': 2110.677, 'duration': 1.062}, {'end': 2114.483, 'text': 'why this API does this.', 'start': 2112.842, 'duration': 1.641}, {'end': 2117.205, 'text': "And there's a few ways around it.", 'start': 2115.764, 'duration': 1.441}, {'end': 2121.668, 'text': "I'm going to use a really easy way and use something called cores anywhere.", 'start': 2117.225, 'duration': 4.443}], 'summary': 'Api request issue with no access control allow origin, using cores anywhere for resolution.', 'duration': 25.607, 'max_score': 2096.061, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk2096061.jpg'}], 'start': 1847.829, 'title': 'Setting up api key in react application and using axios to access api data', 'summary': "Covers obtaining and storing an api key in a react application using environment variables and accessing a music api with axios to retrieve the top 10 songs in the us while addressing the 'no access control allow origin' issue using cores-anywhere proxy.", 'chapters': [{'end': 1902.73, 'start': 1847.829, 'title': 'Setting up api key in react application', 'summary': 'Covers the process of obtaining and storing an api key in a react application by creating an environment variable, which allows access to the key from any part of the application, starting with obtaining the key through the free plan, creating an environment variable, and saving the key in the .env file in the root directory.', 'duration': 54.901, 'highlights': ['Creating an environment variable called .env in the absolute root directory allows the storage of variables accessible from any part of the application.', 'Obtaining the API key involves signing up for the free plan and accessing it through the applications section.', "Storing the API key in the .env file under a specific naming convention, such as 'REACT_APP_MM_KEY', ensures its availability throughout the application."]}, {'end': 2152.566, 'start': 1902.81, 'title': 'Using axios to access api data', 'summary': "Discusses using axios to access a music api, focusing on making requests to retrieve the top 10 songs in the us and dealing with the 'no access control allow origin' issue using cores-anywhere proxy.", 'duration': 249.756, 'highlights': ['The chapter discusses using Axios to access a music API and make requests to retrieve the top 10 songs in the US. The tutorial covers making requests to the music API to obtain the top 10 songs in the US using Axios.', "The tutorial explains the 'no access control allow origin' issue and the solution using cores-anywhere proxy. The chapter addresses the 'no access control allow origin' issue encountered when making API requests and introduces the solution of using cores-anywhere proxy as a workaround."]}], 'duration': 304.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk1847829.jpg', 'highlights': ['Storing the API key in the .env file under a specific naming convention ensures its availability throughout the application.', 'Creating an environment variable called .env in the absolute root directory allows the storage of variables accessible from any part of the application.', 'Obtaining the API key involves signing up for the free plan and accessing it through the applications section.', 'The tutorial covers making requests to the music API to obtain the top 10 songs in the US using Axios.', "The chapter addresses the 'no access control allow origin' issue encountered when making API requests and introduces the solution of using cores-anywhere proxy as a workaround."]}, {'end': 2423.354, 'segs': [{'end': 2230.156, 'src': 'embed', 'start': 2176.26, 'weight': 0, 'content': [{'end': 2186.324, 'text': "Okay, so if we look in message body track list, there's 10 tracks because remember we put 10 in the query parameters.", 'start': 2176.26, 'duration': 10.064}, {'end': 2189.557, 'text': 'And each track gives us all this information.', 'start': 2187.136, 'duration': 2.421}, {'end': 2195.52, 'text': "Okay It gives us like the artist's name, the album name, the track name, all that stuff.", 'start': 2189.577, 'duration': 5.943}, {'end': 2198.761, 'text': "The release date, if it's explicit lyrics or not.", 'start': 2195.54, 'duration': 3.221}, {'end': 2199.661, 'text': 'So pretty cool.', 'start': 2198.921, 'duration': 0.74}, {'end': 2200.802, 'text': 'It gives us a lot of stuff.', 'start': 2199.701, 'duration': 1.101}, {'end': 2203.543, 'text': "Genres So that's good.", 'start': 2200.862, 'duration': 2.681}, {'end': 2204.883, 'text': "We're getting the requests.", 'start': 2203.863, 'duration': 1.02}, {'end': 2213.603, 'text': "Now.. All we're doing now when we get the response back is console logging it.", 'start': 2205.424, 'duration': 8.179}, {'end': 2217.186, 'text': 'What we want to do is set that to our state.', 'start': 2214.103, 'duration': 3.083}, {'end': 2223.951, 'text': 'We want to take that response, that track list in the response, and fill our state with it, which is this.', 'start': 2217.426, 'duration': 6.525}, {'end': 2230.156, 'text': "I'm actually just going to put some curly braces here so that I can use more than one line.", 'start': 2224.371, 'duration': 5.785}], 'summary': '10 tracks retrieved with detailed information; goal is to update state with response data.', 'duration': 53.896, 'max_score': 2176.26, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk2176260.jpg'}, {'end': 2381.394, 'src': 'embed', 'start': 2350.513, 'weight': 2, 'content': [{'end': 2355.597, 'text': "So in our tracks, actually, let's create our spinner component.", 'start': 2350.513, 'duration': 5.084}, {'end': 2361.883, 'text': "So in layout, I'm going to create a file called spinner.js.", 'start': 2355.677, 'duration': 6.206}, {'end': 2370.211, 'text': "And if you've taken my React front-to-back course or my MernStack front-to-back course, I usually use the same spinner component.", 'start': 2363.444, 'duration': 6.767}, {'end': 2372.613, 'text': "I'm actually going to just paste it in.", 'start': 2371.212, 'duration': 1.401}, {'end': 2379.133, 'text': "Okay, so I have a GIF file, which I'm going to grab in a second.", 'start': 2374.872, 'duration': 4.261}, {'end': 2381.394, 'text': "It's just a little rotating spinner.", 'start': 2379.593, 'duration': 1.801}], 'summary': 'Creating a spinner component using a gif file.', 'duration': 30.881, 'max_score': 2350.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk2350513.jpg'}], 'start': 2153.588, 'title': 'Fetching and displaying tracks', 'summary': 'Explains the process of fetching and displaying tracks in an application, including obtaining 10 tracks from a response, setting the state with the track list, and accounting for the initial rendering of a blank array before it gets filled with data.', 'chapters': [{'end': 2330.626, 'start': 2153.588, 'title': 'Fetching and displaying tracks', 'summary': 'Explains the process of fetching and displaying tracks in an application, including obtaining 10 tracks from a response, setting the state with the track list, and accounting for the initial rendering of a blank array before it gets filled with data.', 'duration': 177.038, 'highlights': ["The response contains 10 tracks, each providing information such as the artist's name, album name, track name, release date, and explicit lyrics indication.", "Setting the state with the track list involves accessing the response's track list and filling the state with it to display the tracks in the application.", 'The initial rendering of the track list is a blank array, which gets filled with data when the response is received, requiring accounting for this behavior in the application.']}, {'end': 2423.354, 'start': 2330.626, 'title': 'Creating spinner component for conditional rendering', 'summary': 'Discusses creating a spinner component for conditional rendering in a react application, including the process of creating the component and its specific styling.', 'duration': 92.728, 'highlights': ['Creating a spinner component for conditional rendering in a React application, including the process of creating the component and its specific styling.', 'Implementing conditional checking to display a spinner graphic when the response is received and the page is not full.', 'Creating a functional component for the spinner with an image source and inline React styling for width, margin, and display.']}], 'duration': 269.766, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk2153588.jpg', 'highlights': ["The response contains 10 tracks, each providing information such as the artist's name, album name, track name, release date, and explicit lyrics indication.", "Setting the state with the track list involves accessing the response's track list and filling the state with it to display the tracks in the application.", 'Creating a spinner component for conditional rendering in a React application, including the process of creating the component and its specific styling.']}, {'end': 3271.576, 'segs': [{'end': 2453.347, 'src': 'embed', 'start': 2423.394, 'weight': 5, 'content': [{'end': 2431.799, 'text': 'So this is the project folder and the spinner graphic is going to go right in the components layout folder right next to the spinner component.', 'start': 2423.394, 'duration': 8.405}, {'end': 2433, 'text': 'There it is.', 'start': 2432.52, 'duration': 0.48}, {'end': 2436.062, 'text': 'And you can get this in the GitHub repository in the description.', 'start': 2433.04, 'duration': 3.022}, {'end': 2441.305, 'text': "OK So now that we have our spinner component let's bring that into tracks.", 'start': 2437.062, 'duration': 4.243}, {'end': 2453.347, 'text': "So we'll import spinner from And we're going to go outside of tracks into layout and then spinner.", 'start': 2441.985, 'duration': 11.362}], 'summary': 'Project folder updated with spinner graphic in components layout folder.', 'duration': 29.953, 'max_score': 2423.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk2423394.jpg'}, {'end': 2626.32, 'src': 'embed', 'start': 2522.568, 'weight': 6, 'content': [{'end': 2535.831, 'text': 'OK. so we want to say if track list is equal to undefined, or so double pipe character or track list dot length,', 'start': 2522.568, 'duration': 13.263}, {'end': 2537.652, 'text': 'which will give us the length of the array.', 'start': 2535.831, 'duration': 1.821}, {'end': 2545.274, 'text': "if that is equal to 0, then we want to show the spinner right? Because there's no tracks to show.", 'start': 2537.652, 'duration': 7.622}, {'end': 2550.075, 'text': "So let's do return.", 'start': 2546.354, 'duration': 3.721}, {'end': 2553.85, 'text': 'Spinner like that.', 'start': 2552.447, 'duration': 1.403}, {'end': 2560.381, 'text': "OK, and then else for now, I'm just going to return.", 'start': 2553.87, 'duration': 6.511}, {'end': 2566.111, 'text': "Whatever an H1 and we'll just say tracks loaded.", 'start': 2561.763, 'duration': 4.348}, {'end': 2568.685, 'text': "OK, so let's try that out.", 'start': 2567.344, 'duration': 1.341}, {'end': 2569.666, 'text': "We'll go back.", 'start': 2568.745, 'duration': 0.921}, {'end': 2583.438, 'text': "OK. so now when I reload, before it fetches or before it gets the the response back from the API, it's going to show the spinner once it comes in.", 'start': 2570.347, 'duration': 13.091}, {'end': 2585.98, 'text': "then it'll show the tracks loaded.", 'start': 2583.438, 'duration': 2.542}, {'end': 2591.044, 'text': "OK, obviously, we don't want to just show tracks loaded.", 'start': 2586, 'duration': 5.044}, {'end': 2593.727, 'text': 'What we want to show is this right here.', 'start': 2591.365, 'duration': 2.362}, {'end': 2598.489, 'text': "OK Let's see.", 'start': 2595.507, 'duration': 2.982}, {'end': 2607.176, 'text': 'So what do I want to do now? We need to loop through the tracks that we get back, the array, and then output a single track component.', 'start': 2598.569, 'duration': 8.607}, {'end': 2608.517, 'text': 'All right.', 'start': 2608.196, 'duration': 0.321}, {'end': 2609.377, 'text': "So let's do that.", 'start': 2608.597, 'duration': 0.78}, {'end': 2611.299, 'text': "Let's create our track component.", 'start': 2609.417, 'duration': 1.882}, {'end': 2618.984, 'text': "So inside components tracks, we'll create a file called uppercase T track.js.", 'start': 2612.039, 'duration': 6.945}, {'end': 2626.32, 'text': "OK, and this track component is actually going to be a functional component because it doesn't need its own state.", 'start': 2620.675, 'duration': 5.645}], 'summary': "If track list is undefined or empty, show spinner; else, display 'tracks loaded'", 'duration': 103.752, 'max_score': 2522.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk2522568.jpg'}, {'end': 2861.647, 'src': 'embed', 'start': 2834.691, 'weight': 3, 'content': [{'end': 2838.093, 'text': 'Whenever you map through a list, you need to have a unique key.', 'start': 2834.691, 'duration': 3.402}, {'end': 2845.816, 'text': "So for our key, we're just going to use the item dot track.", 'start': 2838.713, 'duration': 7.103}, {'end': 2849.097, 'text': "And then there's something called the track underscore ID.", 'start': 2846.196, 'duration': 2.901}, {'end': 2852.258, 'text': 'OK, so save that.', 'start': 2849.117, 'duration': 3.141}, {'end': 2858.845, 'text': "And then let's go back to track.js because right now we have nothing to display.", 'start': 2854.383, 'duration': 4.462}, {'end': 2861.647, 'text': "So we're going to add this stuff now.", 'start': 2859.866, 'duration': 1.781}], 'summary': 'Using unique keys, such as item.track and track_id, to map through a list in track.js.', 'duration': 26.956, 'max_score': 2834.691, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk2834691.jpg'}, {'end': 2962.88, 'src': 'embed', 'start': 2900.621, 'weight': 0, 'content': [{'end': 2904.342, 'text': "Then we're going to put everything in a card, so a bootstrap card.", 'start': 2900.621, 'duration': 3.721}, {'end': 2914.967, 'text': "So let's do a class of card and a class of margin-bottom 4 and a class of shadow-sm.", 'start': 2904.382, 'duration': 10.585}, {'end': 2922.05, 'text': 'And then in here, we need a class of card-body, which gives the card all the padding and stuff.', 'start': 2916.808, 'duration': 5.242}, {'end': 2925.813, 'text': 'And inside the body, we can put an h5.', 'start': 2923.03, 'duration': 2.783}, {'end': 2931.058, 'text': "And we're going to put the artist name here, which we can get from track.", 'start': 2926.393, 'duration': 4.665}, {'end': 2932.799, 'text': 'Oops, we need our curly braces.', 'start': 2931.278, 'duration': 1.521}, {'end': 2939.205, 'text': 'So track.artist underscore name.', 'start': 2933.88, 'duration': 5.325}, {'end': 2940.847, 'text': "So let's try this out.", 'start': 2939.786, 'duration': 1.061}, {'end': 2941.608, 'text': "Let's save it.", 'start': 2940.887, 'duration': 0.721}, {'end': 2942.569, 'text': "And let's go back.", 'start': 2941.808, 'duration': 0.761}, {'end': 2945.551, 'text': 'to our application and there we go.', 'start': 2943.55, 'duration': 2.001}, {'end': 2957.918, 'text': "So we get our top 10 tracks and each object in the track list is, we're looping through and we're outputting a track component.", 'start': 2946.352, 'duration': 11.566}, {'end': 2962.88, 'text': 'So each of these is a track component, which right now we only have the artist name.', 'start': 2958.018, 'duration': 4.862}], 'summary': 'Creating a bootstrap card with artist names from top 10 tracks.', 'duration': 62.259, 'max_score': 2900.621, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk2900621.jpg'}, {'end': 3030.565, 'src': 'embed', 'start': 2996.261, 'weight': 7, 'content': [{'end': 2997.482, 'text': "That's what we use for that.", 'start': 2996.261, 'duration': 1.221}, {'end': 2998.983, 'text': 'All right.', 'start': 2997.502, 'duration': 1.481}, {'end': 3000.124, 'text': "So let's finish this up.", 'start': 2999.003, 'duration': 1.121}, {'end': 3004.538, 'text': "so we'll go back to track js.", 'start': 3001.875, 'duration': 2.663}, {'end': 3013.528, 'text': "let's go under our h5 and let's put a paragraph with the class of card dash text.", 'start': 3004.538, 'duration': 8.99}, {'end': 3023.075, 'text': "okay, so this is just standard bootstrap card markup and we're going to put a strong tag and we're going to say track,", 'start': 3013.528, 'duration': 9.547}, {'end': 3025.258, 'text': 'but i want to put an icon right before it.', 'start': 3023.075, 'duration': 2.183}, {'end': 3030.565, 'text': "so i'm going to say i dot f a s, so font awesome.", 'start': 3025.258, 'duration': 5.307}], 'summary': 'Adding standard bootstrap card markup with an icon and text.', 'duration': 34.304, 'max_score': 2996.261, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk2996261.jpg'}, {'end': 3122.422, 'src': 'embed', 'start': 3086.013, 'weight': 2, 'content': [{'end': 3089.354, 'text': "Now, when you're using react router, you don't want to use an a tag.", 'start': 3086.013, 'duration': 3.341}, {'end': 3091.875, 'text': 'You want to use a link from react router.', 'start': 3089.394, 'duration': 2.481}, {'end': 3092.976, 'text': 'So we have to import.', 'start': 3091.895, 'duration': 1.081}, {'end': 3097.642, 'text': 'Link from.', 'start': 3095.837, 'duration': 1.805}, {'end': 3100.709, 'text': 'React router Dom.', 'start': 3099.486, 'duration': 1.223}, {'end': 3112.415, 'text': "OK, and then down here we can use a link tag which takes in a two attribute, which is basically like an href, except we're going to make this dynamic.", 'start': 3102.068, 'duration': 10.347}, {'end': 3122.422, 'text': "So we're going to put in curly braces with back ticks and we want to go to lyrics slash track slash.", 'start': 3113.176, 'duration': 9.246}], 'summary': 'When using react router, use link from react router dom instead of a tag for dynamic routing.', 'duration': 36.409, 'max_score': 3086.013, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk3086013.jpg'}, {'end': 3263.511, 'src': 'embed', 'start': 3238.71, 'weight': 4, 'content': [{'end': 3248.478, 'text': "in the next video we're going to start to create the search okay, the search component and we're going to basically create in our state.", 'start': 3238.71, 'duration': 9.768}, {'end': 3255.404, 'text': "we're going to have a dispatch function to be able to manipulate our state from other components, because when we search,", 'start': 3248.478, 'duration': 6.926}, {'end': 3258.206, 'text': 'we want this track list to completely change.', 'start': 3255.404, 'duration': 2.802}, {'end': 3263.511, 'text': 'we want to make a new request to the api, get it back and then and then change the tracks.', 'start': 3258.206, 'duration': 5.305}], 'summary': 'Creating a search component with a dispatch function to manipulate state for updating track list.', 'duration': 24.801, 'max_score': 3238.71, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk3238710.jpg'}], 'start': 2423.394, 'title': 'Implementing track components in react', 'summary': 'Covers implementing a spinner component for loading tracks, looping through and rendering track components, and implementing react router link for dynamic navigation, aiming to display the top 10 tracks with artist names and dynamic track list updates.', 'chapters': [{'end': 2598.489, 'start': 2423.394, 'title': 'Implementing spinner component in tracks', 'summary': 'Discusses implementing a spinner component in the tracks layout to indicate loading, using destructuring to check if the track list is empty, and displaying the spinner accordingly, before showing the loaded tracks.', 'duration': 175.095, 'highlights': ['Implementing a spinner component in the tracks layout to indicate loading', 'Using destructuring to check if the track list is empty and displaying the spinner accordingly', 'Showing the spinner before displaying the loaded tracks']}, {'end': 2996.221, 'start': 2598.569, 'title': 'Looping and rendering track components', 'summary': 'Focuses on creating a functional track component to loop through and render track information, utilizing bootstrap grid and card components, aiming to display the top 10 tracks with artist names, using a unique key for each track.', 'duration': 397.652, 'highlights': ['Creating a functional track component to loop through and render track information The chapter emphasizes the creation of a functional track component to loop through and render track information from the state, focusing on the display of artist names, albums, and track names.', 'Utilizing Bootstrap grid and card components for layout and styling The usage of Bootstrap grid and card components to structure the layout, with specific classes for column sizing, card styling, and padding for a visually appealing display of track information.', 'Displaying the top 10 tracks with artist names The objective of the chapter is to display the top 10 tracks with artist names, achieved through looping and rendering track components with relevant track information obtained from the state.', 'Using a unique key for each track to address the mapping requirement Emphasizing the necessity of using a unique key for each track when mapping through a list, ensuring proper rendering and optimization of the track components.']}, {'end': 3271.576, 'start': 2996.261, 'title': 'React router link implementation', 'summary': 'Demonstrates the implementation of a react router link for navigating to a dynamic lyrics page based on track details, utilizing bootstrap card markup and font awesome icons, and also outlines plans for creating a search component with state manipulation for dynamic track list updates.', 'duration': 275.315, 'highlights': ["Implementation of a React Router Link for dynamic navigation Demonstrates the use of React Router's Link component for dynamic navigation to a lyrics page based on track details, using a dynamic URL with the track ID.", 'Utilization of Bootstrap card markup and Font Awesome icons Illustrates the use of standard Bootstrap card markup with Font Awesome icons for displaying track details including track name, artist name, and album name.', 'Planned creation of a search component with state manipulation Outlines plans for creating a search component with state manipulation to enable dynamic updates of the track list based on user input and API requests.']}], 'duration': 848.182, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NDEt0KdDbhk/pics/NDEt0KdDbhk2423394.jpg', 'highlights': ['Displaying the top 10 tracks with artist names', 'Utilizing Bootstrap grid and card components for layout and styling', 'Implementation of a React Router Link for dynamic navigation', 'Using a unique key for each track to address the mapping requirement', 'Planned creation of a search component with state manipulation', 'Implementing a spinner component in the tracks layout to indicate loading', 'Creating a functional track component to loop through and render track information', 'Utilization of Bootstrap card markup and Font Awesome icons', 'Using destructuring to check if the track list is empty and displaying the spinner accordingly', 'Showing the spinner before displaying the loaded tracks']}], 'highlights': ['Access to 30 lyrics is available with the free plan, with the option to pay for more.', "The Music's Match API allows 2000 free API calls per day.", 'Emphasizing the purpose of the application as being for development and testing, not for production level use.', 'Covers building a music search app using React, employing React Moment, Context API, and NPX for creating the application.', 'Emphasizes the use of Context API as a suitable solution for smaller applications, simplifying data transfer between components.', 'Recommends NPX for generating the application, providing the latest version without global installation.', 'Highlights the importance of signing up at developer dot music match to obtain an API key for making requests.', 'Integrating Bootstrap and Font Awesome into the application for enhanced styling and design, without requiring JavaScript components.', 'Optimizing the application by simplifying the app.js file, removing unnecessary imports, and refining the styling in the app CSS file for a cleaner look.', 'Creating a global state using the Context API for managing state across components', 'The provider wraps around every other component, allowing access to state through the consumer, enabling the entire state to be passed and accessed from any component.', 'The context API in React allows accessing the entire state from any component, eliminating the need to pass data around, even when the component is deeply nested.', 'Using Axios and the component lifecycle method componentDidMount, the chapter demonstrates how to fetch real data from the Musics Match API.', 'Storing the API key in the .env file under a specific naming convention ensures its availability throughout the application.', 'Creating an environment variable called .env in the absolute root directory allows the storage of variables accessible from any part of the application.', 'Obtaining the API key involves signing up for the free plan and accessing it through the applications section.', 'The tutorial covers making requests to the music API to obtain the top 10 songs in the US using Axios.', "The chapter addresses the 'no access control allow origin' issue encountered when making API requests and introduces the solution of using cores-anywhere proxy as a workaround.", "The response contains 10 tracks, each providing information such as the artist's name, album name, track name, release date, and explicit lyrics indication.", "Setting the state with the track list involves accessing the response's track list and filling the state with it to display the tracks in the application.", 'Creating a spinner component for conditional rendering in a React application, including the process of creating the component and its specific styling.', 'Displaying the top 10 tracks with artist names', 'Utilizing Bootstrap grid and card components for layout and styling', 'Implementation of a React Router Link for dynamic navigation', 'Using a unique key for each track to address the mapping requirement', 'Planned creation of a search component with state manipulation', 'Implementing a spinner component in the tracks layout to indicate loading', 'Creating a functional track component to loop through and render track information', 'Utilization of Bootstrap card markup and Font Awesome icons', 'Using destructuring to check if the track list is empty and displaying the spinner accordingly', 'Showing the spinner before displaying the loaded tracks']}