Task 7: React Props

[yogeshtakeo]

Task: Understanding and Using React Props

Objective:

Learn how to use props in React to pass data between components and understand the role of props in component reusability and dynamic rendering.

Task Overviewå

• Understand the concept of props in React.
• Pass data between parent and child components using props.
• Utilize props to create reusable and dynamic components.
• Apply basic styling to components.

Task Details

1. Review React Props

• Read or watch tutorials about React props to understand how they work and their importance in component-based architecture.
  • React Documentation on Props
  • React Props Tutorial

2. Set Up a React Project

• Use Vite or Create React App to set up a new project:

  npx create-vite@latest react-props-project
  # or
  npx create-react-app react-props-project

• Navigate into the project directory and start the development server:

  cd react-props-project
  npm install
  npm run dev  # for Vite
  # or
  npm start    # for Create React App

3. Create Components and Pass Props

1. Create a Parent Component (e.g., App.js):

   • In this component, define a state or constant data to pass to child components.

2. Create Child Components:

   • Component 1: Header - This component will receive a title prop and display it as a heading.
   • Component 2: Profile - This component will receive name, age, and bio props to display user information.
   • Component 3: Button - This component will receive a label prop and display a button with that label.

3. Pass Props to Child Components:

   • In the parent component (App.js), pass the necessary data as props to each child component.

   • Example:

     import React from 'react';
     import Header from './Header';
     import Profile from './Profile';
     import Button from './Button';
     
     function App() {
     return (
      <div>
        <Header title="Welcome to React Props Example" />
        <Profile name="John Doe" age={30} bio="Software Developer" />
        <Button label="Click Me" />
      </div>
     );
     }
     
     export default App;

4. Style Components:

   • Apply basic styling using inline styles or a separate CSS file to make the UI more visually appealing.
   • Ensure consistent styling for elements like headings, buttons, and profile sections.

4. Test and Refine

1. Run the development server and view the components in the browser.
2. Ensure that the props are correctly passed and rendered in the child components.
3. Adjust styling as necessary to enhance the appearance and user experience.

Task Submission

1. Take screenshots of the application displaying the components with props.
2. Share the screenshots and a brief explanation of the props used in each component in the issue comment box.
3. Include the GitHub URL of the project repository and your name in the comment section.