Must Know Concepts in React
Published: 2022-11-15 05:36:51

### What are components & Props?
**Components**  are the core buildling blocks of React Application that can be reused and handled independently.

**Props**  stands for Properties and they are immutable(Read-only)
Props are the arguments passed to React Components

###  How to pass props from one component to another.
Props data is sent by the parent component and cannot be changed by the child component as they are read-only.

**Parent component**
```
import React from 'react';
function Parent()
  {
    const name= Smith;
    const msg = `Hello, my dear ${name}`;

    return (
     <Child msg={msg} />
     )
   }
```
**Child component**

```
import React from "react";
import Parent from "./Parent.js";

function Child(props){
return (
        <h2>props.msg </h2>
       )
}

```

### Functional based components & Class-based components.

A **Functional component**  is just a plain JavaScript pure function that accepts props as an argument and returns a React element(JSX).

```
function App(){
return <h1> Hello React </h1>
}
```
The **Class components** are simple classes (made up of multiple functions that add functionality to the application).
which can manage the state and lifecycle components

```
import React from'react';
class Counter extends React.component{
    constructor(props){
       super(props);
       this.state = {
         count: 0
       }
  }
handleIncrement = () => {
  this.setState(prevState => prevState + 1)
}
handleDecrement = () => {
  this.setState(prevState => prevState - 1)
}
render(){
  return (
   <>
      <h2>this.state.count </h2>
      <button onClick={handleIncrement}>increment</button>
      <button onClick={handleDecrement}>decrement</button>
   </>
  )
}
}
```

### Usage of PropTypes in React.

**PropTypes**  are simply a mechanism that ensures that the passed value is of the correct datatype. 

```
Count.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  address: PropTypes.object,
  friends: PropTypes.array,
};
```

### Using of events in React.

Just like HTML DOM events, React can perform actions based on user events.
React events are written in camelCase syntax within the curly braces

```
function Football() {
  const shoot = () => {
    alert("Great Shot!");
  }

  return (
    <button onClick={shoot}>Take the shot!</button>
  );
}

```

### State & how to use setState.

The **state** is a built-in React object that is used to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders. 

```
refer counter example
```

### What is Conditional Rendering & how to use it?

Displaying UI based on the certain condition 
in React we can use the different ways to achive it some of them are 
1: && operator  2: Ternary Operator 3: If-else 4: Switch

```
import react from 'react';
class signIn extends React.component{
     constructor(){
       super(props);
       this.state = {
        isLoggedIn : false
       }
   }
render(){
  return (
      <h1> {this.state.isLogged ? "Welcome Back" : "Please 
           Sign Up" } </h1>
     )
  }
}
```

## Handling Inputs.
   
###  Controlled components & Uncontrolled component.

A **Controlled Component** is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component.

```
// Controlled:
<input type="text" value={value} onChange={handleChange} />

```

A **Uncontrolled Component** is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

```
// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the 
   current value of <input>
```