Introduction

In React, props (short for properties) are used to pass data from one component to another. They are a fundamental concept that allows components to be dynamic and reusable. Props are read-only, meaning they cannot be modified by the receiving component.

Key Concepts

Props Basics:
- Props are passed to components via HTML attributes.
- They are accessed within the component using this.props in class components or directly in functional components.
Passing Props:
- Props can be passed to a component by adding attributes to the component's JSX tag.
Default Props:
- Default props can be defined to ensure that a component has a fallback value if a prop is not provided.
Prop Types:
- Prop types can be used to enforce the type of props a component should receive, providing better error handling and documentation.

Practical Examples

Example 1: Passing Props to a Functional Component

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent name="John Doe" age={30} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.js
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <h2>Child Component</h2>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

export default ChildComponent;

Example 2: Passing Props to a Class Component

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <ChildComponent name="Jane Doe" age={25} />
      </div>
    );
  }
}

export default ParentComponent;

// ChildComponent.js
import React from 'react';

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h2>Child Component</h2>
        <p>Name: {this.props.name}</p>
        <p>Age: {this.props.age}</p>
      </div>
    );
  }
}

export default ChildComponent;

Example 3: Default Props

// ChildComponent.js
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <h2>Child Component</h2>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

ChildComponent.defaultProps = {
  name: 'Default Name',
  age: 0,
};

export default ChildComponent;

Example 4: Prop Types

// ChildComponent.js
import React from 'react';
import PropTypes from 'prop-types';

function ChildComponent(props) {
  return (
    <div>
      <h2>Child Component</h2>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

ChildComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

export default ChildComponent;

Practical Exercises

Exercise 1: Passing Props

Task: Create a UserCard component that receives username and email as props and displays them.

// UserCard.js
import React from 'react';

function UserCard(props) {
  return (
    <div>
      <h3>User Card</h3>
      <p>Username: {props.username}</p>
      <p>Email: {props.email}</p>
    </div>
  );
}

export default UserCard;

Solution:

// App.js
import React from 'react';
import UserCard from './UserCard';

function App() {
  return (
    <div>
      <h1>App Component</h1>
      <UserCard username="johndoe" email="[email protected]" />
    </div>
  );
}

export default App;

Exercise 2: Default Props and Prop Types

Task: Modify the UserCard component to include default props and prop types.

Solution:

// UserCard.js
import React from 'react';
import PropTypes from 'prop-types';

function UserCard(props) {
  return (
    <div>
      <h3>User Card</h3>
      <p>Username: {props.username}</p>
      <p>Email: {props.email}</p>
    </div>
  );
}

UserCard.defaultProps = {
  username: 'defaultuser',
  email: '[email protected]',
};

UserCard.propTypes = {
  username: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
};

export default UserCard;

Common Mistakes and Tips

Mistake: Forgetting to pass props to a component.
- Tip: Always ensure that you pass the necessary props when using a component.
Mistake: Modifying props within a component.
- Tip: Remember that props are read-only. Use state if you need to manage data that changes over time.
Mistake: Not defining prop types.
- Tip: Use PropTypes to define the expected types of props to catch errors early and improve code readability.

Conclusion

Props are a powerful feature in React that allow you to pass data between components, making them dynamic and reusable. By understanding how to use props, default props, and prop types, you can create more robust and maintainable React applications. In the next topic, we will explore how to manage component state, which is another crucial aspect of building interactive React applications.

Props: Passing Data to Components

Introduction

Key Concepts

Practical Examples

Example 1: Passing Props to a Functional Component

Example 2: Passing Props to a Class Component

Example 3: Default Props

Example 4: Prop Types

Practical Exercises

Exercise 1: Passing Props

Exercise 2: Default Props and Prop Types

Common Mistakes and Tips

Conclusion

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application