1 00:00:00,320 --> 00:00:00,650 Okay. 2 00:00:00,650 --> 00:00:06,710 So now that we can reach our back end and we can fetch our products, we can also fetch single products. 3 00:00:06,710 --> 00:00:13,070 I want to fetch them from our React application because right now we're just bringing in the JavaScript 4 00:00:13,070 --> 00:00:15,260 file directly into the front end. 5 00:00:15,260 --> 00:00:18,080 And then after that we'll start to work on our database. 6 00:00:18,080 --> 00:00:24,740 So I have NPM run dev running, so both the back end and front end, but we're going to jump into the 7 00:00:24,740 --> 00:00:28,610 front end and I'm going to be using Axios to fetch data. 8 00:00:28,610 --> 00:00:31,490 If you want to stick with the fetch API, you can do that. 9 00:00:31,490 --> 00:00:33,200 I just prefer Axios. 10 00:00:33,230 --> 00:00:34,520 I think it's easier. 11 00:00:34,520 --> 00:00:36,110 I think it's more full featured. 12 00:00:36,110 --> 00:00:42,350 So what I'm going to do is just I guess I'll just stop the server for a second and then CD Well you 13 00:00:42,350 --> 00:00:42,710 know what? 14 00:00:42,710 --> 00:00:44,910 I have front end open in another terminal. 15 00:00:44,930 --> 00:00:49,520 Just make sure that you're in your front end because now we're installing a front end dependency. 16 00:00:49,520 --> 00:00:53,450 So NPM install Axios. 17 00:00:56,060 --> 00:00:58,070 Again, make sure you're in your front end. 18 00:00:58,070 --> 00:01:04,069 So if you go to front end and then Package.json, you should see Axios along with all the other front 19 00:01:04,069 --> 00:01:04,879 end stuff. 20 00:01:04,910 --> 00:01:10,790 Actually, I want to go back into that front end package.json and we're going to add a proxy so you 21 00:01:10,790 --> 00:01:12,080 guys don't have to type this out. 22 00:01:12,080 --> 00:01:14,120 I'm just going to I just want to explain this. 23 00:01:14,120 --> 00:01:17,330 So let's say we're using fetch, we're using Axios. 24 00:01:17,330 --> 00:01:19,540 But for this example, I'll say fetch. 25 00:01:19,550 --> 00:01:24,740 We don't want to have to do Http and then localhost. 26 00:01:26,530 --> 00:01:31,090 Localhost port, 5000 slash products. 27 00:01:31,090 --> 00:01:36,460 We don't have to we don't want to have to do that when we make a request from actually it would be slash 28 00:01:36,490 --> 00:01:37,840 API products. 29 00:01:37,840 --> 00:01:44,410 But what we would what we want to be able to do is simply do slash API products. 30 00:01:44,410 --> 00:01:50,800 So this, this fixes a few issues, adding a proxy for one, we don't have to type as much. 31 00:01:50,800 --> 00:01:52,960 We don't, you know, we don't have to type it. 32 00:01:52,990 --> 00:01:54,370 We don't have to change it. 33 00:01:54,370 --> 00:01:59,320 When we deploy to something else, we don't have to have a conditional saying, Well, you know, if 34 00:01:59,320 --> 00:02:03,400 we're on if we're on development, then use localhost 5000. 35 00:02:03,400 --> 00:02:06,280 If we're in production, use whatever the domain is. 36 00:02:06,280 --> 00:02:12,040 So what we can do is add a proxy so that when we hit anything within 37 00:02:14,230 --> 00:02:22,030 API, whatever, that's going to look at localhost 5000 instead of 3000, which is where our front end 38 00:02:22,060 --> 00:02:22,870 runs. 39 00:02:22,870 --> 00:02:24,220 So let's do that. 40 00:02:24,220 --> 00:02:25,300 And that's very simple. 41 00:02:25,300 --> 00:02:31,460 All we have to do is in the package.json I'm going to put this, I'll just put it right here. 42 00:02:31,460 --> 00:02:33,560 We just want to add proxy. 43 00:02:34,870 --> 00:02:42,340 And we just want to set a value of that to Http and then our back end, which is going to be localhost 44 00:02:42,340 --> 00:02:46,840 port 5000 and just put a comma at the end and that's it. 45 00:02:46,840 --> 00:02:54,190 So now when we do slash API slash products or orders or whatever, it's going to look at this domain. 46 00:02:54,670 --> 00:02:55,300 Okay? 47 00:02:55,300 --> 00:03:01,150 In development, when we, when we're in production, we're not even using this file or anything like 48 00:03:01,150 --> 00:03:01,330 that. 49 00:03:01,330 --> 00:03:03,070 We're not using the dev server. 50 00:03:03,250 --> 00:03:10,840 So now let's go ahead and go back into the root and run npm run dev, which will run both. 51 00:03:13,250 --> 00:03:13,670 Okay. 52 00:03:13,670 --> 00:03:17,360 And now what I'd like to do is this home screen here. 53 00:03:17,360 --> 00:03:22,940 Instead of bringing in the products file, I want to fetch the products from the back end. 54 00:03:22,940 --> 00:03:26,300 So let's go to source and let's see. 55 00:03:26,300 --> 00:03:31,160 We have our home screen and we're making the requests from. 56 00:03:32,360 --> 00:03:33,610 We're not making a request. 57 00:03:33,620 --> 00:03:39,170 We're just bringing in products here and then we're using it, mapping through and showing the each 58 00:03:39,170 --> 00:03:39,920 product. 59 00:03:39,920 --> 00:03:44,260 But I want to get rid of this because I want to now fetch them from the back end. 60 00:03:44,270 --> 00:03:49,940 So since this is a React component, it's a client side component, obviously we're not dealing with 61 00:03:49,940 --> 00:03:55,460 Next.js or anything like that, so we're using the Useeffect hook to fetch our data. 62 00:03:55,460 --> 00:04:02,540 So let's import, let's say import use effect from React. 63 00:04:03,110 --> 00:04:03,520 Okay. 64 00:04:03,530 --> 00:04:09,980 And then we'll also we'll also bring in use state because the products are going to be part of our state 65 00:04:09,980 --> 00:04:10,730 for now. 66 00:04:10,760 --> 00:04:13,040 Later on we're going to be using Redux. 67 00:04:13,040 --> 00:04:18,950 So we'll fetch everything from Redux and pass it down into the components that need it. 68 00:04:18,950 --> 00:04:22,340 But just for now, we're fetching it from this particular component. 69 00:04:22,970 --> 00:04:30,530 So for our state, let's go right in here and let's say Const Products is going to be the name of that 70 00:04:30,530 --> 00:04:31,280 piece of state. 71 00:04:31,280 --> 00:04:35,060 And then set products will be used to update that piece of state. 72 00:04:35,060 --> 00:04:37,700 And that's going to be an empty array by default. 73 00:04:37,730 --> 00:04:40,460 Then use effect is going to be ran. 74 00:04:42,360 --> 00:04:43,620 Let's just close this up. 75 00:04:43,620 --> 00:04:45,630 So go like that. 76 00:04:45,630 --> 00:04:47,940 And we need our dependency array. 77 00:04:47,940 --> 00:04:51,750 So basically, this isn't like an intro to React. 78 00:04:51,750 --> 00:04:57,210 I'm hoping you guys know most of this, but this is an array of dependencies where if you put something 79 00:04:57,210 --> 00:05:03,780 in here and that value changes, this use effect is going to run okay, but we only want it to run once 80 00:05:03,780 --> 00:05:05,100 when the page loads. 81 00:05:05,100 --> 00:05:07,950 So we're just going to leave this as an empty array. 82 00:05:08,190 --> 00:05:14,070 Now in the use effect, since I want to use async await, actually this gives me pretty much exactly 83 00:05:14,070 --> 00:05:14,970 what I want. 84 00:05:15,150 --> 00:05:16,740 So we're fetching the products. 85 00:05:16,740 --> 00:05:18,660 We have an async function. 86 00:05:18,660 --> 00:05:23,400 We're awaiting on Axios to get the products from slash API products. 87 00:05:23,400 --> 00:05:30,150 And since we added that proxy, we don't have to add localhost 5000 and we're just getting that data. 88 00:05:30,150 --> 00:05:36,060 So we're Destructuring Destructuring the data and then we're calling set products to add it to that 89 00:05:36,060 --> 00:05:37,890 piece of state to products. 90 00:05:37,890 --> 00:05:42,850 And down here we shouldn't have to change anything because we're still looking at a variable called 91 00:05:42,850 --> 00:05:46,420 products, which now pertains to that piece of state. 92 00:05:46,420 --> 00:05:48,010 So if I save this. 93 00:05:48,670 --> 00:05:49,510 Let's see. 94 00:05:49,540 --> 00:05:50,830 Axios is not defined. 95 00:05:50,860 --> 00:05:52,390 Of course we need to bring that in. 96 00:05:52,390 --> 00:05:55,240 So let's import Axios. 97 00:05:55,980 --> 00:06:01,080 And now you'll see that it shows the products, but now it's coming from the back end. 98 00:06:01,080 --> 00:06:02,610 In fact, we can open up. 99 00:06:03,440 --> 00:06:05,660 Let's open up our network tab here. 100 00:06:06,740 --> 00:06:08,630 And let's reload. 101 00:06:10,500 --> 00:06:17,250 And you can see right here, if we look at products, we're getting a response with that array of products 102 00:06:17,250 --> 00:06:18,420 from here. 103 00:06:18,420 --> 00:06:20,460 Now it says localhost 3000. 104 00:06:20,460 --> 00:06:22,620 But remember, we added that proxy. 105 00:06:22,620 --> 00:06:25,230 So it's really getting it from 5000. 106 00:06:26,260 --> 00:06:31,540 Okay, now I want to do the same thing with the inner page because the inner page we can close home 107 00:06:31,540 --> 00:06:36,390 screen up if we go to the product screen where we're doing the same thing we did before. 108 00:06:36,400 --> 00:06:42,340 Just bringing in the file, however, I want to fetch, you know, fetch that from the back end as well 109 00:06:42,340 --> 00:06:43,810 so we can get rid of that. 110 00:06:43,810 --> 00:06:46,990 And let's import Axios. 111 00:06:47,380 --> 00:06:54,490 So import Axios from Axios and then we also want use effect and use state. 112 00:06:54,490 --> 00:06:59,410 So let's say use state use effect. 113 00:07:00,970 --> 00:07:05,150 And let's see, we're going to add our state. 114 00:07:05,170 --> 00:07:07,660 Let's put that right here at the top. 115 00:07:07,660 --> 00:07:10,180 So it's going to be just product singular. 116 00:07:10,180 --> 00:07:11,470 And then. 117 00:07:12,080 --> 00:07:13,130 Down here. 118 00:07:13,130 --> 00:07:13,990 Let's see. 119 00:07:14,000 --> 00:07:15,500 We want the ID. 120 00:07:15,680 --> 00:07:16,490 We don't. 121 00:07:17,680 --> 00:07:19,660 Want to do this here. 122 00:07:20,910 --> 00:07:21,470 But what? 123 00:07:21,630 --> 00:07:25,800 Yeah, well, we don't want to do that at all because we're fetching the data, so let's put our use 124 00:07:25,800 --> 00:07:26,700 effect. 125 00:07:28,310 --> 00:07:31,190 And we just end this. 126 00:07:34,340 --> 00:07:36,530 Uh, oops, that should be curly brace. 127 00:07:36,530 --> 00:07:38,370 And then we want just an empty. 128 00:07:38,390 --> 00:07:39,980 Actually, we don't want this to be empty. 129 00:07:40,010 --> 00:07:44,350 Now, if the product ID changes, we want this to run, right? 130 00:07:44,390 --> 00:07:50,090 So we're going to add product ID as a dependency and then let's create a function here. 131 00:07:50,090 --> 00:07:56,330 So fetch product, we're going to get the single product, call the function, and we're basically doing 132 00:07:56,330 --> 00:08:02,630 the same thing we did in the home screen, except we're getting the single product with that ID, getting 133 00:08:02,630 --> 00:08:06,140 it, getting getting the data, setting the product state. 134 00:08:06,140 --> 00:08:09,560 And then down here we're using that product. 135 00:08:09,560 --> 00:08:11,210 So let's save that. 136 00:08:12,590 --> 00:08:14,240 And let's see. 137 00:08:15,030 --> 00:08:20,160 Uh, export use state, import it as use state was not found. 138 00:08:20,190 --> 00:08:21,300 Did I bring that in? 139 00:08:21,300 --> 00:08:21,630 I did. 140 00:08:21,630 --> 00:08:23,700 I brought it in from React router dom. 141 00:08:23,700 --> 00:08:27,510 So these two need to bring in need to be brought in from. 142 00:08:28,500 --> 00:08:30,150 React not react. 143 00:08:30,150 --> 00:08:31,110 Router dom. 144 00:08:37,809 --> 00:08:38,530 Okay. 145 00:08:38,530 --> 00:08:39,700 And let's see. 146 00:08:39,700 --> 00:08:40,330 There we go. 147 00:08:40,330 --> 00:08:41,260 Reload. 148 00:08:41,350 --> 00:08:43,090 And now that works. 149 00:08:45,010 --> 00:08:52,420 And just to double check, if we go to our network tab and we reload, you'll see that it's getting 150 00:08:52,420 --> 00:08:57,970 the ID, So API product slash three and that's the response. 151 00:08:59,790 --> 00:09:00,510 All right, cool. 152 00:09:00,510 --> 00:09:06,540 So we do have, you know, our front end where we're fetching data from our back end. 153 00:09:06,540 --> 00:09:11,340 But right now the data is just the file on the back end. 154 00:09:11,370 --> 00:09:13,620 Obviously, we want that to come from a database. 155 00:09:13,620 --> 00:09:15,590 So we're going to start to work on that. 156 00:09:15,600 --> 00:09:20,670 Now you can delete in the front end folder, you can delete the products. 157 00:09:21,270 --> 00:09:23,010 Let's see, where do we put that right here. 158 00:09:23,010 --> 00:09:23,490 Products. 159 00:09:23,490 --> 00:09:28,200 JS You can delete that because we're no longer using that. 160 00:09:28,230 --> 00:09:35,730 We're using the products file in the back end in the data folder for now so that everything should still 161 00:09:35,730 --> 00:09:36,480 work. 162 00:09:37,290 --> 00:09:37,890 Okay. 163 00:09:37,890 --> 00:09:44,100 So like I said, in the next video, we'll start to get into creating our database so that we can have 164 00:09:44,100 --> 00:09:45,780 our products come from there.