Task 7: Data printing in React

[yogeshtakeo]

Task 7: CSS Layout and Printing Class Profiles in a React Project with Vite

Task Overview

1. Understand the concepts of flow layout, position layout, and flexbox in CSS.
2. Implement different CSS layout techniques in a React component.
3. Create a list of class profiles and print them in a React project.

Task Details

Apply CSS Layout Techniques:

1. Open your project in a code editor.
2. Identify a React component (e.g., App.js or any other component in the src directory) where you want to apply CSS layout techniques.
3. Experiment with flow layout, position layout, and flexbox to create different layout structures within the component.
4. Use appropriate CSS properties, such as display, position, float, margin, padding, and flex, to achieve the desired layouts.

Create a List of Class Profiles:

1. Declare an array of objects in the component file, representing the profiles of every person in the class. Each object should contain properties like name, age, hobbies, etc.
2. Render the list of profiles within the component JSX using JavaScript's map() function to iterate over the array.
3. Use appropriate HTML elements to structure and display the profile data for each person.

[
  {
    "name": "Alice",
    "age": 25,
    "hobbies": ["Reading", "Gardening", "Cooking"],
    "bio": "Alice is a passionate learner who enjoys exploring new technologies."
  },
  {
    "name": "Bob",
    "age": 27,
    "hobbies": ["Playing guitar", "Hiking", "Photography"],
    "bio": "Bob is a creative individual who loves expressing himself through music and capturing moments with his camera."
  },
  {
    "name": "Charlie",
    "age": 23,
    "hobbies": ["Painting", "Writing", "Soccer"],
    "bio": "Charlie is an artist at heart, always seeking inspiration from various forms of art."
  },
  {
    "name": "David",
    "age": 29,
    "hobbies": ["Swimming", "Traveling", "Programming"],
    "bio": "David is an adventurer who is passionate about coding and exploring the world at the same time."
  }
]

Test and Refine:

1. Start the development server by running the following command in the project directory npm run dev
2. Open your web browser and navigate to the provided local development server URL (e.g.,http://localhost:3000).
3. Verify that the CSS layout techniques are applied correctly within the component.
4. Check that the list of class profiles is rendered and displayed as expected.

Task Submission

1. Take a screenshot of the web browser displaying the rendered React component with CSS layouts and the list of names.
2. Share the screenshot
3. Optionally, submit the code files (App.js and any other relevant files) for review with the GitHub Repositary.

[junuthapa011]

Name: Junu Thapa Git URL: https://github.com/junuthapa011/Bootcamp-task7.git

[ashmaupret100]

Name: Ashma Upreti Github Url :https://github.com/ashmaupret100/profile_array_iteration.git

[KabinaThapa]

Kabina Thapa https://github.com/KabinaThapa/map-profiles-react

[Namsla]

Namkhang Tsamchoe git url:https://github.com/Namsla/task7.git

[sandessth]

Name: Sandesh Shrestha Git: https://github.com/sandessth/react-app

[Jharanatmg]

Jharana github url: https://github.com/Jharanatmg/Data-Printing-in-React.git

[babisha]

Github Url : https://github.com/babisha/CSS-Layout-and-Class-Profiles.git

[dinakc]

Deena KC https://github.com/dinakc/data_printing_in_react.git

[sdhital12]