Будування мого проекту Phase 2 на React стало захоплюючою подорожжю, де я здійснив свою давню мрію. Протягом багатьох років я любив робити ручні подарунки на дні народження моїх друзів — кожен виріб унікальний, особистий і наповнений турботою. Керувати цими ідеями та забезпечувати, щоб мої друзі отримали подарунки, які їм справді сподобаються, було справжнім викликом. Тому я вирішив створити додаток для DIY списку бажаного, інтимну та персональну версію Shopify.
Ось як розвивався процес, з його підйомами та падіннями, і уроки, які я отримав на цьому шляху.
Натхнення для проекту
До того, як я почав вивчати програмування, я завжди мріяв мати власний вебсайт — щось просте, використовуючи шаблон на Wix чи Squarespace — для демонстрації своїх DIY проектів. Мета? Дати друзям можливість переглядати і вибирати подарунки, які їм справді подобаються, уникаючи незручних ситуацій, коли добре задуманий подарунок не зовсім відповідав їхнім бажанням.
Тепер, коли я все більше занурююся в програмування, я зрозумів, що можу створити цей вебсайт самостійно, з нуля. Цей додаток став не просто проектом — це спосіб поєднати мою любов до рукоділля з новою пристрастю до програмування.
Структура додатка
Додаток має кілька ключових сторінок, кожна з яких має свою особливу мету:
- Головна сторінка: Теплий прийом, який демонструє мої улюблені DIY проекти. Вона створена так, щоб одразу запросити відвідувачів у світ рукодільних творінь.
- Сторінка DIY списку: Каталог всіх моїх проектів, з опціями фільтрації за матеріалами (наприклад, дерево, тканина, папір, повітряні кулі). Клік на записі відкриває детальну інформацію, як назва проекту, опис і оцінковий час завершення.
- Форма для персональних запитів: Форма, де друзі можуть подавати свої індивідуальні запити на подарунки. Вона включає поля для їхнього імені, вибору проекту, дати народження, уподобань у кольорах та інших деталей.
- Сторінки FAQ та про нас: Відповіді на поширені питання та розповідь про те, чому я створив цей додаток. Ці сторінки додають персонального відтінку, зв'язуючи моїх друзів з основною ідеєю проекту.
- Блог: Хоча наразі він порожній, це простір, який я планую використовувати для документування мого шляху та поділу порадами з DIY.
Підйоми: Що вдалося
1. Організація компонентів: Одним з найприємніших моментів було структурування додатка у багаторазові компоненти React. Наприклад:
- Компонент
DiyCardвідображає деталі окремих проектів. - Компонент
PageBannerзабезпечує послідовні заголовки на всіх сторінках.
Розбивка UI на менші частини зробила розробку та підтримку набагато простішими.
2. Використання Props для динамічних компонентів:
Мені сподобалося вивчати, як передавати дані з батьківського компонента в дочірній за допомогою props. Наприклад, Сторінка DIY списку передає деталі проекту в компонент DiyCard. Така гнучкість дозволяє одному й тому ж дизайну картки відображати різні проекти.
3. Робочий процес подачі форми:
Створення кастомної форми запиту навчило мене, як ефективно управляти станом для кількох полів вводу та обробляти відправку форм.
Спади: Виклики, з якими я зіткнувся
- Отримання даних з
useEffect:
Спочатку мої дані не завантажувалися належним чином, оскільки я неправильно зрозумів, як працює масив залежностей вuseEffect. Після деяких спроб і помилок я навчився правильно його використовувати для отримання даних один раз після рендерингу компонента. - Управління станом форми:
Управління полями форми за допомогоюuseStateбуло складніше, ніж я очікував. Забезпечення синхронізації полів вводу з станом вимагало уваги до деталей і великої кількості налагодження.
Основні уроки
- Розбиття складності:
Розподіл додатка на маленькі, багаторазові компоненти зробив процес розробки більш плавним і менш обтяжливим. - Міць Props:
Props є безцінними для динамічного передавання даних, особливо коли працюєш з списками або деталізованими сторінками. - Управління станом за допомогою
useState:
Правильне управління станом є ключовим для створення інтерактивних додатків, особливо для форм або динамічних сторінок.
4.
Терпіння приносить плоди:
Налагодження проблем ізuseEffectнавчило мене сповільнити темп, уважно читати документацію та тестувати невеликі зміни.
Погляд у майбутнє
Хоча мій додаток для списку бажаного DIY працює, є ще місце для розвитку. Я планую додати такі функції, як кнопка «Улюблені» та покращити дизайн за допомогою кращих анімацій і доступності. Також я з нетерпінням чекаю, щоб спробувати реалізувати темну і світлу теми для того, щоб надати користувачам більш персоналізований досвід. Крім того, я хочу додати форму на сторінці мого DIY списку, щоб мої друзі або користувачі могли пропонувати нові DIY проекти, які вони хочуть побачити чи мати.
Цей проект показав мені, наскільки потужним може бути програмування, щоб перетворити творчі ідеї на реальність. Створення цього додатка було більше, ніж просто завданням — це був спосіб поєднати мою любов до рукоділля з новим набором навичок у програмуванні. Я з нетерпінням чекаю, щоб продовжити покращувати цей проект і досліджувати, що ще я можу створити за допомогою React.
Заключні думки
Якщо ви тільки починаєте свій шлях у програмуванні, знайте, що кожен виклик, з яким ви стикаєтесь, є можливістю для росту. Чи то розбір useEffect, чи створення кастомної форми — кожен крок є частиною процесу. І пам’ятайте, ваш унікальний погляд — чи то як початківець, чи досвідчений розробник — може надихнути інших у технологічній спільноті.
Будьмо разом, створюючи, ділячись та розвиваючись!
Перекладено з: What I Learned While Building a DIY Wishlist App in React