DEV Community

Cover image for 🏖️ Building My First React Packing List App — Learning Layouts & Rendering Lists
Usama
Usama

Posted on

🏖️ Building My First React Packing List App — Learning Layouts & Rendering Lists

#frontend #javascript #react #beginners

When I started learning React, I wanted a small project that would help me understand layouts, components, and list rendering.

That’s how I built my “Far Away 💼 Packing List App” — a simple app to keep track of what you need for your next trip.

In this post, I’ll share how I structured it, the main concepts I learned, and how to make it look clean with modern CSS.

⚛️ Setting Up the App

First, I created a new React app using:

npx create-react-app faraway
Enter fullscreen mode Exit fullscreen mode

Then, inside App.js, I imported React and started defining my layout:

import React from "react";

function App() {
  return (
    <div className="app">
      <Logo />
      <Form />
      <PackingList />
      <Stats />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Each part of the app is its own component, keeping the code modular and reusable:

  • <Logo /> → shows the title
  • <Form /> → handles adding new items
  • <PackingList /> → renders the list of packed items
  • <Stats /> → displays summary info

🧩 Rendering Lists in React

The heart of this app lies in list rendering.
I started with an array of objects called initialItems:

const initialItems = [
  { id: 1, description: "Passports", quantity: 2, packed: false },
  { id: 2, description: "Socks", quantity: 12, packed: true },
];
Enter fullscreen mode Exit fullscreen mode

Then I displayed them using React’s .map() method:

{initialItems.map((item) => (
  <Item key={item.id} item={item} />
))}
Enter fullscreen mode Exit fullscreen mode

Each Item component receives its data as props and displays it dynamically.
This is how React efficiently renders lists without reloading the whole page.

🎨 Styling with CSS Grid and Flexbox

For layout, I used CSS Grid to structure the app and Flexbox for alignment.

Here’s the layout setup:

.app {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

This makes the app fill the screen with flexible rows —
Header → Form → List → Footer.

For the list itself:

.list ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.2rem;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}
.list ul::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
Enter fullscreen mode Exit fullscreen mode

This creates a responsive grid that adapts to screen size and hides scrollbars for a clean look.

💡 What I Learned

Here are the main takeaways from this small but powerful project:

  1. 🧱 Component-based thinking — every part of UI can be a component
  2. 🔁 Rendering lists — how .map() works and why key props matter
  3. 🎨 Layout design — combining Grid + Flexbox for adaptive UIs
  4. 🧠 Separation of concerns — keeping logic and UI neat and independent

🚀 What’s Next

In the next version of this app, I’ll add:

  • Ability to add and remove items
  • Mark items as packed/unpacked
  • Display percentage of items packed

That’s where state and event handling in React will come into play — the real magic behind dynamic UIs.

🏁 Final Thoughts

This mini project taught me more than I expected — especially how small details like layout, mapping, and clean code structure matter in real projects.

If you’re new to React, start with something small but visual like this.
You’ll build confidence and understand how React really “thinks” under the hood.

✍️ Written by Usama-dev
💻 React learner documenting the journey — one project at a time.

Top comments (0)