Requirement: use chakra ui and react framework to encapsulate the form of the login page of Jianshu into independent reusable components
APIs used:
register API
Request method: POST
Request address:
https://conduit.productionready.io/api/users
Request data:
{"user":{
"username": "Jacob2",
"email": "[email protected]",
"password": "jakejake"
}
}return result:
{
"user": {
"email": "[email protected]",
"username": "Jacob2",
"bio": null,
"image": "https://api.realworld.io/images/smiley-cyrus.jpeg",
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Impha2VAamFrZS5qYWtlMiIsInVzZXJuYW1lIjoiSmFjb2IyIiwiaWF0IjoxNjc3OTEwODIyLCJleHAiOjE2ODMwOTQ4MjJ9.KU0oMG73UxK3JcbN0wp3yzxgybFHsB3EtlECUhX3f4I"
}
}login API
Request method: POST
Request address:
https://conduit.productionready.io/api/users/login
Request data:
{"user":{
"email": "[email protected]",
"password": "jakejake"
}
}return result:
{
"user": {
"email": "[email protected]",
"username": "Jacob2",
"bio": null,
"image": "https://api.realworld.io/images/smiley-cyrus.jpeg",
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Impha2VAamFrZS5qYWtlMiIsInVzZXJuYW1lIjoiSmFjb2IyIiwiaWF0IjoxNjc3OTExNjM2LCJleHAiOjE2ODMwOTU2MzZ9.neo74ygv6iD9EN1U1d1L6jAL4tCp-UrhAz8x-uvg0fQ"
}
}Project initialization using create-react-app scaffolding
create-react-app jianshu-loginform-react
Dependency installation and operation
cd jianshu-loginform-react
npm run start
Start to disassemble components and package and combine
It is mainly divided into three regional subcomponents:
Header area (form content switching control)
form content area
Bottom area (other login method options)
4. Item Code
I don't want to describe too much, just go to the code: