8 ідей проекту React.js, які допоможуть вам розпочати навчання, виконуючи

Один з найкращих способів вчитися - це робити. Але часто розробники борються з великим питанням "що мені будувати?"

Ось 8 ідей проектів, укомплектовані брифами проектів та ідеями макета, щоб ви почали вчитися на практиці.

  • Бізнес та реальний світ: інформаційна панель статистики карт
  • Цікаво та цікаво: музичний інструмент
  • Особисте та портфоліо: Блог
  • Продуктивність: Блокнот
  • Головоломки та ігри: Space Invaders
  • Інструменти та бібліотеки: рамкова тема
  • Додатки до проекту: веб-посилання
  • Клони: Полювання на продукт

Це попередній перегляд безкоштовної електронної книги 50 Projects for React & Static Web. Повні 50 ідей проекту, включаючи ці 8, ви можете знайти на сайті 50reactprojects.com.

Інформаційна панель статистики карт

Категорія: Бізнес та реальний світ

Створіть інформаційну панель карти, яка відображатиме статистику та географічну інформацію про COVID-19.

Короткий

Боротьба з глобальною пандемією означає, що такі віруси, як коронавірус, по-різному впливають на світ залежно від географічного положення.

Наявність карти з розподілом статистичних даних кожної країни є корисним способом визначити речі, такі, які країни зазнали найбільшого впливу.

Рівень 1

Найпростіший спосіб переглянути статистику по країнах - це мати карту, яку ви можете переглядати зі статистикою кожної країни, доступною поруч із цією країною.

Створіть додаток для картографування, який використовує API коронавірусу disease.sh для додавання маркерів на карту для кожної країни разом із кількістю випадків COVID-19.

2 рівень

Хоча наявність статистичних даних по кожній країні корисна, може бути корисно мати можливість порівняти ці статистичні дані із кількістю випадків у всьому світі.

Додайте інформаційну панель статистики, яка відображає кількість випадків COVID-19 у всьому світі, а також будь-яку іншу корисну статистику з API.

3 рівень

Отримання поточної статистики - це хороший спосіб зрозуміти сучасний стан світу, але як це порівняти історично?

Використовуйте API історичних даних, щоб на інформаційній панелі відображати графіки, що забезпечують контекст зростання та поширення вірусу.

Робити

  • Створіть новий додаток для карти
  • Отримати дані про країни API
  • Додайте маркери на карту
  • Додайте статистику до маркерів
  • Вибір глобальних даних API
  • Створіть інформаційну панель статистики
  • Додайте глобальну статистику
  • Переглянути історичні дані API
  • Додайте графіки на карту

Набір інструментів

  • API даних про відкриті хвороби (disease.sh)
  • Буклет React (response-leaflet.js.org)
  • Gatsby Leaflet Starter (github.com)

Підручники

  • Як створити програму інформаційної панелі та карти коронавірусу (COVID-19) у React with Gatsby and Leaflet (freecodecamp.org)
  • Як додати статистику випадків коронавірусу (COVID-19) до інформаційної панелі карти React за допомогою Gatsby (freecodecamp.org)
  • Картування за допомогою React Leaflet (egghead.io)

Натхнення

  • Інформаційна панель COVID-19 Центром системної науки та інженерії (CSSE) при Університеті Джона Хопкінса (JHU) (coronavirus.jhu.ed)
  • Демонстрація інформаційної панелі коронавірусу (COVID-19) (coronavirus-map-dashboard.netlify.app)

Ідея макета

Музичний інструмент

Категорія: Весело та цікаво

Створіть інтерактивне піаніно, яке можна використовувати для відтворення музики за допомогою клавіатури.

Короткий

Не кожен має розкіш володіти музичним інструментом, але, можливо, у цих людей є ноутбук, телефон або планшет. Наявність фортепіано - це потужний спосіб дозволити людям грати музику, навіть якщо раніше у них не було такої можливості.

Рівень 1

Використовуючи браузер і веб-аудіо API, ми можемо створювати звуки, які, зібрані разом, насправді можуть звучати як музика.

Створіть набір кнопок, які відтворюють ноти в масштабі при натисканні.

2 рівень

Хоча не всі раніше грали на інструменті, концепція та інтерфейс такого інструменту, як фортепіано, як правило, більш інтуїтивно зрозумілий, ніж купа кнопок.

Створіть розкладку фортепіано за допомогою кнопок, які працюють, натискаючи кнопку або за допомогою фізичної клавіатури.

3 рівень

У нас може бути обмежений простір у браузері, але є широкий діапазон нот, масштабів та звуків, які електрична клавіатура може видавати з деякими доданими ефектами.

Перемикачі "Створити ефект", що змінюють звук нот при включенні.

Робити

  • Створити кнопки
  • Відтворити звук при натисканні
  • Розташуйте нотатки у масштабі
  • Створити макет піаніно
  • Встановити події клавіатури
  • Створити макет ефектів
  • Переключити звукові ефекти

Набір інструментів

  • Гарячі клавіші React (github.com)

Підручники

  • Побудова фортепіано з гаками React (розробник)
  • Як створити клавіатуру для фортепіано за допомогою ванільного JavaScript (freecodecamp.org)
  • Створення піаніно за допомогою tone.js! (розробник)
  • Як я зробив піаніно лише на 1 кб JavaScript (frankforce.com)

Натхнення

  • Гітара React (реагуйте-guitar.com)

Ідея макета

Блог

Категорія: Особисте та портфоліо

Створіть щоденник, за допомогою якого ви можете ділитися своїм кар’єрним досвідом та проектами.

Короткий

У будь-якій кар’єрі наявність блогу, щоб ділитися своїм досвідом, - це хороший спосіб повідомити людей, над чим ви працюєте, та допомогти іншим навчитися на вашому досвіді.

Це також спосіб підкріпити те, що ви дізналися, щоб ви могли посилатися на нього в майбутньому.

Рівень 1

Щоб мати можливість ділитися своїм досвідом, вам потрібна структура веб-сайту, яка дозволить вам створювати новий вміст та керувати наявним вмістом.

Один із способів це зробити - створити файли націнки, які ваш веб-сайт створює для створення нових сторінок та відображення публікацій.

Створіть щоденник, використовуючи файли розмітки як джерело вмісту.

2 рівень

Розміщення вмісту у файлах розмітки - це хороший спосіб керувати статичним вмістом, але, можливо, вам не доведеться редагувати код кожного разу, коли ви пишете чи редагуєте допис.

Інтегруйте систему управління вмістом, яка дозволяє додавати новий вміст або редагувати існуючий за допомогою приємного інтерфейсу користувача.

3 рівень

Якщо ви ділитесь кодом у своєму блозі, HTML спочатку підтримує код і попередні теги, які допомагають форматувати код читабельним способом. Але це не включає підсвічування синтаксису, що допомагає покращити читабельність.

Інтегруйте підсвічувач синтаксису, що робить блоки коду більш читабельними.

Робити

  • Створіть щоденник
  • Додайте перший статичний вміст
  • Вихідний статичний вміст
  • Інтегруйте CMS
  • Додайте код до вмісту
  • Додайте підсвічування синтаксису

Набір інструментів

  • CMS Netlify (netlifycms.org)
  • Prism.js (prismjs.com)

Підручники

  • Створення блогу Gatsby за допомогою Netlify CMS (gatsbyjs.org)
  • Як створити свій щоденник кодування з нуля за допомогою Gatsby та MDX (freecodecamp.org)

Натхнення

  • Gatsby Netlify CMS Starter (gatsby-netlify-cms.netlify.app)

Ідея макета

Зошит

Категорія: Продуктивність

Створіть програму для блокнотів, щоб додавати, керувати та впорядковувати групу нотаток.

Короткий

Конспектування - це чудовий спосіб переконатися, що ми відстежуємо свої думки або пам’ятаємо важливі висновки зі зустрічі. Уміння легко керувати ними та організовувати їх важливо для їх подальшого пошуку!

Рівень 1

Першою вимогою зошита є вміння робити нотатки. Почати це можна досить просто, де насправді вам потрібен якийсь ввід, який збирає те, що ви пишете, і зберігає його десь для подальшого використання.

Створіть форму, щоб додати нові примітки та переглянути їх у списку.

2 рівень

Для того, щоб знайти свої нотатки пізніше, вам потрібен певний спосіб їх упорядкування та спосіб їх пошуку. Це включає додавання категорій або системи позначення, а також користувальницький інтерфейс, з якого можна здійснювати пошук.

Додайте можливість позначати або класифікувати нотатки та введення для пошуку в них.

3 рівень

Ми усвідомлюємо це чи ні, але ми можемо знайти зв’язок між своїми думками і, що ще важливіше, своїми записками, де ми можемо скористатися цією думкою для нашого зошита.

Додайте підключення приміток, що не відповідає вимогам Роума, щоб створити мережу думок

Робити

  • Створіть форму
  • Зберігайте нові нотатки
  • Примітки до списку
  • Додайте теги або категорії
  • Додайте пошук нотаток
  • Додати мережу приміток

Набір інструментів

  • Тема мозку Гетсбі (github.com)
  • Fuse.js (fusejs.io)

Підручники

  • Як додати пошук до програми React за допомогою Fuse.js (freecodecamp.org)

Натхнення

  • Піна (foambubble.github.io)
  • Дослідження роумінгу (roamresearch.com)
  • Тема саду Гетсбі (github.com)

Ідея макета

Космічні загарбники

Категорія: Головоломки та ігри

Створіть гру шутера космічних кораблів-шутерів для стрільби по декількох хвилях ворожих кораблів.

Короткий

Space Invaders - це класична аркадна аркада, яка поставить вас у космічний корабель проти вторгнення прибульців. Коли ви намагаєтеся їх збити, вони стріляють у відповідь, і у вас є лише обмежений захист, перш ніж ви зможете отримати удар.

Рівень 1

Основна частина гри полягає в тому, що ви пересуваєтесь навколо космічного корабля, намагаючись вразити купу іноземців своєю зброєю. Поки є один із вас, їх багато.

Створіть космічний корабель, який може пересуватися і розстрілювати інопланетян, які не рухаються.

2 рівень

Що робить гру хитрою, так це те, що прибульці постійно рухаються. Кожного разу, коли вони потрапляють на край ігрової зони, вони падають і прискорюються, наближаючись до вашого корабля.

Додайте руху інопланетянам, що йдуть поруч із ігровою зоною. Кожного разу, коли прибульці досягають однієї сторони, вони повинні опускатися на рівень. Вони також повинні прискорюватися через певні проміжки часу.

3 рівень

Ви самі по собі, але, на щастя, ви можете отримати певний захист. У вас є щити, за якими ви можете сховатися, щоб захистити вас, поки вони тривають.

Створіть кілька щитів перед космічним кораблем гравця, які можуть отримати обмежену шкоду.

Робити

  • Створіть нову гру
  • Створюйте статичних інопланетян
  • Створіть космічний корабель гравця
  • Додайте елементи керування космічним апаратом
  • Додайте зброю космічного корабля
  • Налаштуйте пошкодження іноземців
  • Змусьте інопланетян стріляти у відповідь
  • Змусьте іноземців рухатися
  • Додайте інтервали інопланетян
  • Додайте щити

Підручники

  • Вивчайте JavaScript, будуючи 7 ігор (freecodecamp.org)

Натхнення

  • Space Invaders (codepen.io)

Ідея макета

Рамкова тема

Категорія: Інструменти та бібліотеки

Створіть тему Гетсбі, яка створює проект із фреймворком CSS Tailwind.

Короткий

Як розробники, нам зазвичай доводиться робити купу подібних кроків щоразу, коли ми створюємо новий проект. Але такі інструменти, як теми, дозволяють абстрагувати ці кроки та упакувати їх простим у користуванні способом, який може працювати для будь-якого нового проекту.

Рівень 1

Теми Gatsby - це плагіноподібна система, де ми можемо скористатися конвеєром Gatsby, щоб поділитися функціональністю як пакет на npm.

Це відкриває двері для того, щоб дійсно робити все, що ми могли б зробити на сайті Гетсбі, але зробити це багаторазовим для будь-якого сайту Гетсбі.

Створіть нову тему Гетсбі, яка при використанні створює нову сторінку керівництва стилем для будь-якого проекту, до якого вона додана.

2 рівень

Мета тем полягає не просто у створенні сторінок, а в додаванні функціональності, яка робить нас продуктивними. Це включає такі речі, як фреймворки та конфігурації проектів.

Додайте фреймворк CSS до теми Gatsby, що дозволяє доданому проекту використовувати цей фреймворк.

3 рівень

Іноді теми кращі лише як інструменти, іноді корисно бути впевненими. Одним із способів додати корисну функціональність до фреймворку CSS є створення складових компонентів.

Створюйте багаторазові компоненти React, використовуючи фреймворк CSS, який можна використовувати в проекті, до якого додана тема.

Робити

  • Створіть нову тему
  • Додати до прикладу проекту
  • Створити нову сторінку стилю
  • Додайте фреймворк CSS
  • Використовуйте CSS у прикладі
  • Створення компонентів
  • Використовуйте компоненти

Набір інструментів

  • Теми Гетсбі (gatsbyjs.org)
  • Хвостовий вітер (tailwindcss.com)

Підручники

  • Створення теми (gatsbyjs.org)
  • Що таке Tailwind CSS і як я можу додати його на свій веб-сайт або в програму React? (freecodecamp.org)

Натхнення

  • Тема `` Гетсбі-хвіст '' (github.com)

Ідея макета

Webmentions

Категорія: Додатки до проекту

Додайте інтеграцію вебменцій на веб-сайт, який відображає взаємодію Twitter із веб-сайтом.

Короткий

Соціальна взаємодія - це ефектний спосіб залучити більше аудиторії та розмов до тем, про які ми пишемо.

Наявність чогось на веб-сайті свідчить про те, що взаємодія може бути корисною як для того, щоб надихнути людей на бажання брати участь, так і дати людям відчути, що вони можуть бути її частиною.

Рівень 1

Для того, щоб використовувати веб-посилання, веб-сайт повинен бути налаштований на метатеги для надання інформації.

Додайте належні метатеги до веб-сайту та підтвердьте їх використання за допомогою webmention.io.

2 рівень

API Webmentions - це спосіб програмно бачити зв’язки в соціальних взаємодіях за URL-адресою вашого веб-сайту. Це дозволяє отримати тип взаємодії і навіть аватар профілю людини.

Підключіть веб-сайт до Webmentions та додайте список соціальних взаємодій на сторінки дописів у блозі.

3 рівень

Тепер, коли веб-сайт показує всі взаємодії, повинен бути простий спосіб долучитися до розмови.

Додайте соціальне посилання, яке при натисканні створює твіт із посиланням на сторінку.

Робити

  • Додайте мета-теги на веб-сайт
  • Перевірити метатеги
  • Підключіться до Webmention
  • Підключіть соціальну мережу до Бріджі
  • Список взаємодій
  • Додати кнопку твіту

Набір інструментів

  • Webmention.io (webmention.io)
  • Бріджи (brid.gy)
  • Webmention плагіна Gatsby (github.com)

Підручники

  • Indieweb pt2: Використання вебменцій в Eleventy (mxb.dev)
  • Веб-посилання на стороні клієнта (swyx.io)
  • Початок роботи з веб-посиланнями в Гетсбі (knutmelvaer.no)
  • Створення веб-посилань на плагін Gatsby (christopherbiscardi.com)

Натхнення

  • Кнут Мельвер (knutmelvaer.no)
  • Свікс (swyx.io)

Ідея макета

Полювання на товар

Категорія: Клони

Створіть клон Product Hunt, який дозволяє людям публікувати новий продукт із рейтингами.

Короткий

Ми всі живемо заради продуктів, будь то наші мобільні телефони чи програми, які ми використовуємо на своїх ноутбуках.

Незважаючи на те, що у світі є безліч продуктів, орієнтуватися між добрими і поганими способами може бути важко. Такі інструменти, як Product Hunt, забезпечують платформу для вивчення нових інструментів та отримання реакцій та відгуків від інших.

Рівень 1

Найважливішою частиною вивчення нових продуктів є сам продукт. Ми хочемо знати, що таке товар, як він виглядає та як він працює.

Створіть сторінку, яка дозволяє додавати на веб-сайт новий продукт із заголовком, зображенням та описом.

2 рівень

Дізнаючись про товари, відгуки - це спосіб, яким ми можемо довіряти товару, перш ніж купувати його. Це допомагає нам отримати впевненість у тому, на що ми збираємось витратити свої гроші чи час.

Додайте можливість додавати відгуки про кожен товар.

3 рівень

Люди люблять продукцію, тож їх у світі безліч. Є занадто багато, щоб спробувати сортувати вручну, тому нам потрібен механізм пошуку та перегляду.

Додайте можливість пошуку продуктів та перегляду за категоріями.

Робити

  • Створіть веб-сайт продукту
  • Створити базу даних
  • Додайте форму товару
  • Додати товар до бази даних
  • Запит товару на сторінку
  • Додайте форму огляду
  • Додайте відгуки до бази даних
  • Додайте відгуки до товару
  • Додайте пошук товару
  • Додайте категорії товарів

Набір інструментів

  • Хасура (hasura.io)

Підручники

  • Створення додатку-клону Product Hunt за допомогою Hasura та Next.js (logrocket.com)
  • Як створити базову версію Product Hunt за допомогою React (freecodecamp.org)

Ідея макета

Більше проектів

Якщо ви хочете отримати більше проектних ідей, перегляньте 50 проектів для React & Static Web!

Перестаньте запитувати себе, що мені будувати? Завантажте безкоштовно на 50reactprojects.com

Слідуйте за мною, щоб дізнатись більше про Javascript, UX та інші цікаві речі!

  • ? Слідуйте за мною у Twitter
  • ? Підписатися на мій Youtube
  • Підпишіться на мою розсилку