1 00:00:01,300 --> 00:00:05,200 Let's take a look at how we can prevent any Naimi collisions between an import statement from react 2 00:00:05,200 --> 00:00:10,780 and react Dom that is written out by user and import statements written out by you and I that are hard 3 00:00:10,780 --> 00:00:12,280 coded into our users code. 4 00:00:13,320 --> 00:00:16,290 OK, so to solve this, we're going to use a little bit of a trick. 5 00:00:16,620 --> 00:00:19,770 Let me first give you a very quick reminder about jazz in general. 6 00:00:20,170 --> 00:00:25,110 Remember, whenever you write out a jazz element like this right here, whenever it gets transpired, 7 00:00:25,110 --> 00:00:29,390 it is going to be turned into a function call to react, create element. 8 00:00:29,910 --> 00:00:35,520 So in this case, the one element that you see right here would be turned into something like react, 9 00:00:35,520 --> 00:00:37,470 create element, each one. 10 00:00:38,690 --> 00:00:41,500 And then some other arguments will be provided to it as well. 11 00:00:42,900 --> 00:00:48,690 Yes, build, which is what is transpiring, our code is making a very big assumption here it is assuming 12 00:00:48,690 --> 00:00:54,300 that if you and I ever write out some basics, we want to turn that into a function call specifically 13 00:00:54,300 --> 00:00:56,610 to react, create element. 14 00:00:57,000 --> 00:00:59,010 But that setting can actually be customized. 15 00:00:59,340 --> 00:01:00,060 We can tell. 16 00:01:00,060 --> 00:01:00,960 Yes, build that. 17 00:01:00,960 --> 00:01:06,180 Instead of making a function called to react, create element, we can instead have it put in there 18 00:01:06,180 --> 00:01:14,940 something like a function called to make jousts, or it can be to J Builder or whatever else. 19 00:01:15,390 --> 00:01:22,050 We can change that reactive element into any little snippet of text we want and we're going to make 20 00:01:22,050 --> 00:01:25,020 use of that feature to avoid this naming conflict. 21 00:01:25,320 --> 00:01:28,650 So here's what we are going to do back inside of our code editor. 22 00:01:29,190 --> 00:01:34,350 We're going to find our hardcoded in Port Stephens for react and react, Dom, rather than importing. 23 00:01:34,350 --> 00:01:35,220 Just react and react. 24 00:01:35,220 --> 00:01:39,540 Dom, I'm going to change this to underscore, react and underscore. 25 00:01:39,540 --> 00:01:40,290 React, Dom. 26 00:01:42,120 --> 00:01:47,280 I'll then go down to where we make use of them right here, and I'm going to replace that with underscore 27 00:01:47,280 --> 00:01:47,940 react Dom. 28 00:01:49,500 --> 00:01:53,550 And then finally, we're going to change a little setting inside of itself. 29 00:01:53,970 --> 00:01:58,980 We're going to say that whenever it sees a sex element, rather than replacing with reactive element, 30 00:01:59,160 --> 00:02:02,670 we want to replace it with underscore, react, create element. 31 00:02:03,750 --> 00:02:08,370 So we're simply renaming our imports and then telling everything on the side or everything inside of 32 00:02:08,370 --> 00:02:11,920 us build to just reference, underscore, react instead. 33 00:02:12,570 --> 00:02:16,490 So this will allow a user to very easily import, react or react if they want to. 34 00:02:16,530 --> 00:02:19,820 They can do whatever they want to with it, no problem whatsoever. 35 00:02:20,280 --> 00:02:24,180 But if they're going to make use of our show function, then behind the scenes it'll be making use of 36 00:02:24,180 --> 00:02:26,220 this underscore, react and underscore. 37 00:02:26,220 --> 00:02:26,880 React, Dom. 38 00:02:27,750 --> 00:02:32,280 So let's now go back over to our ESKILD configuration, and as I mentioned, we're going to change one 39 00:02:32,280 --> 00:02:38,040 or two settings in there to say whenever it sees jousts, turn it into underscore, react, create elements. 40 00:02:38,960 --> 00:02:42,770 So I'm going to find our bundler directory inside, there is our index file. 41 00:02:44,460 --> 00:02:50,280 So here's our bundle function, we will scroll down to where we set up our building service. 42 00:02:51,370 --> 00:02:55,420 And then to our configuration object, we're going to add in two little settings, we're going to add 43 00:02:55,420 --> 00:03:01,870 in Sex Factory is underscore, react, create element. 44 00:03:03,420 --> 00:03:09,090 And fragment is underscore, react, fragment. 45 00:03:11,000 --> 00:03:16,280 Ex fragment is being placed inside of here just in case we ever write out a fragment which remembers 46 00:03:16,400 --> 00:03:18,770 kind of like an empty set of brackets. 47 00:03:20,640 --> 00:03:22,940 OK, so let's now save this Belbek over. 48 00:03:22,980 --> 00:03:23,820 I'm going to refresh. 49 00:03:25,400 --> 00:03:27,980 And now I should still be able to do a show. 50 00:03:29,590 --> 00:03:32,110 With an H1 and put in some text inside their. 51 00:03:33,180 --> 00:03:39,360 That works out just fine, and I should also be able to do an import for react from react, and I no 52 00:03:39,360 --> 00:03:40,980 longer get any kind of naming collision. 53 00:03:41,700 --> 00:03:43,400 So this definitely works out just fine. 54 00:03:45,020 --> 00:03:48,620 Now, the one thing you might be a little bit concerned about the solution, does this mean that we 55 00:03:48,620 --> 00:03:51,170 are bundling up react twice behind the scenes? 56 00:03:51,170 --> 00:03:53,000 Are we including two separate copies of REACT? 57 00:03:53,300 --> 00:03:54,440 Well, no, we are not. 58 00:03:54,680 --> 00:03:56,020 Yes, Bill is very intelligent. 59 00:03:56,030 --> 00:03:59,750 It will recognize that we are importing react twice into our project. 60 00:04:00,290 --> 00:04:02,990 It's only going to include the source code for yakked one time. 61 00:04:03,170 --> 00:04:05,840 And then internally it will create two separate variables. 62 00:04:06,110 --> 00:04:09,200 One variable will be called react, the other will be underscore react. 63 00:04:09,680 --> 00:04:13,510 Those will both be references to the same copy of the REACT Library. 64 00:04:14,120 --> 00:04:16,399 So let's say that this is a pretty reasonable solution. 65 00:04:17,120 --> 00:04:20,329 A user can also still import to react, Dom, if they want to. 66 00:04:21,320 --> 00:04:23,270 And no issue with that either as well. 67 00:04:24,810 --> 00:04:27,300 OK, so I'd say this looks like a pretty reasonable solution. 68 00:04:27,900 --> 00:04:30,500 Let's take a pause right here and continue on in just a moment.