This content originally appeared on DEV Community and was authored by Usama
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
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>
);
}
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 },
];
Then I displayed them using React’s .map() method:
{initialItems.map((item) => (
<Item key={item.id} item={item} />
))}
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;
}
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 */
}
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:
- 🧱 Component-based thinking — every part of UI can be a component
- 🔁 Rendering lists — how
.map()works and whykeyprops matter - 🎨 Layout design — combining Grid + Flexbox for adaptive UIs
- 🧠 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.
This content originally appeared on DEV Community and was authored by Usama
Usama | Sciencx (2025-10-25T12:47:32+00:00) 🏖️ Building My First React Packing List App — Learning Layouts & Rendering Lists. Retrieved from https://www.scien.cx/2025/10/25/%f0%9f%8f%96%ef%b8%8f-building-my-first-react-packing-list-app-learning-layouts-rendering-lists/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.