**Mastering React.js: Building Modern User Interfaces** **Section Title:** Components and Props **Topic:** Default props and prop types for type checking **Learning Objectives:** * Understand the concept of default props in React * Learn how to use default props to handle missing props * Understand the importance of prop types for type checking * Learn how to add prop types for type checking using the `prop-types` library * Apply default props and prop types effectively to build robust and maintainable React components **What are Default Props?** In React, a default prop is a value that is provided by a component when a specific prop is missing or undefined. By default, React assumes that a prop is undefined if it is not provided. However, when a prop is required, but not provided, React will throw an error. Here's an example: ```jsx function Greeter(name) { return <h1>Hello, {name}</h1>; } const App = () => { return ( <Greeter> {/* No name prop is provided */} </Greeter> ); }; ``` In this example, React will throw an error because the `name` prop is required, but not provided. To fix this issue, we can use default props: ```jsx function Greeter(name = 'Anonymous') { return <h1>Hello, {name}</h1>; } const App = () => { return ( <Greeter> {/* No name prop is provided, so React will use the default value */} </Greeter> ); }; ``` **Why are Default Props Important?** Default props are useful when you want to provide a fallback value for a prop that is not provided by the parent component. This helps prevent errors and ensures that your component still renders correctly even when the required prop is missing. **Prop Types for Type Checking** Prop types are used to ensure that the props passed to a component match the expected types. This helps catch errors at runtime and improves code maintainability. The `prop-types` library is widely used for prop type checking in React. You can install it using npm by running the following command: ```bash npm install prop-types ``` To add prop types to a component, you can use the `propTypes` property: ```jsx import PropTypes from 'prop-types'; function Greeter(props) { return ( <div> <h1>Hello, {props.name}!</h1> </div> ); } Greeter.propTypes = { name: PropTypes.string.isRequired, }; ``` In this example, we define a prop type for the `name` prop using the `PropTypes.string` method. The `isRequired` property specifies that the `name` prop is required. **Key Takeaways:** * Default props are useful for providing fallback values for missing props. * Prop types are essential for type checking and improving code maintainability. * Use the `prop-types` library to add prop types to your components. **Practice Exercise:** Create a new React component that takes a `name` prop and displays a greeting message. Use a default prop for the `name` prop and add prop types using the `prop-types` library. If you get stuck or have any questions, please leave a comment below. ```jsx // Greeter.js import PropTypes from 'prop-types'; function Greeter(props) { return ( <div> <h1>Hello, {props.name}!</h1> </div> ); } Greeter.propTypes = { name: PropTypes.string.isRequired, }; export default Greeter; ``` Left a comment below if you need help or clarification on any part of this topic.

function Greeter(name) {
  return <h1>Hello, {name}</h1>;
}

const App = () => {
  return (
    <Greeter>
      {/* No name prop is provided */}
    </Greeter>
  );
};

function Greeter(name = 'Anonymous') {
  return <h1>Hello, {name}</h1>;
}

const App = () => {
  return (
    <Greeter>
      {/* No name prop is provided, so React will use the default value */}
    </Greeter>
  );
};

npm install prop-types

import PropTypes from 'prop-types';

function Greeter(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

Greeter.propTypes = {
  name: PropTypes.string.isRequired,
};

// Greeter.js
import PropTypes from 'prop-types';

function Greeter(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

Greeter.propTypes = {
  name: PropTypes.string.isRequired,
};

export default Greeter;