1
00:00:01,020 --> 00:00:05,130
We're going to add in some code that is going to import react no matter what, whether or not the user

2
00:00:05,130 --> 00:00:08,470
is using JSM or not, as I mentioned at the end of last video.

3
00:00:08,520 --> 00:00:10,470
This is going to have a slight performance penalty.

4
00:00:10,620 --> 00:00:14,880
But at the end of the day, it's going to allow a user to always show a jazz elements or eventually

5
00:00:14,880 --> 00:00:16,070
a react component as well.

6
00:00:16,079 --> 00:00:20,220
And it's always going to work, even if a user does not import, react or react ahead of time.

7
00:00:21,030 --> 00:00:25,500
So first, let's take a look at a kind of obvious way to implement this that is unfortunately not going

8
00:00:25,500 --> 00:00:29,040
to work out in the long run to back over inside my code editor.

9
00:00:29,200 --> 00:00:30,540
I'll find our show function.

10
00:00:31,530 --> 00:00:36,780
The problem right now is that whenever we try to make use of react, we got that error message because

11
00:00:36,780 --> 00:00:40,460
we can't really be guaranteed that a user has already imported react for us.

12
00:00:40,860 --> 00:00:46,560
So to make sure that react and react are always imported no matter what, we can just very easily add

13
00:00:46,560 --> 00:00:54,000
in our own import statement right above the show function so we can put in upir import, react or react.

14
00:00:55,530 --> 00:00:56,910
And import react, Dom.

15
00:00:57,880 --> 00:00:58,920
From react on.

16
00:00:59,960 --> 00:01:05,930
Now, if we save this, we can flip back over and it appears to work just fine because we are now always

17
00:01:05,930 --> 00:01:09,350
importing react and react, Dom, into every single bundle we create.

18
00:01:10,050 --> 00:01:13,850
We can call show as often as we want, and we're not going to get any error messages.

19
00:01:14,030 --> 00:01:17,150
I can very easily change that text and we just see the updates.

20
00:01:18,210 --> 00:01:21,270
This definitely works, but there's a real big downside to it.

21
00:01:21,630 --> 00:01:25,440
We have now declared an important statement with react and react, Dom.

22
00:01:25,890 --> 00:01:31,890
Let's say at some future point time a user decides to import, react or react on their own because they

23
00:01:31,890 --> 00:01:35,940
very well might not even know that the show function exists inside of our environment.

24
00:01:36,480 --> 00:01:39,210
So user might or might write out something like import react.

25
00:01:42,680 --> 00:01:48,470
Or import react from react, Dom, and as soon as they do so, we're going to very quickly run into

26
00:01:48,470 --> 00:01:49,310
a nasty air.

27
00:01:49,710 --> 00:01:54,650
So the air here says that we have already declared react and we have already declared react, Dom.

28
00:01:55,550 --> 00:01:59,900
So we essentially now have two sets of important statements we've got to import, react and react,

29
00:01:59,900 --> 00:02:05,780
Dom, right here, and we've also got the exact same imports in this code that we are kind of injecting

30
00:02:05,780 --> 00:02:07,610
into a user's input code.

31
00:02:08,370 --> 00:02:10,570
These two sets of import statements are conflicting.

32
00:02:11,330 --> 00:02:13,580
So this is the next issue we're going to have to figure out.

33
00:02:13,850 --> 00:02:20,030
We need to either somehow add in or remove these two import statements based upon whether or not a user

34
00:02:20,030 --> 00:02:24,310
is importing reactor reactor or we need to figure out some other way of solving this.

35
00:02:24,980 --> 00:02:28,670
So let's take a pause right here and take a look at how we might resolve this little issue.