Sure, here's the requested tutorial.

Using Prop Types and Default Props in React

1. Introduction

Goal

This tutorial aims to help you understand how to use PropTypes and defaultProps in React.

Learning Outcomes

By the end of this tutorial, you will be able to:
- Understand the use of PropTypes in React.
- Specify the data types of props using PropTypes.
- Set default values for your props using defaultProps.

Prerequisites

• Basic knowledge of JavaScript and React.
• A working environment with Node.js and npm installed.

2. Step-by-Step Guide

PropTypes

PropTypes is a way to ensure that components use the right data types. It checks the types of props being passed to components and throws warnings in development if the types do not match.

defaultProps

DefaultProps is a way to set default values for props. If a prop is not provided, its default value as specified in defaultProps will be used.

3. Code Examples

Using PropTypes

The following example shows how to specify the data types of props using PropTypes.

import React from 'react';
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    const { name, age } = this.props;

    return (
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
      </div>
    );
  }
}

// Specify the data types of props
MyComponent.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number.isRequired,
};

export default MyComponent;

In this example, name is defined as a string, and age is defined as a number and is required.

Using defaultProps

The following example shows how to set default values for props using defaultProps.

import React from 'react';
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    const { name, age } = this.props;

    return (
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
      </div>
    );
  }
}

// Specify the data types of props
MyComponent.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number.isRequired,
};

// Set default values for props
MyComponent.defaultProps = {
  name: 'John Doe',
};

export default MyComponent;

In this example, if name is not provided, it will be set to 'John Doe'.

4. Summary

In this tutorial, you learned how to use PropTypes and defaultProps in React. You learned how to specify the data types of props using PropTypes and how to set default values for props using defaultProps.

Next, you can learn more about other ways to ensure the quality of your React code, such as using TypeScript or adding tests with Jest.

Here are some additional resources:
- React PropTypes Documentation
- React defaultProps Documentation

5. Practice Exercises

1. Create a Person component with props name (string), age (number), and isMarried (boolean). Use PropTypes to specify the data types and use defaultProps to set default values.

2. Create a Product component with props name (string), price (number), and isInStock (boolean). Make all props required using PropTypes.

Solutions

1. Solution for Exercise 1:

class Person extends React.Component {
  render() {
    const { name, age, isMarried } = this.props;
    // ...
  }
}
Person.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  isMarried: PropTypes.bool,
};
Person.defaultProps = {
  name: 'John Doe',
  age: 30,
  isMarried: false,
};

1. Solution for Exercise 2:

class Product extends React.Component {
  render() {
    const { name, price, isInStock } = this.props;
    // ...
  }
}
Product.propTypes = {
  name: PropTypes.string.isRequired,
  price: PropTypes.number.isRequired,
  isInStock: PropTypes.bool.isRequired,
};

Keep practicing and experimenting with different types of props and default values. Happy coding!