title
React Axios API Requests | Axios with React JS Tutorial

description
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap Learn React Axios API Requests in this tutorial. We will implement Axios with React JS as we build our React JS Blog project. Axios makes API requests easier than using the Fetch API in Javascript. ⭐ Become a full-stack web dev with Zero To Mastery Courses: - Advanced React: https://bit.ly/AdvReactDev - Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr - Master FAANG Coding Interviews: https://bit.ly/FAANGInterview 🚩 Subscribe ➜ https://bit.ly/3nGHmNn 🚀 This lesson is part of a Learn React tutorial series playlist: https://youtube.com/playlist?list=PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp 🔗 Project Source Code: https://github.com/gitdagray/react_axios_requests React Axios API Requests | Axios with React JS Tutorial (00:00) Intro (00:05) Welcome and Tutorial Outline (00:26) JSON Server set up (02:06) Installing Axios (03:29) Setting a baseURL for Axios (04:44) Starting JSON Server (05:21) Starting the React app (06:27) Import the Axios API (07:08) Fetching data with Axios (13:35) Posting data with Axios (17:05) Deleting data with Axios (18:23) Building the handleEdit update function (23:08) Creating the EditPost component (30:24) Adding a Route for the EditPost component (31:52) One more addition to the EditPost component (32:56) Adding an Edit Post button to the PostPage component (33:59) Importing EditPost and testing functionality (35:54) Small CSS Changes 🔗 Axios: https://www.npmjs.com/package/axios 🔗 React Router: https://reactrouter.com 🔗 JSON-Server: https://www.npmjs.com/package/json-server 🔗 ES7 React JS Snippets Extension for VS Code: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets 🔗 React Dev Tools Extension for Chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi 🔗 Styled Components: https://styled-components.com/ 📚 References: MDN Flexbox: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox ReactJS Official site: https://reactjs.org/ React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library) React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location= ✅ Follow Me: Twitter: https://twitter.com/yesdavidgray LinkedIn: https://www.linkedin.com/in/davidagray/ Blog: https://yesdavidgray.com Reddit: https://www.reddit.com/user/DaveOnEleven Was this tutorial about Axios API Requests in React helpful? If so, please share. Let me know your thoughts in the comments. #react #axios #api

detail
{'title': 'React Axios API Requests | Axios with React JS Tutorial', 'heatmap': [{'end': 439.62, 'start': 369.65, 'weight': 0.889}, {'end': 834.494, 'start': 808, 'weight': 0.889}], 'summary': 'Tutorial series covers adding axios to a reactjs blog app, detailing installation, configuration, async functions, crud operations, error handling, updating post functionality, and integrating crud operations in react and javascript, resulting in successful implementation of all crud operations using axios.', 'chapters': [{'end': 125.964, 'segs': [{'end': 59.196, 'src': 'embed', 'start': 29.678, 'weight': 0, 'content': [{'end': 32.759, 'text': "And the first thing I'll do is create a folder named Data.", 'start': 29.678, 'duration': 3.081}, {'end': 38.543, 'text': "And inside this folder, I'm going to create a file named db.json.", 'start': 33.439, 'duration': 5.104}, {'end': 42.706, 'text': "And then inside the db.json, we're going to put data.", 'start': 39.303, 'duration': 3.403}, {'end': 46.829, 'text': 'You could actually copy it and modify it from our app component.', 'start': 43.106, 'duration': 3.723}, {'end': 48.81, 'text': "And I'll open up the app component here.", 'start': 47.169, 'duration': 1.641}, {'end': 54.014, 'text': 'As you can see, we have a static state right now for posts set in the app component.', 'start': 48.85, 'duration': 5.164}, {'end': 59.196, 'text': 'and here we have four test posts and their objects inside an array.', 'start': 54.574, 'duration': 4.622}], 'summary': "Creating a 'data' folder with 'db.json' file containing four test posts and their objects inside an array.", 'duration': 29.518, 'max_score': 29.678, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s29678.jpg'}, {'end': 125.964, 'src': 'embed', 'start': 101.526, 'weight': 2, 'content': [{'end': 108.832, 'text': "I'm going to go ahead and save this and now that I have the db.json file inside of our data folder,", 'start': 101.526, 'duration': 7.306}, {'end': 118.859, 'text': "I'll go back to the app.js and I'm just going to remove everything in the post state and replace it with an empty array,", 'start': 108.832, 'duration': 10.027}, {'end': 120.32, 'text': 'which is how we want to start out.', 'start': 118.859, 'duration': 1.461}, {'end': 121.781, 'text': 'and save.', 'start': 121.221, 'duration': 0.56}, {'end': 125.964, 'text': 'And that is really all we need to get JSON server up and running.', 'start': 122.322, 'duration': 3.642}], 'summary': 'Setting up json server by replacing post state with an empty array in app.js.', 'duration': 24.438, 'max_score': 101.526, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s101526.jpg'}], 'start': 0.179, 'title': 'Adding axios to reactjs blog app', 'summary': 'Covers adding the axios package to a reactjs blog application to request data from a development api set up with json server, simplifying data requests compared to using the fetch api.', 'chapters': [{'end': 125.964, 'start': 0.179, 'title': 'Adding axios to reactjs blog app', 'summary': 'Covers adding the axios package to a reactjs blog application to request data from a development api set up with json server, making data requests easier than using the fetch api.', 'duration': 125.785, 'highlights': ['Setting up a folder named Data and creating a db.json file for the API data.', "Modifying the db.json file to have the same format as the app component's state.", 'Replacing the post state in app.js with an empty array to start JSON server.']}], 'duration': 125.785, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s179.jpg', 'highlights': ["Modifying db.json to match app component's state format", 'Setting up Data folder and creating db.json for API data', 'Replacing post state in app.js with empty array for JSON server']}, {'end': 457.715, 'segs': [{'end': 148.737, 'src': 'embed', 'start': 126.024, 'weight': 0, 'content': [{'end': 133.989, 'text': "So I'm going to collapse the source folder now and click on the package.json because we're going to add Axios as a new dependency.", 'start': 126.024, 'duration': 7.965}, {'end': 140.953, 'text': 'So after we install it, you should see it listed inside the dependencies of your package.json file.', 'start': 134.109, 'duration': 6.844}, {'end': 148.737, 'text': 'Quickly go to Chrome and here at npmjs.com, then slash package, slash axios.', 'start': 141.493, 'duration': 7.244}], 'summary': 'Adding axios as a new dependency to the package.json.', 'duration': 22.713, 'max_score': 126.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s126024.jpg'}, {'end': 275.782, 'src': 'embed', 'start': 216.923, 'weight': 1, 'content': [{'end': 220.164, 'text': "And let's add a new folder inside the source folder.", 'start': 216.923, 'duration': 3.241}, {'end': 222.385, 'text': "And let's name the folder API.", 'start': 220.404, 'duration': 1.981}, {'end': 228.246, 'text': "Inside the API folder, let's go ahead and create a file named posts.", 'start': 223.065, 'duration': 5.181}, {'end': 231.947, 'text': "And then we'll put JS, of course, post JS.", 'start': 228.986, 'duration': 2.961}, {'end': 244.319, 'text': "And now that we've done that, we can import Axios from Axios and now we need to set the base URL that we'll use for Axios throughout the project.", 'start': 232.447, 'duration': 11.872}, {'end': 253.324, 'text': 'So we can just set export default and say Axios dot create and then a parentheses and then a curly brace.', 'start': 244.359, 'duration': 8.965}, {'end': 264.035, 'text': "Now on a separate line we can define the base URL property and we'll set this to our HTTP slash slash local host.", 'start': 253.784, 'duration': 10.251}, {'end': 268.838, 'text': "And then we need port 3500 that we're going to launch our JSON server on.", 'start': 264.535, 'duration': 4.303}, {'end': 271.74, 'text': "And that's essentially all we need in this file.", 'start': 269.458, 'duration': 2.282}, {'end': 275.782, 'text': 'And now Axios will continue to use this base URL.', 'start': 271.86, 'duration': 3.922}], 'summary': 'Created api folder with posts.js file, set base url to http://localhost:3500 for axios.', 'duration': 58.859, 'max_score': 216.923, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s216923.jpg'}, {'end': 356.284, 'src': 'embed', 'start': 305.765, 'weight': 3, 'content': [{'end': 310.149, 'text': 'And that will be data slash db.json.', 'start': 305.765, 'duration': 4.384}, {'end': 314.253, 'text': 'Press Enter, and that should launch our JSON server instance.', 'start': 310.63, 'duration': 3.623}, {'end': 321.459, 'text': "and after we get that started, we'll go ahead and launch our react app in another terminal window.", 'start': 315.174, 'duration': 6.285}, {'end': 323.46, 'text': 'okay, to open a second terminal window,', 'start': 321.459, 'duration': 2.001}, {'end': 331.906, 'text': "i'm just going to click the plus sign here and now you can see we've got a little tree on the right that shows our different terminal windows.", 'start': 323.46, 'duration': 8.446}, {'end': 339.912, 'text': "in this terminal window i'm going to launch our react app just by typing npm start and And once we get this started,", 'start': 331.906, 'duration': 8.006}, {'end': 342.954, 'text': "we shouldn't see any posts because we've changed the state.", 'start': 339.912, 'duration': 3.042}, {'end': 349.539, 'text': 'But then the React app will show any changes we make as we add Axios into our application.', 'start': 343.535, 'duration': 6.004}, {'end': 356.284, 'text': 'And now our application is loaded with no posts to display as we expected since we cleared out the static state.', 'start': 350.019, 'duration': 6.265}], 'summary': 'Launching json server instance and react app in separate terminal windows, observing changes with axios.', 'duration': 50.519, 'max_score': 305.765, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s305765.jpg'}, {'end': 439.62, 'src': 'heatmap', 'start': 369.65, 'weight': 0.889, 'content': [{'end': 375.092, 'text': "I'm going to close the terminal windows, although they will continue to run and we can reopen them at any time.", 'start': 369.65, 'duration': 5.442}, {'end': 382.114, 'text': 'Also going to collapse the open editors area over here in Visual Studio Code so we can see a little bit more of the file tree.', 'start': 375.712, 'duration': 6.402}, {'end': 384.715, 'text': "And we're ready to begin in app.js.", 'start': 382.815, 'duration': 1.9}, {'end': 390.898, 'text': "OK, in app.js, I'm going to hide the file tree quickly.", 'start': 387.216, 'duration': 3.682}, {'end': 394.419, 'text': 'I do that by pressing Control-B in Visual Studio Code.', 'start': 390.918, 'duration': 3.501}, {'end': 395.72, 'text': "I'm using Windows.", 'start': 394.759, 'duration': 0.961}, {'end': 397.421, 'text': 'It may be different in Mac and Linux.', 'start': 395.78, 'duration': 1.641}, {'end': 402.663, 'text': 'But what we need to do at the top is import our API.', 'start': 398.241, 'duration': 4.422}, {'end': 407.925, 'text': "So I'll just add another line under where we imported format.", 'start': 403.263, 'duration': 4.662}, {'end': 410.046, 'text': "And here, I'll import API.", 'start': 408.305, 'duration': 1.741}, {'end': 411.487, 'text': 'And this will be from.', 'start': 410.486, 'duration': 1.001}, {'end': 418.148, 'text': "but remember that's a folder and we can see Visual Studio Code shows us that.", 'start': 414.386, 'duration': 3.762}, {'end': 424.011, 'text': "So we'll select that and then we have posts inside the folder.", 'start': 418.328, 'duration': 5.683}, {'end': 428.734, 'text': "So now we've imported the API and we can use it in the application.", 'start': 424.091, 'duration': 4.643}, {'end': 439.62, 'text': "I'm going to scroll down and underneath our use history line here on line 20, I'm going to press return and start another use effect.", 'start': 429.234, 'duration': 10.386}], 'summary': 'Preparing to begin in app.js by importing api and setting up another use effect.', 'duration': 69.97, 'max_score': 369.65, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s369650.jpg'}], 'start': 126.024, 'title': 'Axios installation and configuration', 'summary': 'Details the process of installing axios using npm, setting base url, and integrating it with a react app to fetch data from a json server launched on port 3500.', 'chapters': [{'end': 244.319, 'start': 126.024, 'title': 'Installing axios for api integration', 'summary': 'Details the process of installing axios as a new dependency using npm, setting the base url, and preparing the project to apply axios for api integration.', 'duration': 118.295, 'highlights': ['The chapter elaborates on installing Axios as a new dependency using npm, which is reflected in the package.json file with Axios listed under the dependencies.', 'It emphasizes the process of setting the base URL for Axios throughout the project to prepare for API integration.', 'The transcript highlights the creation of a new folder named API and a file named posts.js within it, as part of preparing the project for applying Axios for API integration.']}, {'end': 457.715, 'start': 244.359, 'title': 'Configuring axios and launching json server', 'summary': 'Focuses on configuring axios with base url and launching json server on port 3500, and then integrating it with a react app to fetch data from the server.', 'duration': 213.356, 'highlights': ['Configuring base URL for Axios', 'Launching JSON server', 'Integrating Axios with React app to fetch data']}], 'duration': 331.691, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s126024.jpg', 'highlights': ['The chapter elaborates on installing Axios as a new dependency using npm, which is reflected in the package.json file with Axios listed under the dependencies.', 'It emphasizes the process of setting the base URL for Axios throughout the project to prepare for API integration.', 'The transcript highlights the creation of a new folder named API and a file named posts.js within it, as part of preparing the project for applying Axios for API integration.', 'Integrating Axios with React app to fetch data', 'Configuring base URL for Axios', 'Launching JSON server']}, {'end': 782.551, 'segs': [{'end': 545.332, 'src': 'embed', 'start': 486.432, 'weight': 0, 'content': [{'end': 496.499, 'text': "remember, that is the axios instance we're importing and then we can use git, and this is where axios becomes very easy to understand.", 'start': 486.432, 'duration': 10.067}, {'end': 513.23, 'text': 'we actually use the verbiage, the words that we would in a crud operation, possibly in api usage, so like at http, uses git post, put delete,', 'start': 496.499, 'duration': 16.731}, {'end': 515.51, 'text': "there's patch and a few others.", 'start': 513.23, 'duration': 2.28}, {'end': 518.033, 'text': "But we're only going to use the basic CRUD operations.", 'start': 515.591, 'duration': 2.442}, {'end': 521.395, 'text': 'So get would be our read operation in CRUD.', 'start': 518.113, 'duration': 3.282}, {'end': 526.319, 'text': 'And so now we just need to say what endpoint we want with that base URL.', 'start': 522.236, 'duration': 4.083}, {'end': 530.801, 'text': "And of course, we only have one endpoint with this application, and it's posts.", 'start': 526.359, 'duration': 4.442}, {'end': 532.903, 'text': "So we'll go ahead and define that.", 'start': 531.322, 'duration': 1.581}, {'end': 535.685, 'text': 'Now, this replaces fetch.', 'start': 533.543, 'duration': 2.142}, {'end': 545.332, 'text': "And then what's so nice about using Axios instead of fetch is Axios automatically creates that JSON.", 'start': 536.045, 'duration': 9.287}], 'summary': 'Using axios for crud operations simplifies api calls and automatically generates json data.', 'duration': 58.9, 'max_score': 486.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s486432.jpg'}, {'end': 603.192, 'src': 'embed', 'start': 574.373, 'weight': 2, 'content': [{'end': 578.135, 'text': 'Axios will automatically catch anything outside of the 200 range.', 'start': 574.373, 'duration': 3.762}, {'end': 585.199, 'text': 'So what we can do now is just set our state with set posts, because if we get to this point,', 'start': 578.616, 'duration': 6.583}, {'end': 588.481, 'text': "an error has not occurred and we know it's already in the 200 range.", 'start': 585.199, 'duration': 3.282}, {'end': 592.243, 'text': 'And our data is going to be in the response.data.', 'start': 589.162, 'duration': 3.081}, {'end': 603.192, 'text': 'Now, you may see some at this point would say, OK, if we have the response, which we should at this point, it should only be in the 200 range.', 'start': 593.544, 'duration': 9.648}], 'summary': 'Axios catches anything outside 200 range, set state with set posts, data in response.data.', 'duration': 28.819, 'max_score': 574.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s574373.jpg'}, {'end': 787.075, 'src': 'embed', 'start': 758.819, 'weight': 3, 'content': [{'end': 764.681, 'text': "Here we know we didn't get a response in the 200 range, but we got a response from the back end API.", 'start': 758.819, 'duration': 5.862}, {'end': 771.883, 'text': 'Here there was possibly no response, or we got a 404, or something else occurred.', 'start': 765.241, 'duration': 6.642}, {'end': 782.551, 'text': 'but this catches all the other errors right here again, this is directly from the documentation for axios, and it handles those errors very well.', 'start': 772.483, 'duration': 10.068}, {'end': 787.075, 'text': 'so we can pull out extra data if we need to and we can define between those.', 'start': 782.551, 'duration': 4.524}], 'summary': 'Backend api responded to errors with axios documentation.', 'duration': 28.256, 'max_score': 758.819, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s758819.jpg'}], 'start': 458.436, 'title': 'Using axios for async functions and error handling', 'summary': 'Introduces using axios for basic crud operations, simplifying the process, and discusses error handling in api requests, ensuring responses are in the 200 range and handling various error scenarios as per the axios documentation.', 'chapters': [{'end': 545.332, 'start': 458.436, 'title': 'Using axios for async functions', 'summary': 'Introduces using axios for making asynchronous api calls where it explains using axios for basic crud operations and how it simplifies the process, with a focus on replacing fetch and automatically creating json.', 'duration': 86.896, 'highlights': ['Axios simplifies the process of making API calls for basic CRUD operations, providing verbiage for HTTP operations such as get, post, put, delete, and patch.', 'Axios replaces the usage of fetch for making API calls, making the process more straightforward and efficient.', 'Axios automatically creates JSON for the response, eliminating the need for manual JSON parsing.']}, {'end': 782.551, 'start': 545.372, 'title': 'Using axios for error handling in api requests', 'summary': 'Explains how to use axios for making api requests and handling errors, ensuring that responses are in the 200 range, setting state with response data, and handling various error scenarios as per the axios documentation.', 'duration': 237.179, 'highlights': ['Axios automatically catches errors outside the 200 range of HTTP responses, simplifying error handling and allowing direct state setting with response data.', 'The chapter outlines the process of checking for response data to ensure it falls within the 200 range, providing insights into handling potential errors and ensuring the receipt of expected data from the backend API.', 'Detailed explanation and code examples from the Axios documentation are provided for handling various error scenarios, including logging error messages and differentiating between response and non-response errors.']}], 'duration': 324.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s458436.jpg', 'highlights': ['Axios simplifies CRUD operations with HTTP verbiage', 'Axios replaces fetch for more efficient API calls', 'Axios automatically handles errors outside the 200 range', 'Detailed error handling examples from Axios documentation']}, {'end': 1216.052, 'segs': [{'end': 859.766, 'src': 'heatmap', 'start': 808, 'weight': 2, 'content': [{'end': 812.745, 'text': 'And of course, our development server loaded the page as soon as we saved our changes.', 'start': 808, 'duration': 4.745}, {'end': 814.827, 'text': 'And we now have those posts.', 'start': 813.245, 'duration': 1.582}, {'end': 822.169, 'text': 'Now, if you remember, we can post a new blog or make a new post on the post page in our application.', 'start': 815.327, 'duration': 6.842}, {'end': 828.652, 'text': 'So the next thing we need to adjust in our application to use Axios is the handle submit function.', 'start': 822.67, 'duration': 5.982}, {'end': 832.093, 'text': 'Handle submit has a few lines of code that are just a little longer.', 'start': 828.992, 'duration': 3.101}, {'end': 834.494, 'text': "So I'm going to expand Visual Studio Code.", 'start': 832.153, 'duration': 2.341}, {'end': 840.296, 'text': 'We will come back and show the application after we complete this code addition for Axios.', 'start': 834.554, 'duration': 5.742}, {'end': 849.02, 'text': "And of course, this would be the create portion of a CRUD application, the C in CRUD, where we're creating a new post.", 'start': 840.736, 'duration': 8.284}, {'end': 856.264, 'text': 'So after the line 54 that defines new post, we need to start our try block here.', 'start': 849.56, 'duration': 6.704}, {'end': 859.766, 'text': "And of course, I'll delete that ending curly brace.", 'start': 857.205, 'duration': 2.561}], 'summary': 'Development server loaded page instantly, now able to create new blog posts using axios for crud application.', 'duration': 77.215, 'max_score': 808, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s808000.jpg'}, {'end': 992.175, 'src': 'embed', 'start': 963.116, 'weight': 0, 'content': [{'end': 965.177, 'text': 'And then we can set the post to all posts.', 'start': 963.116, 'duration': 2.061}, {'end': 969.78, 'text': 'We can still empty out our controlled form that has the title and the body.', 'start': 965.757, 'duration': 4.023}, {'end': 978.265, 'text': 'And we can use history.push to go back to the actual blog and see the full list in the feed.', 'start': 970.52, 'duration': 7.745}, {'end': 980.307, 'text': 'And so nothing else really changes.', 'start': 978.606, 'duration': 1.701}, {'end': 982.108, 'text': "We're just using Axios.", 'start': 980.747, 'duration': 1.361}, {'end': 985.17, 'text': "And it's really that simple to send the new data.", 'start': 982.228, 'duration': 2.942}, {'end': 992.175, 'text': "And then we're going to update the state with the actual response we get from the API as well and get that .", 'start': 985.65, 'duration': 6.525}], 'summary': 'Using axios to send new data and update state with response from api.', 'duration': 29.059, 'max_score': 963.116, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s963116.jpg'}, {'end': 1117.062, 'src': 'embed', 'start': 1090.48, 'weight': 1, 'content': [{'end': 1097.848, 'text': "so let's go ahead and save and now let's go to the detail page for this test post for tutorial and delete the post,", 'start': 1090.48, 'duration': 7.368}, {'end': 1103.4, 'text': 'And everything seems to be working as it should for the delete operation as well.', 'start': 1099.159, 'duration': 4.241}, {'end': 1111.541, 'text': "And now the most complex operation of the CRUD operations, we've got create, read, and delete completed, but is the update.", 'start': 1103.82, 'duration': 7.721}, {'end': 1117.062, 'text': "And we haven't really added an update component to our application either, so we're going to need to do that.", 'start': 1111.701, 'duration': 5.361}], 'summary': 'Successful completion of crud operations with need for update component.', 'duration': 26.582, 'max_score': 1090.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s1090480.jpg'}, {'end': 1225.397, 'src': 'embed', 'start': 1192.622, 'weight': 5, 'content': [{'end': 1195.944, 'text': "The new post, let's call this updated post.", 'start': 1192.622, 'duration': 3.322}, {'end': 1200.686, 'text': "And now instead of post title, we're going to have edit title.", 'start': 1196.864, 'duration': 3.822}, {'end': 1202.926, 'text': 'And let me expand Visual Studio Code for now.', 'start': 1200.746, 'duration': 2.18}, {'end': 1211.79, 'text': "Instead of post body, we're going to have edit body because this will be a controlled form where we make the edits as well.", 'start': 1203.467, 'duration': 8.323}, {'end': 1214.731, 'text': 'And so we need those pieces of state for the controlled form.', 'start': 1211.95, 'duration': 2.781}, {'end': 1216.052, 'text': 'Now we can.', 'start': 1215.371, 'duration': 0.681}, {'end': 1225.397, 'text': "start our try block and of course, after the try block we'll have the catch block and i'll just copy that down as well.", 'start': 1217.072, 'duration': 8.325}], 'summary': 'Updating post elements to controlled form in visual studio code.', 'duration': 32.775, 'max_score': 1192.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s1192622.jpg'}], 'start': 782.551, 'title': 'Integrating axios for crud operations in react and javascript', 'summary': 'Discusses integrating axios in a react application to fetch and create new posts, emphasizing the use of useeffect and error handling, and covers implementing crud operations in javascript, including creating, viewing, deleting, and updating blog posts.', 'chapters': [{'end': 912.602, 'start': 782.551, 'title': 'Using axios in a react application', 'summary': 'Discusses integrating axios in a react application to fetch and create new posts, with emphasis on using useeffect and handling errors, ensuring smooth data retrieval and post creation.', 'duration': 130.051, 'highlights': ['The chapter explains the process of calling fetch posts inside useEffect, ensuring the posts are obtained as soon as the page loads.', 'The handle submit function is discussed, with an emphasis on handling errors using console.log to display error messages in the development application.', 'The code addition for Axios in the create portion of the CRUD application is highlighted, emphasizing the try block to handle potential failures and the use of console.log to display error messages.']}, {'end': 1216.052, 'start': 913.504, 'title': 'Crud operations with axios in javascript', 'summary': 'Covers the process of implementing crud operations using axios in javascript, including creating a new blog post, viewing all posts, deleting a post, and preparing for updating a post.', 'duration': 302.548, 'highlights': ["The process of creating a new blog post involves using the 'post' method to send data to the API and updating the state with the response data, making it simple to send new data.", "The implementation of the delete operation includes using the 'delete' method to remove a specific post by passing its ID to the API, ensuring the proper functionality of the delete operation.", 'The preparation for updating a post involves creating a function for editing a post, setting up new state variables for edit title and edit body, and using controlled forms for making edits to the post.']}], 'duration': 433.501, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s782551.jpg', 'highlights': ["The process of creating a new blog post involves using the 'post' method to send data to the API and updating the state with the response data, making it simple to send new data.", "The implementation of the delete operation includes using the 'delete' method to remove a specific post by passing its ID to the API, ensuring the proper functionality of the delete operation.", 'The chapter explains the process of calling fetch posts inside useEffect, ensuring the posts are obtained as soon as the page loads.', 'The handle submit function is discussed, with an emphasis on handling errors using console.log to display error messages in the development application.', 'The code addition for Axios in the create portion of the CRUD application is highlighted, emphasizing the try block to handle potential failures and the use of console.log to display error messages.', 'The preparation for updating a post involves creating a function for editing a post, setting up new state variables for edit title and edit body, and using controlled forms for making edits to the post.']}, {'end': 1734.141, 'segs': [{'end': 1268.866, 'src': 'embed', 'start': 1238.515, 'weight': 0, 'content': [{'end': 1247.097, 'text': "We could use patch if we were updating specific fields, but here we'll essentially be replacing the entire post, so we're going to use put.", 'start': 1238.515, 'duration': 8.582}, {'end': 1254.518, 'text': "And we'll put in the endpoint posts, but again, this will need to be specific to the ID of the post.", 'start': 1248.077, 'duration': 6.441}, {'end': 1259.779, 'text': "After that, we'll be passing in our new data, which is the updated post.", 'start': 1255.278, 'duration': 4.501}, {'end': 1268.866, 'text': "Okay, now that we have got the response back from Axios and the backend API, we'll use set posts here.", 'start': 1261.539, 'duration': 7.327}], 'summary': "Using 'put' to replace entire post, passing new data, setting posts with response.", 'duration': 30.351, 'max_score': 1238.515, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s1238515.jpg'}, {'end': 1308.088, 'src': 'embed', 'start': 1283.399, 'weight': 1, 'content': [{'end': 1293.523, 'text': "That is, if we didn't use map, we would be creating an array of posts here, but we'd still have in the old post as we added in the new post as well.", 'start': 1283.399, 'duration': 10.124}, {'end': 1297.905, 'text': 'And we need to eliminate that old post and just add in the new information.', 'start': 1293.543, 'duration': 4.362}, {'end': 1302.466, 'text': "So with map, we'll have each post iterated through.", 'start': 1298.585, 'duration': 3.881}, {'end': 1306.427, 'text': 'And map creates a new array, which is exactly what we need.', 'start': 1303.166, 'duration': 3.261}, {'end': 1308.088, 'text': "So we'll check the post ID.", 'start': 1306.507, 'duration': 1.581}], 'summary': 'Using map, we iterate through posts and create a new array, eliminating old posts and adding new information.', 'duration': 24.689, 'max_score': 1283.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s1283399.jpg'}, {'end': 1387.611, 'src': 'embed', 'start': 1363.539, 'weight': 2, 'content': [{'end': 1374.065, 'text': "And then we'll also need to set edit body back to blank because, again, we don't want to hold that data over for the controlled form in any way.", 'start': 1363.539, 'duration': 10.526}, {'end': 1384.789, 'text': "After that we'll use the history once again and push so we go back to the main feed so we can see our edited post amongst all the other posts and save.", 'start': 1374.365, 'duration': 10.424}, {'end': 1387.611, 'text': 'That should complete the handle edit function.', 'start': 1385.25, 'duration': 2.361}], 'summary': 'Handle edit function: set edit body to blank, use history to go back to main feed, and save.', 'duration': 24.072, 'max_score': 1363.539, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s1363539.jpg'}, {'end': 1501.575, 'src': 'embed', 'start': 1469.801, 'weight': 3, 'content': [{'end': 1473.223, 'text': "Visual Studio Code wants to help, but it's got to get that part right.", 'start': 1469.801, 'duration': 3.422}, {'end': 1478.587, 'text': "Okay, in edit post, we're going to be bringing in some props here.", 'start': 1473.864, 'duration': 4.723}, {'end': 1480.968, 'text': "And there's enough, I'm going to put them on a separate line.", 'start': 1478.667, 'duration': 2.301}, {'end': 1482.769, 'text': "We'll need all the posts.", 'start': 1481.548, 'duration': 1.221}, {'end': 1485.25, 'text': 'We need our handleEdit function.', 'start': 1483.629, 'duration': 1.621}, {'end': 1495.211, 'text': 'We will need the Edit body, the SetEditBody.', 'start': 1486.431, 'duration': 8.78}, {'end': 1501.575, 'text': "We'll need the EditTitle and the SetEditTitle.", 'start': 1496.212, 'duration': 5.363}], 'summary': 'Visual studio code aims to improve by ensuring correct implementation of necessary components and props.', 'duration': 31.774, 'max_score': 1469.801, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s1469801.jpg'}, {'end': 1597.694, 'src': 'embed', 'start': 1567.103, 'weight': 4, 'content': [{'end': 1576.167, 'text': 'But now that we have the post and the ID, we can go ahead and use effect, And this is when this loads.', 'start': 1567.103, 'duration': 9.064}, {'end': 1580.292, 'text': 'we need to pull in this data and set the state for that.', 'start': 1576.167, 'duration': 4.125}, {'end': 1591.985, 'text': "So let's go ahead and say we're going to put in post set edit title and set edit body as the dependencies.", 'start': 1580.432, 'duration': 11.553}, {'end': 1597.694, 'text': "And now inside use effect, we'll actually need to set the state for both of those.", 'start': 1593.612, 'duration': 4.082}], 'summary': 'Using post id, set edit title and body as dependencies in useeffect to set state.', 'duration': 30.591, 'max_score': 1567.103, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s1567103.jpg'}, {'end': 1656.708, 'src': 'embed', 'start': 1629.35, 'weight': 5, 'content': [{'end': 1636.254, 'text': 'and so the form will already be filled out and our controlled form will be ready to edit the existing post.', 'start': 1629.35, 'duration': 6.904}, {'end': 1640.477, 'text': 'The body of the page itself will be much like the new post page.', 'start': 1636.614, 'duration': 3.863}, {'end': 1650.624, 'text': "So let's just go to the new post page and select from the beginning of the main element to the closing main element and then go back to our edit post page,", 'start': 1640.577, 'duration': 10.047}, {'end': 1656.708, 'text': 'where we can just highlight the divs and replace those with what we have on the new post page.', 'start': 1650.624, 'duration': 6.084}], 'summary': 'Create a controlled form for editing existing posts.', 'duration': 27.358, 'max_score': 1629.35, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s1629350.jpg'}], 'start': 1217.072, 'title': 'Editing post functionality', 'summary': 'Covers updating a post using the put method, using map to update the post state, and resetting form fields after editing, ensuring data integrity and user experience. it also details the process of creating an editpost.js component in visual studio code, including importing necessary dependencies, setting up state using useeffect, and formatting the form similar to the new post page.', 'chapters': [{'end': 1387.611, 'start': 1217.072, 'title': 'Handling edit function for posts', 'summary': 'Covers updating a post using the put method, using map to update the post state, and resetting form fields after editing, ensuring data integrity and user experience.', 'duration': 170.539, 'highlights': ['Using the put method to update the entire post, ensuring data integrity and consistent API interaction', 'Utilizing map to iterate through posts and selectively update post information based on IDs, ensuring efficient data manipulation and consistency', 'Resetting form fields after editing to provide a seamless user experience and prevent data persistence issues']}, {'end': 1734.141, 'start': 1388.391, 'title': 'Creating edit component and pathway', 'summary': 'Details the process of creating an editpost.js component in visual studio code, including importing necessary dependencies, setting up state using useeffect, and formatting the form similar to the new post page.', 'duration': 345.75, 'highlights': ['Creating EditPost.js component and importing dependencies', 'Setting up state using useEffect', 'Formatting the form similar to the new post page']}], 'duration': 517.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s1217072.jpg', 'highlights': ['Using the put method to update the entire post, ensuring data integrity and consistent API interaction', 'Utilizing map to iterate through posts and selectively update post information based on IDs, ensuring efficient data manipulation and consistency', 'Resetting form fields after editing to provide a seamless user experience and prevent data persistence issues', 'Creating EditPost.js component and importing dependencies', 'Setting up state using useEffect', 'Formatting the form similar to the new post page']}, {'end': 2310.997, 'segs': [{'end': 1834.691, 'src': 'embed', 'start': 1755.131, 'weight': 1, 'content': [{'end': 1761.733, 'text': 'Instead here, we will prevent default, as we often do with the form.', 'start': 1755.131, 'duration': 6.602}, {'end': 1767.21, 'text': 'inside of the onSubmit call for the form.', 'start': 1765.089, 'duration': 2.121}, {'end': 1774.074, 'text': "So when that happens, that means inside the button here, we're going to need to have an onClick.", 'start': 1767.35, 'duration': 6.724}, {'end': 1777.595, 'text': 'And we can set this equal to an anonymous function.', 'start': 1775.254, 'duration': 2.341}, {'end': 1781.117, 'text': "And inside this anonymous function, we'll call the handleEdit.", 'start': 1777.615, 'duration': 3.502}, {'end': 1784.439, 'text': 'And we need to pass in the post ID here.', 'start': 1781.878, 'duration': 2.561}, {'end': 1787.508, 'text': "And that's why we're not doing that in the On Submit area.", 'start': 1784.946, 'duration': 2.562}, {'end': 1793.911, 'text': 'Now for our controlled form to work, we need to go ahead and update some of the names here.', 'start': 1787.968, 'duration': 5.943}, {'end': 1796.233, 'text': 'Instead of Post Title, it would be Edit Title.', 'start': 1794.192, 'duration': 2.041}, {'end': 1799.275, 'text': 'Instead of Set Post Title, it would be Set Edit Title.', 'start': 1796.313, 'duration': 2.962}, {'end': 1801.356, 'text': 'And that would be the same here.', 'start': 1799.955, 'duration': 1.401}, {'end': 1804.218, 'text': "Instead of Post Body, it's going to be Edit Body.", 'start': 1801.476, 'duration': 2.742}, {'end': 1808.579, 'text': "Instead of set post body, it's going to be set edit body.", 'start': 1804.838, 'duration': 3.741}, {'end': 1818.203, 'text': 'We could change the IDs here, but we know this component will not load at the same time as our new form or our new post form.', 'start': 1809, 'duration': 9.203}, {'end': 1819.964, 'text': "So we don't really need to.", 'start': 1818.283, 'duration': 1.681}, {'end': 1822.224, 'text': "There'll only be one on the page at a time.", 'start': 1820.004, 'duration': 2.22}, {'end': 1823.725, 'text': 'So this should work for us.', 'start': 1822.324, 'duration': 1.401}, {'end': 1832.209, 'text': "Once we save these changes, we've created our new component, but it is still not being routed to in the App.js.", 'start': 1824.185, 'duration': 8.024}, {'end': 1834.691, 'text': 'We still have no way of getting there.', 'start': 1832.65, 'duration': 2.041}], 'summary': 'Updating form names and adding onclick function for handleedit.', 'duration': 79.56, 'max_score': 1755.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s1755131.jpg'}, {'end': 1902.634, 'src': 'embed', 'start': 1869.361, 'weight': 2, 'content': [{'end': 1873.823, 'text': 'We need posts equals posts.', 'start': 1869.361, 'duration': 4.462}, {'end': 1878.806, 'text': 'Instead of handle submit, this will be handle edit.', 'start': 1874.563, 'duration': 4.243}, {'end': 1884.636, 'text': "And now, instead of Post Title, we'll have Edit Title.", 'start': 1880.031, 'duration': 4.605}, {'end': 1886.257, 'text': 'I should have selected both of those.', 'start': 1884.756, 'duration': 1.501}, {'end': 1888.479, 'text': 'Edit Title.', 'start': 1887.939, 'duration': 0.54}, {'end': 1889.941, 'text': 'I will do that now.', 'start': 1888.88, 'duration': 1.061}, {'end': 1893.765, 'text': 'So here, instead of Set Post Title, it will be Edit Title.', 'start': 1890.241, 'duration': 3.524}, {'end': 1902.634, 'text': 'Post body will be edit body and set post body will be set edit body.', 'start': 1895.708, 'duration': 6.926}], 'summary': 'Update post handling from submit to edit, and change title and body accordingly.', 'duration': 33.273, 'max_score': 1869.361, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s1869361.jpg'}, {'end': 2293.077, 'src': 'embed', 'start': 2238.412, 'weight': 0, 'content': [{'end': 2246.056, 'text': "let's create the class delete button that we applied to our delete button and make it red, and now that will change.", 'start': 2238.412, 'duration': 7.644}, {'end': 2255.1, 'text': "and then let's go ahead and create this edit button class that we also applied, but instead of red.", 'start': 2246.056, 'duration': 9.044}, {'end': 2264.169, 'text': "we'll change that to the same color as the nav menu And now the edit post and delete post buttons look a little better.", 'start': 2255.1, 'duration': 9.069}, {'end': 2266.131, 'text': 'We just need a little space there.', 'start': 2264.529, 'duration': 1.602}, {'end': 2273.558, 'text': "So beside the padding that is 0.5 ram, let's say the margin right 0.5 ram as well.", 'start': 2266.231, 'duration': 7.327}, {'end': 2278.609, 'text': 'And now we get a little space between the two buttons.', 'start': 2276.328, 'duration': 2.281}, {'end': 2280.77, 'text': 'Everything seems to be working well.', 'start': 2278.949, 'duration': 1.821}, {'end': 2288.094, 'text': 'We can read posts, we can create new posts, we can delete posts, and we can edit posts as well.', 'start': 2280.95, 'duration': 7.144}, {'end': 2293.077, 'text': 'So we have applied Axios and all CRUD operations to our application.', 'start': 2288.574, 'duration': 4.503}], 'summary': 'Applied styling to delete and edit buttons, added margin for spacing. all crud operations functioning with axios.', 'duration': 54.665, 'max_score': 2238.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s2238412.jpg'}], 'start': 1734.381, 'title': 'Updating form and adding edit functionality', 'summary': 'Discusses updating form and handling submit, making changes to the post title, preventing default behavior, and using an anonymous function for onclick. it also demonstrates adding edit functionality to the post page, including creating a new component, updating the form to allow editing, creating a link for editing, and styling the edit and delete buttons, resulting in successful implementation of all crud operations using axios.', 'chapters': [{'end': 1808.579, 'start': 1734.381, 'title': 'Updating form and handling submit', 'summary': 'Discusses updating a form and handling submit by making changes to the post title and form handling, including preventing default behavior and using an anonymous function for onclick.', 'duration': 74.198, 'highlights': ['Making changes to the post title and form handling', 'Using prevent default for form handling', 'Updating names for controlled form']}, {'end': 2310.997, 'start': 1809, 'title': 'Adding edit functionality to post page', 'summary': 'Demonstrates adding edit functionality to the post page, including creating a new component and routing in app.js, updating the form to allow editing, creating a link for editing, and styling the edit and delete buttons, resulting in the successful implementation of all crud operations using axios.', 'duration': 501.997, 'highlights': ['Successfully implementing all CRUD operations using Axios', 'Styling the edit and delete buttons for improved appearance', 'Creating a new component and routing in App.js', 'Updating the form to allow editing of posts']}], 'duration': 576.616, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEKBDXGnD4s/pics/ZEKBDXGnD4s1734381.jpg', 'highlights': ['Successfully implementing all CRUD operations using Axios', 'Creating a new component and routing in App.js', 'Updating the form to allow editing of posts', 'Styling the edit and delete buttons for improved appearance', 'Making changes to the post title and form handling', 'Using prevent default for form handling', 'Updating names for controlled form']}], 'highlights': ['Successfully implementing all CRUD operations using Axios', 'Axios simplifies CRUD operations with HTTP verbiage', 'Using the put method to update the entire post, ensuring data integrity and consistent API interaction', "The process of creating a new blog post involves using the 'post' method to send data to the API and updating the state with the response data, making it simple to send new data", 'Utilizing map to iterate through posts and selectively update post information based on IDs, ensuring efficient data manipulation and consistency', 'The chapter elaborates on installing Axios as a new dependency using npm, which is reflected in the package.json file with Axios listed under the dependencies', 'The transcript highlights the creation of a new folder named API and a file named posts.js within it, as part of preparing the project for applying Axios for API integration', 'Replacing post state in app.js with empty array for JSON server', 'Setting up Data folder and creating db.json for API data', 'Configuring base URL for Axios', 'Launching JSON server', 'Creating a new component and routing in App.js', 'Creating EditPost.js component and importing dependencies', 'Setting up state using useEffect', 'Formatting the form similar to the new post page', 'The process of calling fetch posts inside useEffect, ensuring the posts are obtained as soon as the page loads', "The implementation of the delete operation includes using the 'delete' method to remove a specific post by passing its ID to the API, ensuring the proper functionality of the delete operation", 'The preparation for updating a post involves creating a function for editing a post, setting up new state variables for edit title and edit body, and using controlled forms for making edits to the post', 'Resetting form fields after editing to provide a seamless user experience and prevent data persistence issues', 'Styling the edit and delete buttons for improved appearance', 'Making changes to the post title and form handling', 'Using prevent default for form handling', 'Updating names for controlled form', 'Axios replaces fetch for more efficient API calls', 'Axios automatically handles errors outside the 200 range', 'Detailed error handling examples from Axios documentation', 'The handle submit function is discussed, with an emphasis on handling errors using console.log to display error messages in the development application', 'The code addition for Axios in the create portion of the CRUD application is highlighted, emphasizing the try block to handle potential failures and the use of console.log to display error messages', "Modifying db.json to match app component's state format"]}