1 00:00:01,020 --> 00:00:03,090 React as fantastic as the library. 2 00:00:03,090 --> 00:00:06,320 Just perfect for rendering complex UI applications. 3 00:00:06,450 --> 00:00:08,580 But there is one very tiny shortcoming. 4 00:00:08,580 --> 00:00:14,580 Once you kind of move into the world of re-act for your application you're really hearing to that re-act 5 00:00:14,580 --> 00:00:19,800 philosophy of that downwards data flow and props and state and all that kind of stuff. 6 00:00:19,800 --> 00:00:20,420 Right. 7 00:00:20,700 --> 00:00:25,770 But it ever so happens that there still tends to be a lot of libraries that you want to use that generate 8 00:00:25,860 --> 00:00:31,260 DOM elements like just raw each female that you still want to get on the page anyways and a fantastic 9 00:00:31,260 --> 00:00:37,920 example of that is Google Maps so Google Maps has a java script client and we can look at a little code 10 00:00:37,920 --> 00:00:39,910 snippet down here. 11 00:00:40,560 --> 00:00:43,800 And here's here's the code snippet Here's the demo of how to actually use it. 12 00:00:43,800 --> 00:00:50,220 So after you clear the script tag you say OK make a new Google Maps map and append it to the element 13 00:00:50,490 --> 00:00:52,540 with an ID of map right here. 14 00:00:52,560 --> 00:00:57,220 So you know like go reach out find a dom element and render it to that Dom element. 15 00:00:57,450 --> 00:01:01,610 But we know that that is not how reactor works reac doesn't work like that and all are re-access. 16 00:01:01,620 --> 00:01:08,850 OK let's nest components within each other and that somehow produces the smell that forms our application 17 00:01:08,850 --> 00:01:09,230 . 18 00:01:09,270 --> 00:01:14,310 We do have a very top level element that gets appended to the DOM you know with our react on Dot render 19 00:01:14,310 --> 00:01:14,800 call. 20 00:01:14,850 --> 00:01:16,400 But that is a single component. 21 00:01:16,410 --> 00:01:20,190 The very top your absolute highest component in our entire hierarchy. 22 00:01:20,190 --> 00:01:23,060 So a little bit dissimilar from what's going on here. 23 00:01:23,400 --> 00:01:28,560 So how do we get the libraries that we want to make use of like the Google Maps API where it tries to 24 00:01:28,560 --> 00:01:31,200 render itself to a very particular Dom element. 25 00:01:31,200 --> 00:01:33,050 How do we get these two things to play together. 26 00:01:33,060 --> 00:01:40,560 How do we merge Google Maps or maybe J.Crew file uploader or your favorite tool tips library or whatever 27 00:01:40,560 --> 00:01:47,070 else it might be any arbitrary third party library out there that renders some each female directly 28 00:01:47,070 --> 00:01:47,820 to the page. 29 00:01:47,820 --> 00:01:50,520 How do we get that to work with react. 30 00:01:50,520 --> 00:01:52,650 So that's the answer that we're going to try to answer today. 31 00:01:52,740 --> 00:01:57,060 But that's the question is asking the question are going to try to answer today how do we get these 32 00:01:57,060 --> 00:01:59,370 third party libraries to work with react. 33 00:01:59,400 --> 00:02:03,590 And so for a very practical example we're going to re-implement this example right here. 34 00:02:03,600 --> 00:02:10,620 How do we get Google Maps to render inside a reactor application without picking up any fancy packages 35 00:02:10,620 --> 00:02:15,300 off of NPM like you know re-act Google Maps or use fancy things that just do it for you. 36 00:02:15,300 --> 00:02:17,380 How do we do this from scratch. 37 00:02:18,060 --> 00:02:20,040 OK so let's give this a shot. 38 00:02:20,040 --> 00:02:25,620 I've already got a skeleton of a project set up right here so if I refresh the page the only thing that's 39 00:02:25,620 --> 00:02:30,350 being produced right now is a single Did that says Matney that's all there is. 40 00:02:30,970 --> 00:02:36,990 If I open up my code editor and let me dial up the font size a little bit there you go. 41 00:02:36,990 --> 00:02:40,310 You can see that I've already got a indexed e-mail file. 42 00:02:40,320 --> 00:02:41,380 Here it is right here. 43 00:02:41,520 --> 00:02:45,450 And I've already included my Google API script tag. 44 00:02:45,450 --> 00:02:49,710 So I've got just the raw Google Maps JS file right here. 45 00:02:49,710 --> 00:02:55,680 This is the thing that we can call create a new map independent to this this dumb element and a map 46 00:02:55,680 --> 00:02:57,080 will appear on the page. 47 00:02:57,090 --> 00:03:04,140 So if we were writing just a very vanilla very plain aged T.M. application this would work fantastically 48 00:03:04,140 --> 00:03:04,250 . 49 00:03:04,320 --> 00:03:09,540 But we want to figure out how to use this with re-act the approach I'm going to outline here is something 50 00:03:09,540 --> 00:03:13,140 that can be reused with any other third party library that you might think of. 51 00:03:13,140 --> 00:03:16,260 So you know I mentioned J.A.G. file uploader. 52 00:03:16,350 --> 00:03:22,800 If you're using DS3 or any Plaut generating library just anything that tries to create its own little 53 00:03:22,800 --> 00:03:27,360 bit of each team out and rendered to the DOM this is something that this is an approach that's going 54 00:03:27,360 --> 00:03:28,730 to work with it. 55 00:03:28,890 --> 00:03:36,360 So it's get a diagram and figure out our general approach here of going to screen a diagram of what 56 00:03:36,450 --> 00:03:41,070 essentially our application might look like we might have a top level component and then a couple other 57 00:03:41,070 --> 00:03:43,350 just very generic Capones in here as well. 58 00:03:43,620 --> 00:03:49,170 So what we're going to do is we're going to create a custom wrapper component so we are going to make 59 00:03:49,170 --> 00:03:54,720 a reata component and we're going to kind of refer to as being a wrapper of sorts and this wrapper is 60 00:03:54,720 --> 00:03:58,850 going to be responsible for interfacing with that custom library in. 61 00:03:58,890 --> 00:04:01,110 In our case Google Maps. 62 00:04:01,110 --> 00:04:05,760 So inside of this wrappers we're going to write a whole bunch of logic that is going to kind of manage 63 00:04:05,760 --> 00:04:11,800 the relationship between our re-act application and this custom library that we're trying to use. 64 00:04:11,820 --> 00:04:15,140 So let's give this a shot and see how it looks. 65 00:04:15,240 --> 00:04:21,810 I'm going to make a new component called Google map. 66 00:04:21,910 --> 00:04:22,360 Yes. 67 00:04:22,380 --> 00:04:25,590 And then inside if you're always put some usual boilerplate just to get started 68 00:04:30,130 --> 00:04:34,200 and then I'll make my class. 69 00:04:35,820 --> 00:04:41,030 And right now I'm going to render excuse me I'm going to return. 70 00:04:41,040 --> 00:04:42,200 There you go. 71 00:04:42,360 --> 00:04:48,840 Just a single death and I'm going to give it a good idea of MPT in this case. 72 00:04:48,840 --> 00:04:54,490 So this idea of map right here is just to get a little bit of styling to work nicely we can Congress 73 00:04:54,490 --> 00:04:59,310 is right now I just have a little bit of CSSA reload up here because that's what Google Maps requires 74 00:04:59,310 --> 00:05:00,700 to render properly. 75 00:05:00,720 --> 00:05:04,950 So if I go back over to my age HTML document you can see I've got an idea of map and it's got a height 76 00:05:04,980 --> 00:05:07,030 of one 100 percent right here. 77 00:05:07,050 --> 00:05:11,890 So the idea of map again just for CSSA that's the only reason I have it in here. 78 00:05:12,030 --> 00:05:13,460 It's now back over an app. 79 00:05:13,500 --> 00:05:22,710 I'm going to render that map component so I've got my import Google map from Google map and I'm going 80 00:05:22,710 --> 00:05:27,810 to place it into my render method. 81 00:05:28,290 --> 00:05:33,330 So now I you know go back over to the browser or refresh the page 82 00:05:37,750 --> 00:05:38,660 and. 83 00:05:38,660 --> 00:05:40,470 OK here's the element that was just created. 84 00:05:40,470 --> 00:05:43,470 I've got my div with idea of map. 85 00:05:43,470 --> 00:05:47,880 It's got a height of 100 percent so you can see it's like nicely filling up the page right there. 86 00:05:47,880 --> 00:05:50,480 So I get the elements definitely showing up on the screen. 87 00:05:50,500 --> 00:05:54,690 So now it's like actually focus on how are you going to do this implementation here. 88 00:05:54,690 --> 00:05:56,240 So here's the general thought. 89 00:05:56,440 --> 00:06:02,310 The general thought process is we are trying to render some custom components some custom like snippet 90 00:06:02,310 --> 00:06:07,440 of each DML that is not really going to be necessarily managed by react like it's not something that 91 00:06:07,440 --> 00:06:10,530 re-act itself is going to render to the screen. 92 00:06:10,920 --> 00:06:17,790 So this wrapper component right here its job is to be that interface between react in our custom component 93 00:06:18,370 --> 00:06:19,840 to be an interface. 94 00:06:19,830 --> 00:06:27,750 Here is the steps we're going to take we're going to render this component exactly one time to the DOM 95 00:06:27,760 --> 00:06:27,890 . 96 00:06:28,020 --> 00:06:32,480 So just one time will render rendered to the Dom when it first gets round to the DOM. 97 00:06:32,580 --> 00:06:39,250 We will call our custom library Google maps here and we'll tell hey Google Maps go render yourself like 98 00:06:39,270 --> 00:06:46,600 go create a map and go shove it into the DOM inside of this wrapper component and then for every future 99 00:06:46,590 --> 00:06:48,830 time that this component tries to re render. 100 00:06:48,840 --> 00:06:51,070 We're going to block it from re rendering. 101 00:06:51,190 --> 00:06:57,540 So if you received some new set of props or anything like that the calls set state anything whatsoever 102 00:06:57,810 --> 00:07:02,820 we are going to block the component from rendering itself because the entire thought process here is 103 00:07:02,820 --> 00:07:07,840 that Google Maps library is going to be totally in charge of rendering that component will not be in 104 00:07:07,830 --> 00:07:10,380 charge for rendering anything only Google Maps. 105 00:07:10,420 --> 00:07:15,720 Well this is definitely one of those examples where I walk into the code I think is a little bit more 106 00:07:15,720 --> 00:07:18,440 helpful than a verbal description for me. 107 00:07:18,490 --> 00:07:22,500 So let's see how the code looks. 108 00:07:22,620 --> 00:07:27,550 Number step 1 here is to say we're only going to render this component exactly one time. 109 00:07:27,660 --> 00:07:30,410 So should a component update. 110 00:07:30,460 --> 00:07:35,390 Is our lifecycle method that determines whether or not this component will ever get to re render. 111 00:07:35,460 --> 00:07:40,900 So the component will always render exactly one time and then every future time the computer receives 112 00:07:41,130 --> 00:07:47,620 some new set of props should component update will be called and we need to either return true or false 113 00:07:47,620 --> 00:07:48,060 in here. 114 00:07:48,120 --> 00:07:51,870 If return True the component will render if return false. 115 00:07:51,880 --> 00:07:58,800 It will not go into 100 percent of the time say after the first time that this component is rendered 116 00:07:58,800 --> 00:08:01,180 to the screen never we render it again. 117 00:08:01,200 --> 00:08:02,680 So return false. 118 00:08:02,670 --> 00:08:03,740 And this is hardcoded. 119 00:08:03,750 --> 00:08:07,310 I never want this thing to attempt to re render itself. 120 00:08:07,830 --> 00:08:11,780 Now inside of a component did mount's. 121 00:08:12,270 --> 00:08:17,430 This is where you know again the component will render one time and then decide if here is where we 122 00:08:17,430 --> 00:08:23,540 will create our Google map and append it to the Dome or kind of insert it into the DOM somewhere. 123 00:08:23,550 --> 00:08:29,910 So when I first put in a little bit of configuration for Google Maps to create a new map so Google Maps 124 00:08:29,900 --> 00:08:36,390 dot map as signature for this we'll talk about the first argument right here. 125 00:08:36,390 --> 00:08:41,880 But the second argument is a little bit of customization for how the map itself works. 126 00:08:41,930 --> 00:08:48,960 When I say send to yourself on a lot of this stop Propst lat and longitude of this stuff Propst thought 127 00:08:49,090 --> 00:08:55,720 long and we'll use a zoom level of 8 that should be good enough. 128 00:08:55,750 --> 00:09:02,870 So now here's the key here's like the real point of interface between these things on this. 129 00:09:02,880 --> 00:09:05,780 Can a dummy element that I might have right here this div.. 130 00:09:05,800 --> 00:09:12,720 I'm going to add a ref of map and remember the ref system is used to get a direct reference to a dom 131 00:09:12,780 --> 00:09:20,860 element Zangana tell Google Maps hey after the component renders itself in this Dom with a ref of map 132 00:09:21,030 --> 00:09:28,680 exists or gives me this element exists in the DOM attempt to render yourself to that div. 133 00:09:28,680 --> 00:09:34,200 So now after component is created you know this div is sitting on the screen and nothing else is sitting 134 00:09:34,200 --> 00:09:37,480 on the screen component did mount will be called. 135 00:09:37,800 --> 00:09:45,070 We will create a new Google map and insert it into that div and I'm going to save a reference to it 136 00:09:45,420 --> 00:09:47,700 as this dot map. 137 00:09:48,510 --> 00:09:48,780 OK. 138 00:09:48,780 --> 00:09:50,990 So let's see how this works and see if it's doing it. 139 00:09:51,000 --> 00:09:55,900 Oh well it's not going to just yet because I'm not providing the latitude and longitude. 140 00:09:56,110 --> 00:10:02,590 So let's flip back over to my map component which is containing Google map and I'm going to assign it 141 00:10:03,150 --> 00:10:06,280 a latitude and longitude. 142 00:10:06,270 --> 00:10:07,590 So I'll give it a lot. 143 00:10:07,640 --> 00:10:18,750 And I was going to hardcoded this for now negative 34 point 3 9 7 and 8 larm of 1 6 4 4. 144 00:10:19,410 --> 00:10:19,680 OK. 145 00:10:19,710 --> 00:10:22,750 So let's see how this works. 146 00:10:22,810 --> 00:10:23,940 I'll refresh the page 147 00:10:32,270 --> 00:10:40,040 and my math peers on the screen and it's centered in Wollongong which is is the default location for 148 00:10:41,970 --> 00:10:44,470 Google Maps I don't know why they chose it but there you go. 149 00:10:44,490 --> 00:10:49,100 I say if you look at the example the documentation I just had up you can see the same latitude longitude 150 00:10:49,110 --> 00:10:49,590 right there. 151 00:10:49,670 --> 00:10:50,640 Toll side no. 152 00:10:50,730 --> 00:10:57,530 Anyway so again the lifecycle here the kind of the end to start this process inside of our Google Map 153 00:10:57,530 --> 00:11:02,820 component is we render this component exactly one time that like initial render. 154 00:11:02,880 --> 00:11:07,660 So we take this div and it gets appended into the doors and we gets inserted to the door. 155 00:11:07,830 --> 00:11:11,920 So we've got this device sitting in there and has a ref of map. 156 00:11:12,000 --> 00:11:17,960 Then immediately after it renders we tell Google Maps or you know and again this could be any other 157 00:11:17,970 --> 00:11:20,850 third party library you want to use whatsoever anything. 158 00:11:21,090 --> 00:11:23,110 In this case I'm just using Google Maps. 159 00:11:23,390 --> 00:11:28,230 So hey Google Maps go and make a new map and then append yourself to this start. 160 00:11:28,240 --> 00:11:32,330 Rebstock map which is this different right here. 161 00:11:32,340 --> 00:11:37,520 And then any time that this component then receives some update or anytime its component thinks that 162 00:11:37,520 --> 00:11:42,530 it should read render itself in the future we say oh no no no don't don't attempt to rewrite it yourself 163 00:11:42,540 --> 00:11:42,760 . 164 00:11:42,890 --> 00:11:48,560 Because if we attempted to rerun the component it would probably try to dump this Google map element 165 00:11:48,560 --> 00:11:49,100 right here. 166 00:11:49,110 --> 00:11:51,800 It would want to just return this div just as is. 167 00:11:51,800 --> 00:11:53,410 Just show me this Dave. 168 00:11:53,970 --> 00:11:54,280 OK. 169 00:11:54,290 --> 00:11:56,440 So this at least gets something on the screen. 170 00:11:56,450 --> 00:12:01,850 So we've got some level of interaction between react and a third party library but we're still missing 171 00:12:01,860 --> 00:12:05,450 out on the ability to kind of pass props to this element. 172 00:12:05,580 --> 00:12:09,630 An update on the flight so let's say I want to add a little bit of configuration here. 173 00:12:09,620 --> 00:12:16,150 I want to have the ability to set the longitude and latitude that the map is centered on. 174 00:12:16,350 --> 00:12:22,790 So right now it's hard coded to always look at you know this negative 34 150 which is in Australia but 175 00:12:22,790 --> 00:12:27,440 I want to make this like a truly useful map in the reactor world. 176 00:12:27,480 --> 00:12:30,200 So I will pass a new set of props over time. 177 00:12:30,280 --> 00:12:35,050 You know new longitude and latitude and see the map update on the screen. 178 00:12:35,970 --> 00:12:44,700 So if I look at the Google Maps documentation and go up to reference right here and to update the location 179 00:12:44,690 --> 00:12:50,900 that a map is centered on I can use the pan to method. 180 00:12:51,190 --> 00:12:57,830 So with Pan 2 we pass in a new latitude and longitude and then the map will light transition over to 181 00:12:57,840 --> 00:13:00,150 that new latitude longitude. 182 00:13:00,360 --> 00:13:01,180 So that's could be our goal. 183 00:13:01,180 --> 00:13:08,460 I now want to add some ability to interface further interface react with Google Maps. 184 00:13:08,730 --> 00:13:13,560 So to do so I'm going to add in a button inside of my app Complan right here. 185 00:13:13,610 --> 00:13:18,280 I'm going to make a button and I'll just say whenever someone clicks on this button I want to center 186 00:13:18,290 --> 00:13:19,850 the map on New York. 187 00:13:19,880 --> 00:13:24,260 So if you click on this button I'm going to take you to New York. 188 00:13:25,740 --> 00:13:32,420 So instead of hard coding are a lot of land excuse me latitude and longitude and mixing words up there 189 00:13:32,420 --> 00:13:32,590 . 190 00:13:32,660 --> 00:13:37,080 If hard code get I'm going to define these on my state object. 191 00:13:37,730 --> 00:13:47,580 So the last of negative 34 and the long of one fifty six or four. 192 00:13:48,530 --> 00:13:52,800 And then my Google map will receive a lot from this start state up. 193 00:13:53,420 --> 00:13:56,820 And the long from this dot state DOT long. 194 00:13:57,120 --> 00:14:03,270 And then whenever someone clicks on this button I'm going to say we're going to call set state 195 00:14:07,010 --> 00:14:13,340 and we'll pass in a new Lat's negative 34 397. 196 00:14:13,460 --> 00:14:25,970 And along of excuse me mixing numbers up here a new out of 40 dots 7:1 to AIDS and a new long of negative 197 00:14:26,420 --> 00:14:29,480 74 0 0 5 9. 198 00:14:29,960 --> 00:14:30,400 OK. 199 00:14:30,500 --> 00:14:35,390 So now whenever someone clicks on this button we're going to call set state that is going to cause this 200 00:14:35,440 --> 00:14:41,720 out component to re render and a new set of props will be passed down into our Google map so we're passing 201 00:14:41,730 --> 00:14:43,300 props into Google map. 202 00:14:43,500 --> 00:14:45,020 But hold up for a second right there. 203 00:14:45,020 --> 00:14:48,950 We just said that no matter what this component should never ever update. 204 00:14:48,950 --> 00:14:55,520 So how do we kind of take that updated set of props and propagate it so to speak over to the Google 205 00:14:55,520 --> 00:14:57,170 Maps component. 206 00:14:57,920 --> 00:15:03,440 So even though we have this should component update statement in here and we are always returning false 207 00:15:03,470 --> 00:15:05,930 we're saying No never rerun this component. 208 00:15:05,930 --> 00:15:13,250 There is still a lifecycle method that is always going to get called that is component will receive 209 00:15:13,430 --> 00:15:16,980 props and that gets called with the next set of props. 210 00:15:16,970 --> 00:15:20,310 So even though we've told this component never tried to re rendered yourself. 211 00:15:20,610 --> 00:15:24,830 Nonetheless component will receive props is still going to get called. 212 00:15:25,160 --> 00:15:29,960 So inside of this component will receive props were going to receive that new latitude and longitude 213 00:15:30,380 --> 00:15:33,490 from our component or just the parent component. 214 00:15:33,710 --> 00:15:40,460 So effectively component Willersley probs is our ability to migrate from one set of props to the next 215 00:15:40,460 --> 00:15:45,860 set of props so we're going to get to manually handle changes that are received as component inside 216 00:15:45,870 --> 00:15:47,330 this method right here. 217 00:15:47,370 --> 00:15:53,330 So in our case I know that whenever I receive a new set of props I'm going to want to pan the map to 218 00:15:53,340 --> 00:15:55,070 some new location. 219 00:15:55,110 --> 00:16:00,080 So again I can use that pan to method that's included within Google Maps. 220 00:16:00,260 --> 00:16:08,390 So all of this started out on hand to an old house in the new Latt which will be next Propst out loud 221 00:16:09,290 --> 00:16:19,170 and long like so just be really clear of this object in here containing latitude and longitude that 222 00:16:19,160 --> 00:16:21,510 is 100 percent coming from Google Maps. 223 00:16:21,520 --> 00:16:27,930 You know the path to this object all that stuff is 100 percent part of the Google Maps API right here 224 00:16:27,920 --> 00:16:28,310 . 225 00:16:28,320 --> 00:16:30,150 So again pintu. 226 00:16:30,170 --> 00:16:33,340 And it takes an object literal that contains a lead to longitude. 227 00:16:33,380 --> 00:16:35,110 Just be really clear. 228 00:16:36,040 --> 00:16:41,870 OK so I'm going to say this and let's refresh. 229 00:16:44,070 --> 00:16:46,760 So now I've got my button that says New York right here. 230 00:16:46,830 --> 00:16:50,660 My map is going to start off centered inside of Australia. 231 00:16:50,880 --> 00:16:57,620 And when I click on the button to go to New York it's going to set state on the app component the new 232 00:16:57,620 --> 00:17:03,200 set of props are going to go to my Google Maps component and then I am manually Tallien Google Maps 233 00:17:03,210 --> 00:17:03,260 . 234 00:17:03,290 --> 00:17:09,450 Hey you need to instead show this new set of or you know the new longitude latitude. 235 00:17:09,550 --> 00:17:15,310 So it's given a shot I click and eyes center on New York now. 236 00:17:15,840 --> 00:17:16,110 OK. 237 00:17:16,110 --> 00:17:21,450 So that is the general approach here for how we integrate third party libraries with react. 238 00:17:21,620 --> 00:17:31,080 If you use any sort of existing adapter between react and Google Maps or are used like code here which 239 00:17:31,080 --> 00:17:35,910 is like a code editor you use or you are to be really clear and use an integration between code Mir 240 00:17:35,960 --> 00:17:40,230 and re-act all these different libraries that you're using that are these integrations. 241 00:17:40,380 --> 00:17:42,310 They're all doing this behind the scenes. 242 00:17:42,330 --> 00:17:45,610 And so a lot of the times you can certainly do this by hand. 243 00:17:45,890 --> 00:17:52,670 If you've taken my course on react and read out over Anyuta me you went through the Google Maps example 244 00:17:52,700 --> 00:17:58,730 and we used a third party component just to make use of Google Maps and you know there's definitely 245 00:17:58,740 --> 00:17:59,980 good reasons for doing that. 246 00:17:59,990 --> 00:18:05,420 But as you see right here it wouldn't have taken a tremendous amount of code to kind of wire up Google 247 00:18:05,420 --> 00:18:07,630 Maps ourselves if we so chose. 248 00:18:07,830 --> 00:18:14,760 So before grabbing a third party library to use react with or to use react with anything else do kind 249 00:18:14,760 --> 00:18:19,160 of sit down and say yourself what you know what functionality do I really need out of this third party 250 00:18:19,160 --> 00:18:19,970 library. 251 00:18:19,970 --> 00:18:24,250 Do I really have to grab an integration component or can I just write it myself. 252 00:18:24,260 --> 00:18:28,390 Because you know this certainly wasn't too bad right here. 253 00:18:28,490 --> 00:18:29,300 OK. 254 00:18:29,450 --> 00:18:30,250 This is a fun one. 255 00:18:30,300 --> 00:18:31,700 I really enjoyed this topic. 256 00:18:31,910 --> 00:18:36,160 If you like videos like this I publish weekly videos on react and redux. 257 00:18:36,150 --> 00:18:40,590 Check out rally coding dot com and get on my email list for our weekly video. 258 00:18:40,800 --> 00:18:42,150 I'll see it next week.