1
00:00:00,210 --> 00:00:07,140
Before we continue working on our application, I want to mention something where once they react 17

2
00:00:07,140 --> 00:00:13,920
came out, there's this weird glitch where in some operating systems, the heart reloading doesn't work.

3
00:00:13,920 --> 00:00:20,490
Because if you remember from the last video, when I made some changes to the product context, well,

4
00:00:20,640 --> 00:00:21,950
they were not displayed right away.

5
00:00:21,960 --> 00:00:24,360
I had to refresh the application.

6
00:00:24,690 --> 00:00:31,200
And especially as you working with somewhat big project, it gets annoying really, really fast.

7
00:00:31,200 --> 00:00:33,800
And I was searching all over the place.

8
00:00:33,810 --> 00:00:41,070
But tell me honestly, the easiest way to fix it is revert to the older reactive version.

9
00:00:41,550 --> 00:00:43,860
And that is exactly what I did while I was building.

10
00:00:44,190 --> 00:00:51,410
I went back to the older version and then once I was done, then I switched back to the 17 again.

11
00:00:51,420 --> 00:00:55,240
It's not going to affect your functionality, just the heart reloading.

12
00:00:55,530 --> 00:01:01,620
So let me showcase that where, for example, if I go to products context and if I want to display it

13
00:01:01,620 --> 00:01:07,980
by default, if I'm going to say here true, it should right away hot reload, but it's not doing that.

14
00:01:08,310 --> 00:01:11,430
Notice here, of course, now I can see it because that was my old setup.

15
00:01:11,430 --> 00:01:15,630
But once I refresh, I can see that and I can see the sidebar.

16
00:01:15,630 --> 00:01:21,750
But if I switch this back to the false again, it's not going to hot reload.

17
00:01:22,020 --> 00:01:28,650
So every time you make some changes, you'd have to refresh and trust me, it gets really, really annoying.

18
00:01:29,010 --> 00:01:36,750
So a better way is if you navigate to read me and notice here, I have some notes and one of them is

19
00:01:36,750 --> 00:01:38,310
older react version.

20
00:01:38,700 --> 00:01:42,050
So what I would want you to do is just grab these three lines of code.

21
00:01:42,300 --> 00:01:45,780
So six, seven and eight like so.

22
00:01:46,200 --> 00:01:51,810
And again, this is if you have those issues, if you don't, then of course you can just dismiss this

23
00:01:51,810 --> 00:01:53,430
video and continue the next one.

24
00:01:53,430 --> 00:01:59,030
But if you're experiencing the same issues, I strongly suggest following the same steps.

25
00:01:59,250 --> 00:02:04,290
So grab these three lines of code then and navigate back to the package.

26
00:02:04,290 --> 00:02:06,960
Drayson and then look for the same ones.

27
00:02:06,960 --> 00:02:10,620
So you should have react, react and react icons.

28
00:02:11,010 --> 00:02:14,040
Now notice here how I would want to change the script.

29
00:02:14,040 --> 00:02:14,420
Correct.

30
00:02:14,670 --> 00:02:16,380
So just move this script up.

31
00:02:16,710 --> 00:02:20,520
So we have react, react and then react script.

32
00:02:21,000 --> 00:02:22,290
You can remove this one.

33
00:02:23,390 --> 00:02:24,750
So copy and paste.

34
00:02:24,770 --> 00:02:30,740
Make sure you add a comma so there's no errors, so you can save it right now, but what you'll need

35
00:02:30,740 --> 00:02:36,260
to do is stop this server and then delete the node module.

36
00:02:36,300 --> 00:02:43,220
So late node modules here, the trash, and then you'll have to repeat the steps where we go with NPM

37
00:02:43,220 --> 00:02:46,380
install and then NPM start.

38
00:02:46,760 --> 00:02:49,580
So that is what fixed it for me.

39
00:02:49,940 --> 00:02:56,720
Where I went back to the older version of React, I completed the project and then I switch back to

40
00:02:56,720 --> 00:02:58,030
the latest version.

41
00:02:58,340 --> 00:03:04,940
So of course by the time you're watching this, you'll see in the README also the newer version of REAC

42
00:03:04,940 --> 00:03:05,630
that I included.

43
00:03:05,960 --> 00:03:08,480
Just so once you're done, you can switch back.

44
00:03:09,290 --> 00:03:13,940
And you don't have any issues, so I'm going to pause the video right now because, of course, the

45
00:03:13,940 --> 00:03:18,860
whole install is going to take place and I'll resume it once we're done just to showcase that.

46
00:03:18,920 --> 00:03:23,960
Once we're done adding this change, we should get the heart reloading back.

47
00:03:24,350 --> 00:03:28,930
And once we have all our dependencies in place, let's start out now.

48
00:03:28,940 --> 00:03:31,460
I'm going to navigate back to the product context.

49
00:03:31,460 --> 00:03:38,600
And again, the whole point was that once I change this one to true, I should have my heart reloading.

50
00:03:38,600 --> 00:03:41,630
Correct where the devs are right away.

51
00:03:41,630 --> 00:03:44,690
Reload the page and I can see the latest changes.

52
00:03:44,840 --> 00:03:47,420
And as you can see, everything works again.

53
00:03:47,780 --> 00:03:50,180
If you don't have these issues, of course, you don't have to do it.

54
00:03:50,180 --> 00:03:55,610
If you do, that's the easiest solution that I found.

55
00:03:55,610 --> 00:03:57,890
And I didn't find any solutions.

56
00:03:57,920 --> 00:04:00,170
This is just something that I came up with.

57
00:04:00,620 --> 00:04:06,920
And once we have our hot reloading back and of course, we can continue with our application.