React - Level 2 - React with Basic JS Exercise - Build a Dynamic Friends List with React

[akash-coded]

Title: Build a Dynamic Friends List with React!

---

Hey there, budding React developer!

You've learned about components and how to use child components in React. Now, let's take it up a notch by incorporating some essential JavaScript concepts like arrays, loops, and array functions into your React app. In this fun exercise, we'll create a dynamic friends list where you can display and manage a list of your friends. Ready to make your app more interactive and engaging? Let's dive in!

---

🌟 Exercise Overview

Objective: Create a React app that displays a list of friends using components and JavaScript array methods.

What You'll Learn:

• How to render lists in React using the map() function.
• The importance of unique keys in list rendering.
• Using JavaScript concepts like arrays and loops within React components.

---

🛠️ Let's Get Started!

Step 1: Set Up Your React App

If you haven't already, set up a new React app:

npx create-react-app friends-list
cd friends-list
npm start

This will start the development server and open your app in the browser.

---

Step 2: Plan Your Components

We'll need the following components:

1. App - The main parent component.
2. FriendList - A component that renders the list of friends.
3. Friend - A child component that represents a single friend.

---

Step 3: Create the Friend Component

Create a new file called Friend.js in the src folder.

import React from 'react';

function Friend(props) {
  return (
    <li>
      _____ // Fill in the blank
    </li>
  );
}

export default Friend;

📝 Hint: Use props to display the friend's name.

---

Step 4: Create the FriendList Component

Create a new file called FriendList.js in the src folder.

import React from 'react';
import Friend from './Friend';

function FriendList() {
  const friends = ['Alice', 'Bob', 'Charlie', 'David', 'Eve'];

  return (
    <ul>
      {friends._____(friend => (
        <Friend key={_____} name={_____} /> // Fill in the blanks
      ))}
    </ul>
  );
}

export default FriendList;

📝 Hints:

• Use the map() function to iterate over the friends array.
• Assign a unique key prop to each Friend component.
• Pass the friend's name as a prop.

---

Step 5: Update the App Component

Open App.js and modify it to include the FriendList component.

import React from 'react';
import './App.css';
import FriendList from './FriendList';

function App() {
  return (
    <div className="App">
      <h1>My Friends</h1>
      _____ // Fill in the blank
    </div>
  );
}

export default App;

📝 Hint: Render the FriendList component inside the App component.

---

Step 6: Add Some Styling (Optional)

Update App.css to make your friends list look nicer:

.App {
  text-align: center;
  padding: 20px;
}

ul {
  list-style-type: none;
}

li {
  background-color: #61dafb;
  margin: 10px auto;
  padding: 10px;
  width: 200px;
  border-radius: 5px;
}

---

🚀 Run Your App

Save all your files, ensure your development server is running (npm start), and check your app in the browser. You should see a list of your friends displayed!

---

🔄 Recap and Concepts

• Rendering Lists: Use the map() function to render lists of elements in React.
• Keys: Assign a unique key prop to each item in a list to help React identify which items have changed.
• Props: Pass data to components via props to make them dynamic.

---

🧩 Fill-in-the-Blanks Solutions

Step 3: Friend.js

function Friend(props) {
  return (
    <li>
      {props.name}
    </li>
  );
}

---

Step 4: FriendList.js

function FriendList() {
  const friends = ['Alice', 'Bob', 'Charlie', 'David', 'Eve'];

  return (
    <ul>
      {friends.map((friend, index) => (
        <Friend key={index} name={friend} />
      ))}
    </ul>
  );
}

Explanation:

• friends.map(...): We use the map() function to iterate over each friend in the friends array.
• key={index}: We use the index of the array as a unique key for each Friend component.
• name={friend}: We pass the friend's name as a prop to the Friend component.

---

Step 5: App.js

function App() {
  return (
    <div className="App">
      <h1>My Friends</h1>
      <FriendList />
    </div>
  );
}

---

🎉 Congratulations!

You've successfully created a dynamic friends list in React! You've learned how to:

• Use JavaScript array methods like map() within React components.
• Render a list of components dynamically.
• Assign unique keys to list items.
• Pass props to child components.

---

🌟 Extra Challenges

1. Add More Friends: Modify the friends array to include more names.

2. Make It Interactive: Allow users to add new friends to the list.

   Hint: You'll need to use React's state management with the useState hook.

3. Display Friend Details: Expand the Friend component to display more information like age or hobbies.

   const friends = [
     { name: 'Alice', age: 25 },
     { name: 'Bob', age: 22 },
     // Add more friends with additional details
   ];

4. Styling: Enhance the styling to make your app look even better.

---

Understanding the Concepts

1. The map() Function

In JavaScript, the map() function creates a new array by calling a function for every array element.

const numbers = [1, 2, 3];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // Output: [2, 4, 6]

In React, map() is often used to render lists of components.

---

2. Keys in Lists

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

{items.map(item => (
  <Component key={item.id} />
))}

---

3. Props and Child Components

Props are arguments passed into React components. Props are passed to components via HTML attributes.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

---

Keep Experimenting!

Don't stop here! Try modifying your app to deepen your understanding:

• Sort the Friends List: Alphabetically sort the friends before rendering.

  Hint: Use the sort() method.

• Conditional Rendering: Highlight a friend's name if it meets certain criteria (e.g., name starts with 'A').

• Loop Variations: Explore other array methods like filter() and reduce().

---

Happy Coding and Keep Building Amazing Things with React!

---