- create react basic-project
- install, bind and use scss in react
- useState
- useEffect
- fetch in react
- localStorage in react
- react forms
- react icons
- useRef
Create a react basic project.
Install and use scss (give a style with scss and test if it works).
Fetch from this API when the component App as first time loads.
Save the response of the fetch in a key called users in the localStorage because we want save the users in the localStorage and if we refresh the web page, we still can see the users.
Create a state called users which has as its initial value the value of the key users in the localstorage.
Update the fetch code, because you only want to fetch if the users state is not empty.
Show all users in the UI . Show only the name, username and email of each user.
Create a form, that allows you to add a new user on the users state. When you create a new user, he/she must be saved in the localStorage also. You need an input for the name, username and email and password (you don't need to show the password in the UI).
Style the App to your taste (use scss).
Add an icon in the input-password that gives you the possibility to hide the password, if the password is hidden then show another icon that gives you the possibility to show the password (then you will only be able to see one icon).
Use the react-icons as icons.
Make the input-fields empty after the new user is created
Non field can be empty and you can't have more users with the same username.
If the validations are not true disable the click of the submit button.
Update the Form code using only one state called newUser instead to have a state per input.
Give inputs a different backgroundColor when they are focused.
Change the border colour of the containers showing each user in the UI when hovering with the mouse.
Give a focus on the name input in the form when the component loads.