React Basics

PropTypes: Props are used to pass information to any component. Prop-types are used to document the intended types of properties passed to components. React will check props passed to components against those definitions, and warn in development if they don’t match. The PropTypes utility exports a wide range of validators for configuring type definitions.
Below are the validators for the basic data types:
PropTypes.any: The prop can be of any data type.
PropTypes.bool: The prop should be a Boolean.
PropTypes.number: The prop should be a number.
PropTypes.string: The prop should be a string.
PropTypes.func: The prop should be a function.
PropTypes.array: The prop should be an array.
PropTypes.object: The prop should be an object.
PropTypes.symbol: The prop should be a symbol.

const isEmail = function (propValue, key, componentName, location, propFullName) {
    const regex = /^((([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,})))?$/;

    if (!regex.test(propValue[key])) {
        return new Error(`Invalid prop `${ propFullName }` passed to `${ componentName }`. Expected a valid email address.`);
    }
}

Component.propTypes = {
    emails: PropTypes.arrayOf(isEmail)
}

State-props: Props and state are both plain JavaScript objects. State is managed within the component like variables declared within a function. State allows components to create and manage their own data. Using state components cannot pass data but they can create and manage it internally.

import React, { useState } from 'react';
const AddPlants = () => {
    const [name, setName] = useState('');
    return (
        <div>
            <TextField
                sx={{ width: { xs: '100%', md: '50%' }, mb: 2 }}
                id="standard-basic1"
                label="Plant Name"
                name="name"
                onBlur={(e) => setName(e.target.value)}
                variant="standard"
            />
            <ul>
                <li>{name}</li>
            </ul>
        </div>
    )
}

Props are used to pass information to any component. React’s data flow between components is uni-directional which means it passes data from parent to child only. Data from props is read-only.

import React, { useState } from 'react';
const AddPlants = (props) => {
    const {name, id, price} = props.plants;
    return (
        <div>
            <ul>
                <li>{name}</li>
                <li>{id}</li>
                <li>{price}</li>
            </ul>
        </div>
    )
}

JSX: JSX full form is JavaScript XML. Using JSX we can write HTML in React. JSX makes it easy to write and add HTML in React. It converts HTML tags into react elements.

const myelement = <h1>React is times better with JSX</h1>;

Component Lifecycle: Each component has several “lifecycle methods” that we can override to run code at particular times in the process. A React Component can go through four stages of its life those are given below:
Mounting: Mounting is the stage of rendering the JSX returned by the render method itself. This method creates and inserts an instance of a component into the DOM.
Updating: Updating is the stage when the state of a component is updated and the application is repainted. This method happens when props or states are changed.
Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.
Error Handling: This method is called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

Hooks: Hooks allow us to "hook" with react features. It can be called only inside react function components and at the top level of a component. It cannot be conditional. Some hooks are given below:
useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue