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