1
00:00:02,330 --> 00:00:03,750
So let's dive in

2
00:00:03,750 --> 00:00:05,720
and how should we start?

3
00:00:05,720 --> 00:00:12,470
Well in the end, our goal will be to convert all class-based components into functional components,

4
00:00:12,470 --> 00:00:16,090
so let's simply dive into our different components. Now

5
00:00:16,160 --> 00:00:20,350
the index.js file sets up the root of our application and

6
00:00:20,360 --> 00:00:22,820
in there we have no class-based component,

7
00:00:22,850 --> 00:00:28,440
so we got nothing to do there. In app.js, that already changes, here

8
00:00:28,550 --> 00:00:32,700
our app component uses the class keyword and extends component.

9
00:00:32,870 --> 00:00:37,760
So that is already the first place where I want to convert it to a functional component.

10
00:00:37,880 --> 00:00:42,320
So I'll name it app and this will be a function which receives props

11
00:00:42,320 --> 00:00:45,260
and then has this function body.

12
00:00:45,260 --> 00:00:48,230
Now in this function body, we'll not have a render method,

13
00:00:48,230 --> 00:00:53,960
so we should get rid of that and therefore we also need to get rid of one closing bracket here,

14
00:00:53,960 --> 00:01:00,110
one closing curly brace and in the end, we still want to return JSX because every functional component

15
00:01:00,290 --> 00:01:05,480
has returned JSX. Now componentDidMount will not exist anymore

16
00:01:05,540 --> 00:01:09,940
and you'll learned what can be used instead of componentDidMount,

17
00:01:09,980 --> 00:01:14,020
do you remember? It's the useEffect hook,

18
00:01:14,270 --> 00:01:18,080
so let's actually import useEffect from React

19
00:01:19,060 --> 00:01:25,060
and then here instead of componentDidMount, we can use useEffect and we have to pass a function to

20
00:01:25,060 --> 00:01:29,840
useEffect which will execute whenever this component re-renders.

21
00:01:29,860 --> 00:01:36,730
So let's now move this props on try auto sign-up into our useEffect function but of course we're not

22
00:01:36,730 --> 00:01:43,120
using this props anymore but just props because we're getting props as an argument here. I also want

23
00:01:43,120 --> 00:01:49,000
to make sure that this effect does not run every time this app component is re-rendered, it should only

24
00:01:49,000 --> 00:01:51,090
run on the first render cycle

25
00:01:51,100 --> 00:01:54,450
and do you remember how you can control that with useEffect?

26
00:01:55,420 --> 00:02:03,640
Well you can parse a second argument to useEffect and that is an array of all the values, all the objects

27
00:02:03,910 --> 00:02:09,460
React should watch for and only when these things, these arguments, these elements you have in this array

28
00:02:09,460 --> 00:02:12,910
change, this function in useEffect should run again.

29
00:02:13,090 --> 00:02:18,820
And if you pass an empty array, it essentially means this will only run once when the component is mounted

30
00:02:18,820 --> 00:02:24,880
essentially and that is exactly what I want here and therefore I pass this empty array. Then we set up

31
00:02:24,880 --> 00:02:30,340
our routes and there's nothing wrong with that, here where I access this props is authenticated, it should

32
00:02:30,340 --> 00:02:37,870
just be props and we're done. Now mapStateToProps and mapDispatchToProps, this can still be used,

33
00:02:37,870 --> 00:02:39,150
there's nothing wrong with that,

34
00:02:39,190 --> 00:02:45,940
the only thing we need to change here is the name here because I renamed my component to app, so the constant

35
00:02:45,940 --> 00:02:50,980
where I store this function is named app with a lowercase A and therefore we have to use a lowercase

36
00:02:51,040 --> 00:02:57,660
A down there as well and that is all. So we can still connect Redux to our functional component here,

37
00:02:57,700 --> 00:03:04,420
nothing wrong with that. If we now save that, it reloads and it works as before which already proves that

38
00:03:04,570 --> 00:03:07,220
this seems to succeed here.

39
00:03:07,300 --> 00:03:11,710
Now if I do login here with a valid user,

40
00:03:14,560 --> 00:03:21,340
this works and if I now reload, auto login also works which proves that this effect here is doing

41
00:03:21,370 --> 00:03:22,500
its job.

42
00:03:22,750 --> 00:03:25,290
So the first component has been converted,

43
00:03:25,360 --> 00:03:25,990
let's move on.