React) class_component_props

// import { Component } from "react";
// import PropTypes from "prop-types";
//
// class mycomponent extends Component{
//     render(){
//         const {name, favoriteNumber, children} = this.props;
//         return(
//             <div>
//                 hello, my name is {name}<br/>
//                 children value is {children}<br/>
//                 my favoriteNumber is {favoriteNumber}
//             </div>
//         );
//     }
// }
//
// mycomponent.defaultProps = {
//     name: 'basic name'
// };
// mycomponent.propTypes = {
//     name: PropTypes.string,
//     favoriteNumber: PropTypes.number.isRequired
// };
//
// export default mycomponent;

import { Component } from "react";
import PropTypes from "prop-types";

class mycomponent extends Component{
    static defaultProps = {
        name : 'basic name'
    };
    static propTypes = {
        name : PropTypes.string,
        favoriteNumber : PropTypes.number.isRequired
    };
    render(){
        const { name, favoriteNumber, children} = this.props;
        return (
            <div>
                hello, my name is {name}<br/>
                children value is {children}<br/>
                my favoriteNumber is {favoriteNumber}
            </div>
        )
    }
}

export default mycomponent;

### Key Concepts

1. **Props and Destructuring**: Both snippets utilize destructuring in the `render` method to extract `name`, `favoriteNumber`, and `children` from `this.props`. This allows the component to easily access the values passed to it by parent components.

2. **Default Props**: 
   - In the first snippet, `defaultProps` is defined as a property on the `mycomponent` class after its declaration. This approach sets default values for props if they are not provided by the parent component.
   - The second snippet uses a static class property to define `defaultProps` inside the class definition. This is a more modern and concise way to assign default prop values and is often preferred for its locality and readability.

3. **PropTypes**:
   - Both snippets use `PropTypes` to perform type checking on the props the component receives. This is a development-time feature that helps catch bugs by ensuring props are of the correct type.
   - `name` is expected to be a string, and `favoriteNumber` is expected to be a number. Additionally, `favoriteNumber` is marked as `isRequired`, indicating that a warning will be shown if `favoriteNumber` is not provided or is of the wrong type.
   - Similar to `defaultProps`, the first snippet defines `propTypes` after the component class, while the second snippet uses a static class property.

4. **Rendering and Children Prop**:
   - The `render` method returns JSX that displays the `name` and `favoriteNumber` props, along with the `children` prop. The `children` prop is a special prop, automatically passed by React to components, that contains the content placed between the opening and closing tags of the component when it's used in the parent component.
   
5. **Exporting the Component**: Both snippets conclude with `export default mycomponent;`, making the component available for import in other parts of the application.