Utilized tools: React.JS, JSX, DOM, Properties https://s6pv4q.csb.app/

Challenge:

//1. Apply CSS styles to App.jsx component to match the appearance on the completed app:

//2. Extract the contact card as a reusable Card component.

//3. Use props to render the default John contact card, so the Card component can be reused for other contacts.

//4. Import the contacts.js file to create card components.

About the exercise

• This practice I worked on were implemented and built in https://codesandbox.io/p/sandbox/react-new. I learned utilizing such as the Properties, array in very clean code, also by importing JSX file in the right path of components.

Takeaways in this exercise.

1. Fixing CSS Styles:

• First, go to App.jsx and apply the necessary class names.
• Review styles.css for available class names and compare your app with the completed version to determine the right CSS styles.

2. Creating a Reusable Component:

• Extract the contact card from App.jsx to create a reusable card component.
• This involves moving everything within the card div into a new component file.

3. Implementing Props:

• Use props to render the default card, such as Beyoncé's contact card, in the reusable component.
• Replace hardcoded data with props in your new card component.

4. Utilizing contacts.js:

• Use the pre-populated contacts.js file, which contains details and images, to render multiple contact cards.
• By the end, you'll have a contact app with three cards, each showing different contacts but using the same reusable component.

5. Practice and Solution Walkthrough:

• The lesson includes a practical exercise to fork a sandbox or download a zip file for local editing.
• A walkthrough of the solution is provided, emphasizing the application of CSS styles, component extraction, and use of props.