Efficient Engineering: A Guide to React Component Reusability Best Practices

---

why need to reuse code ? we love to write code

yes, we also enjoy write a code as much as you but we want our code need to be efficient. that why react come handy . we create a functional component once & use it again and again.

here we will discuss how to create Reusable components :

Above all the page have common things are ,

• main box which holds all things and all background are also Same

• Here Input field are are same just placeholder , name , value are pass as props.

• The button just name and pass the functionality is different .

Lets hit the code

import React from 'react'
const FormContainer = ({children}) => {
  return (
      <div className='fixed inset-0 dark:bg-primary bg-white -z-10 flex justify-center items-center'>{children}</div>
  )
}
export default FormContainer

---

• we create just page with common background . which is used for dark and light mode effect. we are using here Tailwind-Css for style purpose.

import React from 'react'

const Container = ({ children,className}) => {
  return (
      <div className={'max-w-screen-xl mx-auto p-2' + className}>{children }</div>
  )
}

export default Container

• this is Container who hold input filed, button, name and many thigs.

---

• Here our Input field which is reusable and value, name , placeholder, and so many things can passed

    import React from 'react'
  
    const FormInput = ({ label,name,placeholder,...rest}) => {
      return (
        <div className='flex flex-col-reverse'>
              <input id={name} name={name} className='bg-transparent rounded border-2 dark:border-dark-subtle border-light-subtle w-full text-lg outline-none dark:focus:border-white  focus:border-primary  p-1 peer transition dark:text-white ' placeholder={ placeholder} {...rest} />
              <label htmlFor={name} className='font-semibold dark:text-dark-subtle text-light-subtle peer-focus:text-white  transition self-start'>{ label}</label>
              </div>
      );
    };
  
    export default FormInput
  

  let's now explore the final views on the Asign-up code

•     import React, { useState } from 'react'
      import { useNavigate } from 'react-router-dom';
      import Container from '../User/Container';
      import FormInput from '../form/FormInput';
      import Submit from '../form/Submit';
      import CustomLink from '../User/CustomLink';
      import { commonModelClasses } from '../utils/Theame';
      import FormContainer from '../utils/FormContainer';
      import { createUser } from '../../Api/Auth';
      };
      const SignUp = () => {
        const [userInfo, setUserInfo] = useState({
          name: "",
          email: "",
          password: "",
        });
        const navigate=useNavigate()
  
        const handleChange = ({ target }) => {
          const { name, value } = target;
          setUserInfo({ ...userInfo, [name]: value });
        };
  
        const handleSubmit = async(e) => {
          e.preventDefault();
        };
  
        const { name, email, password } = userInfo;
        return (
          <FormContainer >
            <Container>
              <form onSubmit={handleSubmit } className={ commonModelClasses + ' w-72'}>
                <h1 className='text-xl dark:text-white text-secondary font-semibold text-center'>Sign In</h1>
                <FormInput   value={name}
                  onChange={handleChange}
                  label="Name"
                  placeholder="Suraj Khonde"
                  name="name" />
                <FormInput  value={email}
                  onChange={handleChange}
                  label="Email"
                  placeholder="surajrkhonde@gmailcom"
                  name="email" />
                <FormInput  value={password}
                  onChange={handleChange}
                  label="Password"
                  placeholder="********"
                  name="password"
                  type="password" />
                <Submit value='Sign-Up' />
                <div className=' flex justify-between'>
                  <CustomLink to="/Auth/forgetpassword">Forgot Password?</CustomLink>
                  <CustomLink to="/Auth/signin">SignIn</CustomLink>
                </div>
              </form>
            </Container>
          </FormContainer>
        )
      }
  
      export default SignUp;
  

hey guys I can't upload full code with authentication. if you need code please comment me.