Must Know Concepts in React

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>