So let's dive in
and how should we start?
Well in the end, our goal will be to convert all class-based components into functional components,
so let's simply dive into our different components. Now
the index.js file sets up the root of our application and
in there we have no class-based component,
so we got nothing to do there. In app.js, that already changes, here
our app component uses the class keyword and extends component.
So that is already the first place where I want to convert it to a functional component.
So I'll name it app and this will be a function which receives props
and then has this function body.
Now in this function body, we'll not have a render method,
so we should get rid of that and therefore we also need to get rid of one closing bracket here,
one closing curly brace and in the end, we still want to return JSX because every functional component
has returned JSX. Now componentDidMount will not exist anymore
and you'll learned what can be used instead of componentDidMount,
do you remember? It's the useEffect hook,
so let's actually import useEffect from React
and then here instead of componentDidMount, we can use useEffect and we have to pass a function to
useEffect which will execute whenever this component re-renders.
So let's now move this props on try auto sign-up into our useEffect function but of course we're not
using this props anymore but just props because we're getting props as an argument here. I also want
to make sure that this effect does not run every time this app component is re-rendered, it should only
run on the first render cycle
and do you remember how you can control that with useEffect?
Well you can parse a second argument to useEffect and that is an array of all the values, all the objects
React should watch for and only when these things, these arguments, these elements you have in this array
change, this function in useEffect should run again.
And if you pass an empty array, it essentially means this will only run once when the component is mounted
essentially and that is exactly what I want here and therefore I pass this empty array. Then we set up
our routes and there's nothing wrong with that, here where I access this props is authenticated, it should
just be props and we're done. Now mapStateToProps and mapDispatchToProps, this can still be used,
there's nothing wrong with that,
the only thing we need to change here is the name here because I renamed my component to app, so the constant
where I store this function is named app with a lowercase A and therefore we have to use a lowercase
A down there as well and that is all. So we can still connect Redux to our functional component here,
nothing wrong with that. If we now save that, it reloads and it works as before which already proves that
this seems to succeed here.
Now if I do login here with a valid user,
this works and if I now reload, auto login also works which proves that this effect here is doing
its job.
So the first component has been converted,
let's move on.