thinking in react with different example? - reactjs

Question

I have seen the thinking in react article found here and in short it discusses how to break down components...
while i understand the concept in their example and it looks like this..
each colored box must be a separate component...
now I am creating a login page and i am a bit confused on how to break it down as most of it will not be reused somewhere else and i started to mix multiple concepts together I am wondering if you guys can help me sort my thoughts about this topic
screen shot of similar login page to the one i am making i have already colored components that should be separated based on the react official page docs so please let me know if I am thinking correctly and if any extra tips would be appreciated

Answer 1

React basically is component based library which is re-usable in projects.
For Example you can create the file InputComponent.js :
import React from 'react'
function InputComponent() {
const [name , setName] = React.useState('')
return (
<input placeholder="Name" onChange={(e)=>setName(e.target.value)} type="text" ></input>
)
}
export default InputComponent;
And use it anywhere as many as you want like this :
import React from 'react'
function Home() {
return (
<div>
<InputComponent></InputComponent>
<InputComponent></InputComponent>
</div>
)
}
export default Home
The more re-useable components you can define your project will be more readable and easy foremost .
You can make a re-usable component from anything you desire like some text , input elements and etc ...
You can use component props to pass in any information to the re-usable component to display that information .
For more info you can check the react docs here .