React basic interview questions

• what are components and props?
  **Components are independent and reusable bits of code or small pieces of code that represent the UI props that are used to send the data from one component to another component **

• How to pass props from one component to another.
  using the parent class we can send data from one component to another component like parent-to-child components ex

app componet

 class App extends React.Component {
  constructor() {
    super();
    this.state = {
      status:""
    };
  }

  handelCallback = () => {
    this.setState({
      status:"you clicked me"
    })
  }

return(
<>
   <Child1 handelCallback={this.handelCallback} />
     <Child2 status={this.state.status}/>
</>
)

child 1

import React from 'react'

export default function Child1(props) {
  return (
    <>
        <button onClick={props.handelCallback}>click</button>
    </>
  )
}

child 2 component

import React from 'react'

export default function Child2(props) {
  return (
    <>
        <div>Child2</div>
    <h1>{props.status}</h1>
    </>
  )
}

• Functional-based components and class-based components.
  ** Functional components are just plain JS functions **

function App() {
  return (
    <div>
      <h2>Hello React!</h2>
    </div>
  );
}

**class components have constructer and super I handle the state **

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

• Usage of PropTypes in React.
  it's used to pass the value of the correct datatype

• Using events in React. didn't get it

• State & how to use setState.
  The state is a react object that contains data and using that data we make changes in our applications

• What is Conditional Rendering & how to use it?
  **Conditional rendering is showing components based on certain conditions **

//from state 
{condtion} ? <Child 1 /> : <Child 2 />

• Handling Inputs.

  • Controlled components & Uncontrolled components. controlled components form data handled by react in uncontrolled component form data handled by DOM itself