title
Exploring The Wordpress REST API & React Integration

description
In this video we will be looking at the Wordpress Rest API and how to navigate the response data, create custom post types, JWT authentication and we will do a bit of integration with React Sponsor: Freelancer Bundle (Use "brad25" for 25% off) https://studywebdevelopment.com/freelancing.html Wordpress Docker Compose File: https://gist.github.com/bradtraversy/faa8de544c62eef3f31de406982f1d42 💖 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': 'Exploring The Wordpress REST API & React Integration', 'heatmap': [{'end': 350.395, 'start': 307.215, 'weight': 1}, {'end': 711.932, 'start': 679.551, 'weight': 0.772}, {'end': 835.489, 'start': 801.052, 'weight': 0.71}, {'end': 1391.681, 'start': 1360.744, 'weight': 0.784}], 'summary': 'Explores wordpress rest api for freelancing, jwt authentication, creating react app with api integration, fetching and displaying books, using axios and promise.all, and implementing dynamic links and api integration with react router.', 'chapters': [{'end': 113.114, 'segs': [{'end': 92.864, 'src': 'embed', 'start': 29.249, 'weight': 0, 'content': [{'end': 33.072, 'text': 'so in this video i want to take a look at the wordpress rest api.', 'start': 29.249, 'duration': 3.823}, {'end': 40.858, 'text': "so what's really cool about this is you can use wordpress as a content management system, and this is especially good for you, for clients,", 'start': 33.072, 'duration': 7.786}, {'end': 45.201, 'text': "especially if you're freelancing and so on, because they can add their own content.", 'start': 40.858, 'duration': 4.343}, {'end': 53.227, 'text': 'however, you can still use a single page application on the front end, with react or view or angular, and just connect to the the rest api,', 'start': 45.201, 'duration': 8.026}, {'end': 56.51, 'text': 'and you can access all the resources that WordPress offers.', 'start': 53.667, 'duration': 2.843}, {'end': 60.113, 'text': "You can use custom post types, which I'll show you how to do using a plugin.", 'start': 56.53, 'duration': 3.583}, {'end': 63.417, 'text': "As far as authentication, there's multiple methods.", 'start': 60.634, 'duration': 2.783}, {'end': 68.201, 'text': "What I'm going to show you is a plugin called JWT Rest API.", 'start': 63.737, 'duration': 4.464}, {'end': 77.991, 'text': 'It allows us to use JWT, which is JSON Web Tokens, in order to get a token to authenticate, to be able to add a post or whatever, add content.', 'start': 68.462, 'duration': 9.529}, {'end': 82.794, 'text': "So I'll show you how to do all that through Postman, which is an HTTP client.", 'start': 78.87, 'duration': 3.924}, {'end': 92.864, 'text': "And as far as React, we'll just set up a quick React application on the front end and just kind of interact with it a little bit, fetch some data.", 'start': 83.495, 'duration': 9.369}], 'summary': 'Wordpress rest api allows for content management with custom post types and authentication using json web tokens, enabling frontend applications to access wordpress resources and interact with it using tools like postman and react.', 'duration': 63.615, 'max_score': 29.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro29249.jpg'}], 'start': 7.165, 'title': 'Using wordpress rest api & freelancing', 'summary': 'Delves into utilizing wordpress rest api for content management and freelancing, highlighting benefits for freelancers and illustrating the use of jwt rest api plugin for authentication and react for front-end interaction.', 'chapters': [{'end': 113.114, 'start': 7.165, 'title': 'Wordpress rest api & freelancing', 'summary': 'Explores using wordpress rest api for content management and freelancing, showcasing the benefits for freelancers and demonstrating the use of jwt rest api plugin for authentication and react for front-end interaction.', 'duration': 105.949, 'highlights': ['The WordPress REST API allows using WordPress as a content management system and accessing resources for a single page application, beneficial for freelancers and clients, with the ability to add their own content. The WordPress REST API enables using WordPress as a content management system, allowing access to resources for a single page application, which is especially beneficial for freelancers and clients to add their own content.', 'Demonstrates the use of JWT Rest API plugin for authentication, allowing to obtain a token for authentication and adding content through Postman, an HTTP client. The demonstration includes using the JWT Rest API plugin for authentication, obtaining a token for authentication, and adding content through Postman, an HTTP client.', 'Setting up a quick React application on the front end to interact with the WordPress REST API, fetching data and mentioning the similarities with front end authentication used in the Django and react series. Setting up a quick React application on the front end to interact with the WordPress REST API, fetching data, and drawing similarities with front end authentication used in the Django and react series.']}], 'duration': 105.949, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro7165.jpg', 'highlights': ['The WordPress REST API enables using WordPress as a content management system, allowing access to resources for a single page application, which is especially beneficial for freelancers and clients to add their own content.', 'Setting up a quick React application on the front end to interact with the WordPress REST API, fetching data, and drawing similarities with front end authentication used in the Django and react series.', 'Demonstrates the use of JWT Rest API plugin for authentication, obtaining a token for authentication, and adding content through Postman, an HTTP client.']}, {'end': 1150.737, 'segs': [{'end': 183.819, 'src': 'embed', 'start': 136.298, 'weight': 0, 'content': [{'end': 144.368, 'text': "And if we go to reference here, you'll see all the different resources that this allows us to get and work with.", 'start': 136.298, 'duration': 8.07}, {'end': 149.474, 'text': 'So posts, categories, pages, users, media, all this stuff is available.', 'start': 144.448, 'duration': 5.026}, {'end': 153.519, 'text': "And we can also use custom post types using a plugin, which I'll show you.", 'start': 149.494, 'duration': 4.025}, {'end': 158.082, 'text': 'So obviously we need to have a WordPress installation.', 'start': 154.62, 'duration': 3.462}, {'end': 162.485, 'text': "So if you want to use XAMPP or WAMP or something like that, that's fine.", 'start': 158.543, 'duration': 3.942}, {'end': 165.927, 'text': "If you want to use a remote WordPress installation, that's fine.", 'start': 162.805, 'duration': 3.122}, {'end': 167.108, 'text': "We're going to use Docker.", 'start': 165.967, 'duration': 1.141}, {'end': 178.375, 'text': 'And I actually made a video about two weeks ago creating this Docker compose file which will set up MySQL, PHP, my admin and WordPress with Apache,', 'start': 167.689, 'duration': 10.686}, {'end': 181.998, 'text': 'all in containers in one simple command.', 'start': 178.375, 'duration': 3.623}, {'end': 183.819, 'text': "All right, so that's what we're going to do.", 'start': 182.538, 'duration': 1.281}], 'summary': 'Using docker to set up wordpress with mysql, php, my admin and apache in containers with a simple command.', 'duration': 47.521, 'max_score': 136.298, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro136298.jpg'}, {'end': 350.395, 'src': 'heatmap', 'start': 307.215, 'weight': 1, 'content': [{'end': 319.29, 'text': 'So if I open up Postman and I make a GET request to HTTP, localhost 8000, which is where our WordPress site lives and go to slash WP dash Jason.', 'start': 307.215, 'duration': 12.075}, {'end': 322.893, 'text': 'If I do this right off the bat, it gives me a 404 error.', 'start': 319.911, 'duration': 2.982}, {'end': 329.499, 'text': 'Now to fix this, we just go to settings and then permalinks and we just need to change the setting.', 'start': 323.474, 'duration': 6.025}, {'end': 334.804, 'text': "So I'm going to go from plane to post name in common settings and then save.", 'start': 329.519, 'duration': 5.285}, {'end': 339.208, 'text': 'And now if we go back to postman and make that same request, now it works.', 'start': 335.344, 'duration': 3.864}, {'end': 345.032, 'text': 'OK, so when I first got started with this, that kind of that that took me a little bit to figure out.', 'start': 339.708, 'duration': 5.324}, {'end': 350.395, 'text': 'So this gives us like the obviously the application name, the description, all that stuff.', 'start': 345.912, 'duration': 4.483}], 'summary': 'Using postman to make a get request to localhost 8000 initially returns a 404 error, fixed by changing permalink settings to post name, resulting in a successful request.', 'duration': 43.18, 'max_score': 307.215, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro307215.jpg'}, {'end': 531.326, 'src': 'embed', 'start': 484.174, 'weight': 2, 'content': [{'end': 489.557, 'text': 'okay. now, if i try to send this, what we get is a 401, which is an unauthorized.', 'start': 484.174, 'duration': 5.383}, {'end': 493.6, 'text': 'so this means it says sorry, you are not allowed to create posts as this user.', 'start': 489.557, 'duration': 4.043}, {'end': 495.661, 'text': "basically, we don't have a user.", 'start': 493.6, 'duration': 2.061}, {'end': 498.382, 'text': "now, like i said, there's different ways to authenticate.", 'start': 495.661, 'duration': 2.721}, {'end': 503.005, 'text': "if you're using the rest api, i would suggest using json web tokens.", 'start': 498.382, 'duration': 4.623}, {'end': 511.11, 'text': "so basically, you just need to log in through an endpoint and then take the token that's that's given to you and add that to the headers.", 'start': 503.005, 'duration': 8.105}, {'end': 517.515, 'text': "Now, this isn't functionality by default, so we just have to add in a plugin.", 'start': 511.81, 'duration': 5.705}, {'end': 523.64, 'text': "So I'm going to go to Plugins, Add New, and we're going to search for JWT.", 'start': 517.534, 'duration': 6.106}, {'end': 531.326, 'text': 'And this right here, JWT authentication for WordPress REST API, we want to install that.', 'start': 525.982, 'duration': 5.344}], 'summary': 'To resolve the 401 unauthorized error, add jwt authentication plugin for wordpress rest api.', 'duration': 47.152, 'max_score': 484.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro484174.jpg'}, {'end': 711.932, 'src': 'heatmap', 'start': 679.551, 'weight': 0.772, 'content': [{'end': 682.276, 'text': "OK, so if it's wrong, it just says incorrect password.", 'start': 679.551, 'duration': 2.725}, {'end': 685.181, 'text': "Let's change it to be correct and send.", 'start': 682.296, 'duration': 2.885}, {'end': 689.329, 'text': 'And now we get a token back as well as the email and display name.', 'start': 685.261, 'duration': 4.068}, {'end': 692.494, 'text': 'So now we need to just take this token.', 'start': 690.03, 'duration': 2.464}, {'end': 702.45, 'text': "So we'll copy that, and we need to go to where we tried to create a post earlier and just add a header value of authorization.", 'start': 694.028, 'duration': 8.422}, {'end': 709.332, 'text': "And in order for this to work, we need to put in the word bearer, because it's a bearer token.", 'start': 703.79, 'duration': 5.542}, {'end': 711.932, 'text': 'So bearer, space, and then paste in the token.', 'start': 709.372, 'duration': 2.56}], 'summary': 'Update password, obtain token, add authorization header with bearer token.', 'duration': 32.381, 'max_score': 679.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro679551.jpg'}, {'end': 849.3, 'src': 'heatmap', 'start': 801.052, 'weight': 4, 'content': [{'end': 804.195, 'text': "Okay, so that's installed.", 'start': 801.052, 'duration': 3.143}, {'end': 805.076, 'text': "We'll activate it.", 'start': 804.235, 'duration': 0.841}, {'end': 809.301, 'text': "And let's go to over here now.", 'start': 807.238, 'duration': 2.063}, {'end': 811.263, 'text': 'You have this add edit post types.', 'start': 809.361, 'duration': 1.902}, {'end': 813.405, 'text': "So I'm going to create one called books.", 'start': 811.823, 'duration': 1.582}, {'end': 814.867, 'text': "As you can see, I've already done this.", 'start': 813.645, 'duration': 1.222}, {'end': 817.189, 'text': 'Plural is going to be books.', 'start': 815.547, 'duration': 1.642}, {'end': 818.45, 'text': 'Singular is book.', 'start': 817.469, 'duration': 0.981}, {'end': 824.301, 'text': "And then down here, where it says show and rest API, make sure that's true.", 'start': 818.551, 'duration': 5.75}, {'end': 826.323, 'text': "And then for the slug, we're going to say books.", 'start': 824.341, 'duration': 1.982}, {'end': 834.048, 'text': "And then down here, I'm going to say we want to we also want the excerpt to be available as well as the author.", 'start': 827.243, 'duration': 6.805}, {'end': 835.489, 'text': 'All right.', 'start': 834.068, 'duration': 1.421}, {'end': 837.851, 'text': "So we can do that and we'll say add post type.", 'start': 835.549, 'duration': 2.302}, {'end': 839.752, 'text': 'Good So now.', 'start': 838.671, 'duration': 1.081}, {'end': 849.3, 'text': "Right here, you can see there is a menu item for books, and if I click add new, Let's say book one.", 'start': 841.233, 'duration': 8.067}], 'summary': 'Installing and activating a new post type for books, with settings for plural, singular, rest api, slug, excerpt, and author. menu item and add new functionality now available.', 'duration': 51.692, 'max_score': 801.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro801052.jpg'}, {'end': 1025.384, 'src': 'embed', 'start': 986.788, 'weight': 7, 'content': [{'end': 998.013, 'text': 'So if we go to Plugins Add New, we want to search for Advanced Custom Fields.', 'start': 986.788, 'duration': 11.225}, {'end': 1004.055, 'text': 'And it is this one right here, this first one.', 'start': 1001.494, 'duration': 2.561}, {'end': 1008.497, 'text': "So we'll install that.", 'start': 1004.075, 'duration': 4.422}, {'end': 1013.519, 'text': "Okay, we'll activate it.", 'start': 1012.398, 'duration': 1.121}, {'end': 1019.661, 'text': "Now, by default, we'll be able to add custom fields.", 'start': 1015.599, 'duration': 4.062}, {'end': 1021.082, 'text': "We're going to set that up in a second.", 'start': 1019.681, 'duration': 1.401}, {'end': 1025.384, 'text': "However, they're not going to be visible to the REST API.", 'start': 1021.162, 'duration': 4.222}], 'summary': "Installing and activating advanced custom fields plugin to add custom fields, but they won't be visible to the rest api.", 'duration': 38.596, 'max_score': 986.788, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro986788.jpg'}], 'start': 113.629, 'title': 'Wordpress rest api and jwt authentication', 'summary': 'Discusses setting up a wordpress installation using docker and utilizing the rest api to access resources, endpoints, and requests, including jwt authentication implementation, resulting in successful post creation and management in the wordpress content management system.', 'chapters': [{'end': 503.005, 'start': 113.629, 'title': 'Wordpress rest api setup', 'summary': 'Discusses setting up a wordpress installation using docker and using the rest api to access different resources, endpoints, and making requests, including the authentication process, with practical examples and explanations of the data structure and responses.', 'duration': 389.376, 'highlights': ['Setting up a WordPress installation using Docker compose file, which includes MySQL, PHP, phpMyAdmin, and WordPress with Apache. The chapter describes creating a Docker compose file that sets up MySQL, PHP, phpMyAdmin, and WordPress with Apache using a single command.', 'Accessing different resources such as posts, categories, pages, users, and media using the REST API. The REST API provides access to resources like posts, categories, pages, users, and media.', 'Explanation of making GET requests to different endpoints and handling 404 errors by adjusting the permalinks setting. The process of making GET requests to endpoints is explained, along with addressing 404 errors by adjusting the permalinks setting.', 'Demonstration of adding a new post using the REST API and encountering an unauthorized 401 status due to lack of authentication. The chapter provides a practical demonstration of adding a new post using the REST API and encountering an unauthorized 401 status due to the lack of authentication.', 'Details on the data structure and responses returned by the REST API, including the structure of posts, authors, and the authentication process using JSON web tokens. The REST API data structure and responses, including the structure of posts, authors, and the authentication process using JSON web tokens, are explained in detail.']}, {'end': 764.44, 'start': 503.005, 'title': 'Implementing jwt authentication for wordpress rest api', 'summary': 'Details the process of implementing jwt authentication for wordpress rest api, including adding a plugin, modifying htaccess and wp config files, obtaining and using a token, and making authenticated requests, resulting in successful post creation and management in the wordpress content management system.', 'duration': 261.435, 'highlights': ['The process involves adding a JWT authentication plugin, modifying htaccess and wp config files, obtaining a token, and making authenticated requests, resulting in successful post creation and management in the WordPress content management system. The process of implementing JWT authentication for WordPress REST API, successful post creation and management.', "The plugin 'JWT Authentication for WordPress REST API' is installed and activated. Installation and activation of the 'JWT Authentication for WordPress REST API' plugin.", 'Configuration changes are made to the htaccess and wp config files to enable JWT authentication. Configuration changes in the htaccess and wp config files for enabling JWT authentication.', 'A token is obtained and used to make authenticated requests, resulting in successful post creation and management in the WordPress content management system. Obtaining and using a token for authenticated requests, successful post creation and management.']}, {'end': 1150.737, 'start': 764.44, 'title': 'Adding custom post types and fields in wordpress', 'summary': 'Explains how to add custom post types like books and custom fields like publisher using plugins like custom post type ui and advanced custom fields, and accessing the data through the rest api, with a demonstration of fetching and manipulating the data.', 'duration': 386.297, 'highlights': ["Custom Post Type UI plugin is installed and used to create a custom post type called 'books' with the settings for plural, singular, REST API availability, and other details. Demonstrates the installation and configuration of Custom Post Type UI plugin to create a custom post type for books.", 'Books are added as custom post types with excerpts, featured images, and dummy content, showcasing the publication process. Illustrates the process of adding books as custom post types with excerpts and featured images, providing a practical demonstration.', 'Accessing the custom post type data through the REST API is demonstrated, including fetching multiple books and a specific book using Postman. Shows the usage of REST API to access custom post type data, with an example of fetching multiple books and a specific book using Postman.', "Advanced Custom Fields plugin is installed and used to add a custom field 'publisher' to the custom post type 'books' and demonstrated its visibility in the REST API response. Explains the installation and usage of Advanced Custom Fields plugin to add a custom field 'publisher' to the custom post type 'books' and its visibility in the REST API response."]}], 'duration': 1037.108, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro113629.jpg', 'highlights': ['Setting up a WordPress installation using Docker compose file, including MySQL, PHP, phpMyAdmin, and WordPress with Apache.', 'Accessing different resources such as posts, categories, pages, users, and media using the REST API.', 'Demonstration of adding a new post using the REST API and encountering an unauthorized 401 status due to lack of authentication.', 'The process involves adding a JWT authentication plugin, modifying htaccess and wp config files, obtaining a token, and making authenticated requests, resulting in successful post creation and management in the WordPress content management system.', "Custom Post Type UI plugin is installed and used to create a custom post type called 'books' with the settings for plural, singular, REST API availability, and other details.", 'Books are added as custom post types with excerpts, featured images, and dummy content, showcasing the publication process.', 'Accessing the custom post type data through the REST API is demonstrated, including fetching multiple books and a specific book using Postman.', "Advanced Custom Fields plugin is installed and used to add a custom field 'publisher' to the custom post type 'books' and demonstrated its visibility in the REST API response."]}, {'end': 1500.525, 'segs': [{'end': 1199.791, 'src': 'embed', 'start': 1173.112, 'weight': 1, 'content': [{'end': 1180.877, 'text': "maybe give you some ideas, get the gear spinning in your head so you can start to create some stuff using this if you're interested.", 'start': 1173.112, 'duration': 7.765}, {'end': 1191.345, 'text': "So let's jump into VS code and I'll clear this up and I'm going to use create react app to create our react application.", 'start': 1181.657, 'duration': 9.688}, {'end': 1194.887, 'text': "But I'm going to use NPX instead of installing it globally with NPM.", 'start': 1191.385, 'duration': 3.502}, {'end': 1199.791, 'text': "So we'll just do NPX create dash react dash app.", 'start': 1195.028, 'duration': 4.763}], 'summary': 'Using npx instead of npm to create react app in vs code', 'duration': 26.679, 'max_score': 1173.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro1173112.jpg'}, {'end': 1282.983, 'src': 'embed', 'start': 1227.397, 'weight': 0, 'content': [{'end': 1229.779, 'text': 'I want to install Axios to make our requests.', 'start': 1227.397, 'duration': 2.382}, {'end': 1232.26, 'text': "If you want to use the Fetch API, that's fine as well.", 'start': 1229.979, 'duration': 2.281}, {'end': 1234.381, 'text': 'And then also React..', 'start': 1232.78, 'duration': 1.601}, {'end': 1248.118, 'text': "router Dom because I'd like to have a list of our book reviews and then be able to click a button and go to that single review page or that book page.", 'start': 1235.652, 'duration': 12.466}, {'end': 1251.299, 'text': "And it's going to be very simple.", 'start': 1250.299, 'duration': 1}, {'end': 1253.64, 'text': "I'm not going to use any styling or anything like that.", 'start': 1251.319, 'duration': 2.321}, {'end': 1256.941, 'text': "The goal isn't to build an awesome application.", 'start': 1254.821, 'duration': 2.12}, {'end': 1260.303, 'text': "It's just to give you an idea of how to work with the API.", 'start': 1256.981, 'duration': 3.322}, {'end': 1263.349, 'text': 'All right.', 'start': 1263.049, 'duration': 0.3}, {'end': 1264.21, 'text': "So that's all set.", 'start': 1263.369, 'duration': 0.841}, {'end': 1269.033, 'text': "Now I'm going to just run the create react app server.", 'start': 1264.53, 'duration': 4.503}, {'end': 1270.194, 'text': 'So NPM start.', 'start': 1269.073, 'duration': 1.121}, {'end': 1278.78, 'text': "Make sure you're in your front end folder and that will open it up on port 3000.", 'start': 1270.214, 'duration': 8.566}, {'end': 1280.201, 'text': 'Close these other tabs here.', 'start': 1278.78, 'duration': 1.421}, {'end': 1282.983, 'text': 'All right.', 'start': 1280.221, 'duration': 2.762}], 'summary': 'Installing axios and react router dom for a simple book review app.', 'duration': 55.586, 'max_score': 1227.397, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro1227397.jpg'}, {'end': 1391.681, 'src': 'heatmap', 'start': 1360.744, 'weight': 0.784, 'content': [{'end': 1368.494, 'text': "Now I'm going to add inside our package.json file, which is right here I'm going to add a proxy for localhost 8000,", 'start': 1360.744, 'duration': 7.75}, {'end': 1371.537, 'text': "just so we don't have to specify that for every request.", 'start': 1368.494, 'duration': 3.043}, {'end': 1380.473, 'text': "So let's say proxy and let's set that to HTTP localhost port 8000.", 'start': 1371.597, 'duration': 8.876}, {'end': 1383.956, 'text': "OK so we'll save that that way we don't have to include that in our request.", 'start': 1380.473, 'duration': 3.483}, {'end': 1391.681, 'text': "So inside books I'm going to generate a class based component and I'm using an extension for V.S.", 'start': 1384.856, 'duration': 6.825}], 'summary': 'Added proxy for localhost 8000 in package.json to simplify requests.', 'duration': 30.937, 'max_score': 1360.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro1360744.jpg'}], 'start': 1151.637, 'title': 'Creating a react app with api integration', 'summary': 'Focuses on creating a react app utilizing an api, demonstrating the use of npx to create a react app, installing necessary packages like axios and react router dom, and making a request to the api using axios.', 'chapters': [{'end': 1500.525, 'start': 1151.637, 'title': 'Creating a react app with api integration', 'summary': 'Focuses on creating a react app utilizing an api, showcasing the use of npx to create a react app, installing necessary packages like axios and react router dom, and making a request to the api using axios.', 'duration': 348.888, 'highlights': ['The chapter focuses on creating a React app utilizing an API The main focus of the chapter is to demonstrate the process of creating a React app and integrating it with an API.', 'Showcasing the use of NPX to create a React app The usage of NPX to create a React app is highlighted as a simple and efficient method.', 'Installing necessary packages like Axios and React Router Dom The installation of essential packages like Axios and React Router Dom for making API requests and managing routes is emphasized.', 'Making a request to the API using Axios The process of making a request to the API using Axios is illustrated, including setting up the request URL and handling responses.']}], 'duration': 348.888, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro1151637.jpg', 'highlights': ['The chapter focuses on creating a React app utilizing an API.', 'Showcasing the use of NPX to create a React app.', 'Installing necessary packages like Axios and React Router Dom.', 'Making a request to the API using Axios.']}, {'end': 1873.354, 'segs': [{'end': 1572.891, 'src': 'embed', 'start': 1500.525, 'weight': 0, 'content': [{'end': 1513.821, 'text': "so this dot set state put in our state object and the books we're going to set to the data that comes back and then let's set the is loaded to true.", 'start': 1500.525, 'duration': 13.296}, {'end': 1517.744, 'text': 'So that should make the request.', 'start': 1516.264, 'duration': 1.48}, {'end': 1525.367, 'text': "Now, just to make sure, let's actually go in our render and let's console log this dot state.", 'start': 1518.185, 'duration': 7.182}, {'end': 1528.047, 'text': "And we'll save that.", 'start': 1527.167, 'duration': 0.88}, {'end': 1529.268, 'text': "We'll go to app.js.", 'start': 1528.087, 'duration': 1.181}, {'end': 1530.888, 'text': "We'll bring in our component.", 'start': 1529.648, 'duration': 1.24}, {'end': 1538.471, 'text': 'So import books from dot slash components slash books.', 'start': 1531.308, 'duration': 7.163}, {'end': 1542.792, 'text': "And let's replace this H1.", 'start': 1539.791, 'duration': 3.001}, {'end': 1545.673, 'text': 'with books.', 'start': 1544.972, 'duration': 0.701}, {'end': 1548.274, 'text': 'OK, so save that.', 'start': 1546.913, 'duration': 1.361}, {'end': 1552.657, 'text': 'This should be upper case.', 'start': 1551.677, 'duration': 0.98}, {'end': 1557.701, 'text': 'OK, so if I open up my console here.', 'start': 1554.979, 'duration': 2.722}, {'end': 1568.488, 'text': 'Oh, you know what, when when we create a proxy in the package, Jason, you have to restart your server.', 'start': 1563.825, 'duration': 4.663}, {'end': 1570.589, 'text': "That's why it's saying it's a four or four.", 'start': 1568.788, 'duration': 1.801}, {'end': 1572.891, 'text': "So let's just go ahead and restart that.", 'start': 1571.09, 'duration': 1.801}], 'summary': 'Setting state and rendering books component, encountering server restart issue.', 'duration': 72.366, 'max_score': 1500.525, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro1500525.jpg'}, {'end': 1629.41, 'src': 'embed', 'start': 1596.893, 'weight': 4, 'content': [{'end': 1602.636, 'text': "so inside of our books component, Let's, let's get rid of this.", 'start': 1596.893, 'duration': 5.743}, {'end': 1603.677, 'text': "We don't need that.", 'start': 1602.996, 'duration': 0.681}, {'end': 1606.818, 'text': "And let's pull some stuff from the state.", 'start': 1603.737, 'duration': 3.081}, {'end': 1610.88, 'text': "So we'll use destructuring and we'll pull out books and is loaded.", 'start': 1606.898, 'duration': 3.982}, {'end': 1614.682, 'text': "We'll pull those values out from this state.", 'start': 1610.9, 'duration': 3.782}, {'end': 1619.044, 'text': "OK, and then we're going to check to see if loaded.", 'start': 1614.702, 'duration': 4.342}, {'end': 1619.744, 'text': 'So if.', 'start': 1619.164, 'duration': 0.58}, {'end': 1629.41, 'text': "Is loaded, then let's We'll move this return up.", 'start': 1623.506, 'duration': 5.904}], 'summary': 'Refactored books component to use state values for books and is loaded.', 'duration': 32.517, 'max_score': 1596.893, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro1596893.jpg'}, {'end': 1716.299, 'src': 'embed', 'start': 1688.709, 'weight': 1, 'content': [{'end': 1691.89, 'text': "And as you can see for a second, it's loading until it gets the data.", 'start': 1688.709, 'duration': 3.181}, {'end': 1695.271, 'text': "And then it's showing us book one and book two, which are the title.", 'start': 1691.97, 'duration': 3.301}, {'end': 1699.452, 'text': "And we're getting this warning just because we don't have a key on this list.", 'start': 1695.991, 'duration': 3.461}, {'end': 1705.995, 'text': 'But what I want to do is instead of an H4, I want this to be a whole new component called book item.', 'start': 1700.052, 'duration': 5.943}, {'end': 1709.776, 'text': "So let's actually create a new file in components.", 'start': 1706.695, 'duration': 3.081}, {'end': 1712.477, 'text': 'called book item.js.', 'start': 1710.436, 'duration': 2.041}, {'end': 1716.299, 'text': "And before we add anything here, I'm going to bring it into books.", 'start': 1713.017, 'duration': 3.282}], 'summary': 'Loading data, displaying book titles, creating a new component called book item', 'duration': 27.59, 'max_score': 1688.709, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro1688709.jpg'}, {'end': 1777.942, 'src': 'embed', 'start': 1749.571, 'weight': 3, 'content': [{'end': 1752.433, 'text': "Okay, and then it's gonna complain about a key like it is here.", 'start': 1749.571, 'duration': 2.862}, {'end': 1760.932, 'text': "So we need a unique key passed in so let's set the key to the ID the book ID All right.", 'start': 1752.493, 'duration': 8.439}, {'end': 1763.454, 'text': "So we'll go ahead and save that.", 'start': 1762.173, 'duration': 1.281}, {'end': 1766.435, 'text': "Of course, we're going to get an error because there's nothing in book items.", 'start': 1763.654, 'duration': 2.781}, {'end': 1769.737, 'text': "So I'm going to generate a class based component here.", 'start': 1766.515, 'duration': 3.222}, {'end': 1773.84, 'text': "And let's go down to the div.", 'start': 1770.978, 'duration': 2.862}, {'end': 1776.721, 'text': "And we're going to load.", 'start': 1775.681, 'duration': 1.04}, {'end': 1777.942, 'text': "Let's see.", 'start': 1777.182, 'duration': 0.76}], 'summary': 'Discussing setting a unique key for a book id and generating a class-based component.', 'duration': 28.371, 'max_score': 1749.571, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro1749571.jpg'}, {'end': 1873.354, 'src': 'embed', 'start': 1842.759, 'weight': 5, 'content': [{'end': 1854.783, 'text': "excerpt dot rendered, and if i save that, it shows the excerpt, but it also shows the html that's there, and obviously that's not what we want.", 'start': 1842.759, 'duration': 12.024}, {'end': 1863.146, 'text': 'so we need to use an attribute called dangerously set inner html, which will allow us to actually parse this html.', 'start': 1854.783, 'duration': 8.363}, {'end': 1873.354, 'text': "so instead of putting this directly in the div, i'm going to add to the div an attribute of dangerous, dangerously set inner HTML.", 'start': 1863.146, 'duration': 10.208}], 'summary': 'Using dangerously set inner html to parse html and avoid rendering issues.', 'duration': 30.595, 'max_score': 1842.759, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro1842759.jpg'}], 'start': 1500.525, 'title': 'Fetching and displaying books and react component book item', 'summary': "Explains the process of making a request to fetch books data, updating the state, and displaying the fetched data in a component, with a focus on setting the isloaded state and mapping through the books data to display it. it also demonstrates creating a new react component called 'book item' to display book titles and excerpts, using props and dangerously set inner html, while addressing the need for unique keys and handling warnings.", 'chapters': [{'end': 1663.219, 'start': 1500.525, 'title': 'Fetching and displaying books', 'summary': 'Explains the process of making a request to fetch books data, updating the state, and displaying the fetched data in a component, with a focus on setting the isloaded state and mapping through the books data to display it.', 'duration': 162.694, 'highlights': ['Explaining the process of setting the isLoaded state and retrieving the books data. The process involves setting the isLoaded state to true after making the request to fetch the data, and then displaying the fetched data in a component.', 'Emphasizing the importance of restarting the server after creating a proxy in the package.json file. The speaker highlights the need to restart the server after creating a proxy, as failure to do so results in a 404 error.', 'Demonstrating the use of destructuring to pull out the books and isLoaded values from the state. The explanation includes the use of destructuring to extract the books and isLoaded values from the state object.']}, {'end': 1873.354, 'start': 1663.219, 'title': 'React component book item', 'summary': "Demonstrates creating a new react component called 'book item' to display book titles and excerpts, using props and dangerously set inner html, while addressing the need for unique keys and handling warnings.", 'duration': 210.135, 'highlights': ["Creating a new React component called 'book item' in a file called book item.js within the components directory. The chapter demonstrates the creation of a new React component named 'book item' in a file called book item.js within the components directory, which is used to display book titles and excerpts.", "Passing a unique key, the book ID, as a prop to the 'book item' component to address warning about missing keys in a list. The chapter highlights the need to pass a unique key, the book ID, as a prop to the 'book item' component to address the warning about missing keys in a list.", 'Using dangerously set inner HTML attribute to parse HTML and display excerpts without unwanted HTML tags. The chapter explains the use of the dangerously set inner HTML attribute to parse HTML and display excerpts without unwanted HTML tags, addressing the issue of displaying raw HTML content.']}], 'duration': 372.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro1500525.jpg', 'highlights': ['Explaining the process of setting the isLoaded state and retrieving the books data.', "Creating a new React component called 'book item' in a file called book item.js within the components directory.", 'Emphasizing the importance of restarting the server after creating a proxy in the package.json file.', "Passing a unique key, the book ID, as a prop to the 'book item' component to address warning about missing keys in a list.", 'Demonstrating the use of destructuring to pull out the books and isLoaded values from the state.', 'Using dangerously set inner HTML attribute to parse HTML and display excerpts without unwanted HTML tags.']}, {'end': 2461.893, 'segs': [{'end': 2112.625, 'src': 'embed', 'start': 2010.237, 'weight': 0, 'content': [{'end': 2013.819, 'text': 'Under sizes, I want to get the full size and then the source URL.', 'start': 2010.237, 'duration': 3.582}, {'end': 2018.203, 'text': 'Quite a bit of digging to get to what we want, but we can do it.', 'start': 2013.9, 'duration': 4.303}, {'end': 2023.867, 'text': "The way I'm going to do it, since we have two requests, is I'm going to use promise.all,", 'start': 2019.664, 'duration': 4.203}, {'end': 2027.649, 'text': "because Axios returns a promise and I'm not going to do nested thens.", 'start': 2023.867, 'duration': 3.782}, {'end': 2032.672, 'text': 'I want to do this in a more, I guess, readable syntax.', 'start': 2028.149, 'duration': 4.523}, {'end': 2037.595, 'text': "So let's do const get image URL.", 'start': 2032.732, 'duration': 4.863}, {'end': 2041.977, 'text': 'Set that to the Axios request, which is going to be a get request.', 'start': 2038.255, 'duration': 3.722}, {'end': 2056.313, 'text': "And then here I'm gonna put in back ticks because I want to put a variable in and it's gonna be slash WP dash Jason, slash WP, slash v2 slash media.", 'start': 2043.626, 'duration': 12.687}, {'end': 2059.139, 'text': 'And then we want the I.D.', 'start': 2057.819, 'duration': 1.32}, {'end': 2061.042, 'text': 'now the I.D.', 'start': 2059.741, 'duration': 1.301}, {'end': 2062.202, 'text': "we're going to pull.", 'start': 2061.402, 'duration': 0.8}, {'end': 2065.864, 'text': "Let's pull that from the props.", 'start': 2064.344, 'duration': 1.52}, {'end': 2070.909, 'text': "So it's a const and it's called featured media.", 'start': 2066.666, 'duration': 4.243}, {'end': 2074.592, 'text': 'So featured underscore media.', 'start': 2071.63, 'duration': 2.962}, {'end': 2077.234, 'text': "And we're also going to want the author.", 'start': 2075.472, 'duration': 1.762}, {'end': 2082.016, 'text': "And let's pull that from this dot props dot book.", 'start': 2078.975, 'duration': 3.041}, {'end': 2085.98, 'text': "OK And then we'll pass that in as a variable.", 'start': 2083.178, 'duration': 2.802}, {'end': 2089.518, 'text': 'So Featured media like that.', 'start': 2086.121, 'duration': 3.397}, {'end': 2091.318, 'text': "So that's our first request.", 'start': 2090.018, 'duration': 1.3}, {'end': 2094.279, 'text': "Now, the second one I'm going to put, which is to get the author.", 'start': 2091.398, 'duration': 2.881}, {'end': 2099.701, 'text': "So let's do equals Axios get.", 'start': 2095.719, 'duration': 3.982}, {'end': 2106.663, 'text': 'And we want to pass in slash WP dash Jason.', 'start': 2101.961, 'duration': 4.702}, {'end': 2112.625, 'text': "And it's going to be WP slash version two slash.", 'start': 2108.203, 'duration': 4.422}], 'summary': 'Using axios for two requests, getting image url and author data.', 'duration': 102.388, 'max_score': 2010.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro2010237.jpg'}, {'end': 2243.667, 'src': 'embed', 'start': 2149.511, 'weight': 3, 'content': [{'end': 2153.431, 'text': "we're going to add an array of the with these variables.", 'start': 2149.511, 'duration': 3.92}, {'end': 2160.172, 'text': 'so get image URL and get author.', 'start': 2153.431, 'duration': 6.741}, {'end': 2162.813, 'text': 'OK And then this will give us a promise.', 'start': 2160.933, 'duration': 1.88}, {'end': 2167.394, 'text': "So we'll say dot then and this will have the data for both inside of an array.", 'start': 2162.913, 'duration': 4.481}, {'end': 2169.314, 'text': "So let's say for the results.", 'start': 2167.514, 'duration': 1.8}, {'end': 2173.943, 'text': "We're going to then set state.", 'start': 2172.182, 'duration': 1.761}, {'end': 2180.346, 'text': "So this dot set state and let's set the image.", 'start': 2174.103, 'duration': 6.243}, {'end': 2182.487, 'text': "Actually, I didn't even add the state yet.", 'start': 2180.986, 'duration': 1.501}, {'end': 2191.051, 'text': "So let's go up here and let's say we want in our state image URL.", 'start': 2182.567, 'duration': 8.484}, {'end': 2195.113, 'text': 'We also want the author.', 'start': 2193.592, 'duration': 1.521}, {'end': 2198.054, 'text': "And then let's also do an is loaded.", 'start': 2196.253, 'duration': 1.801}, {'end': 2200.021, 'text': 'as false.', 'start': 2199.361, 'duration': 0.66}, {'end': 2207.564, 'text': "okay, and then, once we get this stuff here, we're going to set the image url and this is going to give us.", 'start': 2200.021, 'duration': 7.543}, {'end': 2215.307, 'text': 'this result is going to be basically an array, and the first actually i can.', 'start': 2207.564, 'duration': 7.743}, {'end': 2220.529, 'text': "just let me just show you what this gives us, just for those of you that haven't used promise.all.", 'start': 2215.307, 'duration': 5.222}, {'end': 2227.451, 'text': "so let's do a console log of uh result, All right.", 'start': 2220.529, 'duration': 6.922}, {'end': 2229.894, 'text': 'so, as you can see, we get to open this up.', 'start': 2227.451, 'duration': 2.443}, {'end': 2232.957, 'text': 'We get an array with two objects.', 'start': 2230.575, 'duration': 2.382}, {'end': 2238.042, 'text': 'The first one, if we look in data, is going to give us the image.', 'start': 2232.997, 'duration': 5.045}, {'end': 2241.665, 'text': 'So it has media details, sizes, full.', 'start': 2238.382, 'duration': 3.283}, {'end': 2243.667, 'text': 'and then source url.', 'start': 2242.466, 'duration': 1.201}], 'summary': 'Using promise.all to retrieve image url and author data in an array.', 'duration': 94.156, 'max_score': 2149.511, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro2149511.jpg'}, {'end': 2376.892, 'src': 'embed', 'start': 2347.183, 'weight': 5, 'content': [{'end': 2351.706, 'text': "And then after this if statement, I'm just going to simply return null.", 'start': 2347.183, 'duration': 4.523}, {'end': 2354.959, 'text': 'All right.', 'start': 2354.639, 'duration': 0.32}, {'end': 2358.741, 'text': 'And now inside here, now we have access to the image URL and the author.', 'start': 2355.079, 'duration': 3.662}, {'end': 2367.527, 'text': "So under the H2, I'm just going to put in a small tag and just say review by.", 'start': 2359.162, 'duration': 8.365}, {'end': 2373.91, 'text': "And let's put in some strong tags and we should now have access to the author.", 'start': 2367.547, 'duration': 6.363}, {'end': 2376.892, 'text': 'OK And then.', 'start': 2373.93, 'duration': 2.962}], 'summary': 'Code returns null after if statement, accesses image url and author for review.', 'duration': 29.709, 'max_score': 2347.183, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro2347183.jpg'}, {'end': 2461.893, 'src': 'embed', 'start': 2412.585, 'weight': 7, 'content': [{'end': 2421.452, 'text': "Okay, and I'm just going to add here a style.", 'start': 2412.585, 'duration': 8.867}, {'end': 2428.618, 'text': "I just want the width to be 100% just so it doesn't go out of its container.", 'start': 2421.472, 'duration': 7.146}, {'end': 2430.659, 'text': 'So set width to 100%.', 'start': 2429.378, 'duration': 1.281}, {'end': 2435.083, 'text': 'All right, so that should give us the image.', 'start': 2430.659, 'duration': 4.424}, {'end': 2436.384, 'text': "Let's save it.", 'start': 2435.763, 'duration': 0.621}, {'end': 2442.308, 'text': "All right, so let's see, it's giving us the author.", 'start': 2439.707, 'duration': 2.601}, {'end': 2445.108, 'text': "However, the image doesn't seem to be working.", 'start': 2442.708, 'duration': 2.4}, {'end': 2454.871, 'text': 'Image URL is assigned.', 'start': 2453.551, 'duration': 1.32}, {'end': 2459.752, 'text': "Oh, this is in quotes, shouldn't be in quotes.", 'start': 2457.452, 'duration': 2.3}, {'end': 2461.893, 'text': 'Save that.', 'start': 2461.353, 'duration': 0.54}], 'summary': 'Adjusting image width to 100% to fit container, fixing image url assignment.', 'duration': 49.308, 'max_score': 2412.585, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro2412585.jpg'}], 'start': 1873.354, 'title': 'Fetching book information with axios and promise.all', 'summary': 'Explains how to use axios and promise.all to fetch book information, including making requests to get the image and author details, and utilizing the wordpress api to access specific data. it also discusses using promise.all to handle multiple requests in a readable syntax, and demonstrates making get requests, handling multiple requests, and updating the state with the received data for image url and author information.', 'chapters': [{'end': 2037.595, 'start': 1873.354, 'title': 'Fetching book information with axios and promise.all', 'summary': 'Explains how to use axios and promise.all to fetch book information, including making requests to get the image and author details, and utilizing the wordpress api to access specific data. it also discusses the process of using promise.all to handle multiple requests in a readable syntax.', 'duration': 164.241, 'highlights': ['The chapter emphasizes the use of Axios and Promise.all to efficiently handle multiple requests, avoiding nested thens and ensuring a more readable syntax.', 'It discusses the process of making requests to the WordPress API to retrieve specific data, such as fetching the image and author details for a book.', 'The transcript details the use of Promise.all to handle multiple asynchronous requests, showcasing its efficiency in managing concurrent data retrieval.']}, {'end': 2243.667, 'start': 2038.255, 'title': 'Using axios to make get requests and handling promise.all', 'summary': 'Demonstrates how to use axios to make get requests for fetching media and author information, utilizing promise.all to handle multiple requests, and updating the state with the received data for image url and author information.', 'duration': 205.412, 'highlights': ['Demonstrates making a GET request using Axios to fetch media information Using Axios to make a GET request for fetching media information from the endpoint /WP-Jason/WP/v2/media', 'Explains making a GET request using Axios to retrieve author information Using Axios to make a GET request for retrieving author information from the endpoint /WP-Jason/WP/v2/users', 'Illustrates the usage of promise.all to handle multiple requests Demonstrating the use of promise.all to handle multiple requests for fetching media and author information simultaneously', 'Shows updating the state with received data for image URL, author, and isLoaded Updating the state with the received data for image URL, author, and setting isLoaded to false initially']}, {'end': 2461.893, 'start': 2243.667, 'title': 'Code refactoring and ui modification', 'summary': "Involves refactoring code to fetch and display the author's name and image url, with an issue encountered in displaying the image url.", 'duration': 218.226, 'highlights': ["Refactoring code to fetch and display the author's name and image URL", 'Encountering an issue with displaying the image URL', 'Adjusting the UI to resolve the issue with the image URL', 'Setting the width of the image to 100% to prevent it from going out of its container']}], 'duration': 588.539, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro1873354.jpg', 'highlights': ['The chapter emphasizes the use of Axios and Promise.all to efficiently handle multiple requests, avoiding nested thens and ensuring a more readable syntax.', 'Demonstrates making a GET request using Axios to fetch media information Using Axios to make a GET request for fetching media information from the endpoint /WP-Jason/WP/v2/media', 'Explains making a GET request using Axios to retrieve author information Using Axios to make a GET request for retrieving author information from the endpoint /WP-Jason/WP/v2/users', 'Illustrates the usage of promise.all to handle multiple requests Demonstrating the use of promise.all to handle multiple requests for fetching media and author information simultaneously', 'Shows updating the state with received data for image URL, author, and isLoaded Updating the state with the received data for image URL, author, and setting isLoaded to false initially', "Refactoring code to fetch and display the author's name and image URL", 'Encountering an issue with displaying the image URL', 'Adjusting the UI to resolve the issue with the image URL', 'Setting the width of the image to 100% to prevent it from going out of its container', 'The transcript details the use of Promise.all to handle multiple asynchronous requests, showcasing its efficiency in managing concurrent data retrieval.']}, {'end': 3088.908, 'segs': [{'end': 2515.756, 'src': 'embed', 'start': 2462.742, 'weight': 1, 'content': [{'end': 2463.182, 'text': 'There we go.', 'start': 2462.742, 'duration': 0.44}, {'end': 2464.543, 'text': 'So now we have the image.', 'start': 2463.523, 'duration': 1.02}, {'end': 2465.164, 'text': 'All right.', 'start': 2464.944, 'duration': 0.22}, {'end': 2470.108, 'text': 'And we have access to pretty much any of that data that that comes from the API.', 'start': 2465.184, 'duration': 4.924}, {'end': 2472.33, 'text': 'If you want to add more here.', 'start': 2470.168, 'duration': 2.162}, {'end': 2480.156, 'text': 'Now, I want to have a link that goes to that goes to a single book page.', 'start': 2473.271, 'duration': 6.885}, {'end': 2481.437, 'text': "So we'll have to create a row.", 'start': 2480.296, 'duration': 1.141}, {'end': 2482.638, 'text': "But let's just add the link.", 'start': 2481.477, 'duration': 1.161}, {'end': 2488.403, 'text': "So up here, let's bring in from react router Dom.", 'start': 2483.139, 'duration': 5.264}, {'end': 2489.304, 'text': "We'll bring in the link.", 'start': 2488.443, 'duration': 0.861}, {'end': 2515.756, 'text': "and let's go let's see let's put under the excerpt let's do let's put the link there so we'll say link to And this, too, is going to be dynamic.", 'start': 2496.395, 'duration': 19.361}], 'summary': 'Transcript discusses accessing data from api and adding dynamic links to a book page using react router dom.', 'duration': 53.014, 'max_score': 2462.742, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro2462742.jpg'}, {'end': 2602.407, 'src': 'embed', 'start': 2533.549, 'weight': 4, 'content': [{'end': 2538.974, 'text': "And then we'll just say book review or read review.", 'start': 2533.549, 'duration': 5.425}, {'end': 2547.275, 'text': "And then I'm just going to put an HR underneath just to separate them out a little.", 'start': 2541.772, 'duration': 5.503}, {'end': 2550.337, 'text': "So we're going to get an error because we're using link.", 'start': 2548.216, 'duration': 2.121}, {'end': 2552.499, 'text': "However, we haven't implemented the router yet.", 'start': 2550.377, 'duration': 2.122}, {'end': 2564.086, 'text': "So let's go to app JS and let's bring in let's say import browser router as router.", 'start': 2552.999, 'duration': 11.087}, {'end': 2565.687, 'text': 'And we also want to bring in route.', 'start': 2564.186, 'duration': 1.501}, {'end': 2574.408, 'text': "from the reactor or Dom, and then we're just going to surround see down here.", 'start': 2568.365, 'duration': 6.043}, {'end': 2582.872, 'text': "Let's surround this with router and we actually don't need a div here.", 'start': 2574.528, 'duration': 8.344}, {'end': 2592.917, 'text': "I'm going to bring in fragment from react and let's just change this right here to fragment.", 'start': 2582.892, 'duration': 10.025}, {'end': 2597.662, 'text': 'fragment, which is just like a ghost element.', 'start': 2595.14, 'duration': 2.522}, {'end': 2602.407, 'text': "it doesn't actually show up in the dom and then we don't want to just place in books.", 'start': 2597.662, 'duration': 4.745}], 'summary': 'Discussing implementation of router and fragment in app js for book review.', 'duration': 68.858, 'max_score': 2533.549, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro2533549.jpg'}, {'end': 2746.007, 'src': 'embed', 'start': 2705.935, 'weight': 2, 'content': [{'end': 2707.317, 'text': 'We have to bring Axios in.', 'start': 2705.935, 'duration': 1.382}, {'end': 2710.462, 'text': "So we'll import Axios.", 'start': 2707.337, 'duration': 3.125}, {'end': 2716.832, 'text': "OK, and then let's make a get request.", 'start': 2710.482, 'duration': 6.35}, {'end': 2730.325, 'text': "Going to put some back ticks in here and we're going to go slash WP dash Jason slash WP slash version two slash books.", 'start': 2720.623, 'duration': 9.702}, {'end': 2732.565, 'text': 'And then we want the ID.', 'start': 2731.265, 'duration': 1.3}, {'end': 2738.846, 'text': 'Now, since the ID is in a in a route parameter, we can access this through the props.', 'start': 2732.645, 'duration': 6.201}, {'end': 2743.727, 'text': "It's this dot props dot match dot params.", 'start': 2739.266, 'duration': 4.461}, {'end': 2746.007, 'text': 'And the param we want is the ID.', 'start': 2744.147, 'duration': 1.86}], 'summary': 'Import axios, make a get request to /wp-jason/wp/version2/books for the id.', 'duration': 40.072, 'max_score': 2705.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro2705935.jpg'}, {'end': 3020.363, 'src': 'embed', 'start': 2998.67, 'weight': 0, 'content': [{'end': 3007.033, 'text': 'hold your authentication in that state with the token store, the token in local storage, so that when you go to add a post or add a book,', 'start': 2998.67, 'duration': 8.363}, {'end': 3011.215, 'text': "I should say anything at all that you're adding or updating or deleting.", 'start': 3007.033, 'duration': 4.182}, {'end': 3012.956, 'text': 'you need to send along that token.', 'start': 3011.215, 'duration': 1.741}, {'end': 3015.197, 'text': 'Okay, so create a login page.', 'start': 3012.976, 'duration': 2.221}, {'end': 3020.363, 'text': 'Log in, get the token, store it, and then use that to make requests to protected routes.', 'start': 3015.777, 'duration': 4.586}], 'summary': 'Store authentication token in local storage to access protected routes.', 'duration': 21.693, 'max_score': 2998.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro2998670.jpg'}], 'start': 2462.742, 'title': 'Implementing dynamic links and api integration with react router', 'summary': 'Covers implementing a dynamic link to a single book page using react router dom, including importing necessary components and using a fragment, as well as setting up routes for components, making api calls to fetch data, and rendering the retrieved data with insights on using rest api and state management for authentication.', 'chapters': [{'end': 2602.407, 'start': 2462.742, 'title': 'Implementing dynamic link to single book page', 'summary': 'Covers implementing a dynamic link to a single book page using react router dom, including importing the necessary components and surrounding the content with the router, and using a fragment instead of a div for cleaner code.', 'duration': 139.665, 'highlights': ["Implementing dynamic link to a single book page using React Router Dom The chapter covers adding a dynamic link to a single book page by importing 'Link' from React Router Dom and using 'link to' with a dynamic URL.", "Importing necessary components and surrounding content with the Router Importing 'BrowserRouter' and 'Route' from React Router Dom and surrounding the content with 'BrowserRouter' to implement the dynamic link.", "Using a fragment instead of a div for cleaner code Utilizing 'fragment' from React to replace a div for cleaner and more organized code structure."]}, {'end': 3088.908, 'start': 2602.407, 'title': 'React router and api integration', 'summary': 'Covers setting up routes for components, making api calls to fetch data, and rendering the retrieved data with react, including insights on using the rest api, custom fields, and state management for authentication.', 'duration': 486.501, 'highlights': ["Setting up routes for components and making API calls to fetch data The chapter discusses creating routes for components, such as 'books' and 'book page', and making API calls using Axios to retrieve data from the WordPress REST API.", "Rendering retrieved data with React and integrating custom fields The tutorial demonstrates rendering data fetched from the API, including the title, content, and custom fields like 'publisher', offering insights on incorporating custom fields from the API response into the rendered content.", 'Insights on using state management for authentication and API request authorization The chapter provides insights on using state management for authentication, token storage in local storage, and making requests to protected routes with the token, offering guidance on incorporating authentication mechanisms into React applications.']}], 'duration': 626.166, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fFNXWinbgro/pics/fFNXWinbgro2462742.jpg', 'highlights': ['Insights on using state management for authentication and API request authorization The chapter provides insights on using state management for authentication, token storage in local storage, and making requests to protected routes with the token, offering guidance on incorporating authentication mechanisms into React applications.', "Rendering retrieved data with React and integrating custom fields The tutorial demonstrates rendering data fetched from the API, including the title, content, and custom fields like 'publisher', offering insights on incorporating custom fields from the API response into the rendered content.", "Setting up routes for components and making API calls to fetch data The chapter discusses creating routes for components, such as 'books' and 'book page', and making API calls using Axios to retrieve data from the WordPress REST API.", "Implementing dynamic link to a single book page using React Router Dom The chapter covers adding a dynamic link to a single book page by importing 'Link' from React Router Dom and using 'link to' with a dynamic URL.", "Importing necessary components and surrounding content with the Router Importing 'BrowserRouter' and 'Route' from React Router Dom and surrounding the content with 'BrowserRouter' to implement the dynamic link.", "Using a fragment instead of a div for cleaner code Utilizing 'fragment' from React to replace a div for cleaner and more organized code structure."]}], 'highlights': ['The WordPress REST API enables using WordPress as a content management system, beneficial for freelancers and clients to add their own content.', 'Setting up a quick React application on the front end to interact with the WordPress REST API, fetching data, and drawing similarities with front end authentication used in the Django and react series.', 'Demonstrates the use of JWT Rest API plugin for authentication, obtaining a token for authentication, and adding content through Postman, an HTTP client.', 'Setting up a WordPress installation using Docker compose file, including MySQL, PHP, phpMyAdmin, and WordPress with Apache.', 'Accessing different resources such as posts, categories, pages, users, and media using the REST API.', 'Demonstration of adding a new post using the REST API and encountering an unauthorized 401 status due to lack of authentication.', 'The process involves adding a JWT authentication plugin, modifying htaccess and wp config files, obtaining a token, and making authenticated requests, resulting in successful post creation and management in the WordPress content management system.', "Custom Post Type UI plugin is installed and used to create a custom post type called 'books' with the settings for plural, singular, REST API availability, and other details.", 'Books are added as custom post types with excerpts, featured images, and dummy content, showcasing the publication process.', 'Accessing the custom post type data through the REST API is demonstrated, including fetching multiple books and a specific book using Postman.', "Advanced Custom Fields plugin is installed and used to add a custom field 'publisher' to the custom post type 'books' and demonstrated its visibility in the REST API response.", 'The chapter focuses on creating a React app utilizing an API.', 'Showcasing the use of NPX to create a React app.', 'Installing necessary packages like Axios and React Router Dom.', 'Making a request to the API using Axios.', 'Explaining the process of setting the isLoaded state and retrieving the books data.', "Creating a new React component called 'book item' in a file called book item.js within the components directory.", 'Emphasizing the importance of restarting the server after creating a proxy in the package.json file.', "Passing a unique key, the book ID, as a prop to the 'book item' component to address warning about missing keys in a list.", 'Demonstrating the use of destructuring to pull out the books and isLoaded values from the state.', 'Using dangerously set inner HTML attribute to parse HTML and display excerpts without unwanted HTML tags.', 'The chapter emphasizes the use of Axios and Promise.all to efficiently handle multiple requests, avoiding nested thens and ensuring a more readable syntax.', 'Demonstrates making a GET request using Axios to fetch media information Using Axios to make a GET request for fetching media information from the endpoint /WP-Jason/WP/v2/media', 'Explains making a GET request using Axios to retrieve author information Using Axios to make a GET request for retrieving author information from the endpoint /WP-Jason/WP/v2/users', 'Illustrates the usage of promise.all to handle multiple requests Demonstrating the use of promise.all to handle multiple requests for fetching media and author information simultaneously', 'Shows updating the state with received data for image URL, author, and isLoaded Updating the state with the received data for image URL, author, and setting isLoaded to false initially', "Refactoring code to fetch and display the author's name and image URL", 'Encountering an issue with displaying the image URL', 'Adjusting the UI to resolve the issue with the image URL', 'Setting the width of the image to 100% to prevent it from going out of its container', 'The transcript details the use of Promise.all to handle multiple asynchronous requests, showcasing its efficiency in managing concurrent data retrieval.', 'Insights on using state management for authentication and API request authorization The chapter provides insights on using state management for authentication, token storage in local storage, and making requests to protected routes with the token, offering guidance on incorporating authentication mechanisms into React applications.', "Rendering retrieved data with React and integrating custom fields The tutorial demonstrates rendering data fetched from the API, including the title, content, and custom fields like 'publisher', offering insights on incorporating custom fields from the API response into the rendered content.", "Setting up routes for components and making API calls to fetch data The chapter discusses creating routes for components, such as 'books' and 'book page', and making API calls using Axios to retrieve data from the WordPress REST API.", "Implementing dynamic link to a single book page using React Router Dom The chapter covers adding a dynamic link to a single book page by importing 'Link' from React Router Dom and using 'link to' with a dynamic URL.", "Importing necessary components and surrounding content with the Router Importing 'BrowserRouter' and 'Route' from React Router Dom and surrounding the content with 'BrowserRouter' to implement the dynamic link.", "Using a fragment instead of a div for cleaner code Utilizing 'fragment' from React to replace a div for cleaner and more organized code structure."]}