8 идеи за проект React.js, които да ви помогнат да започнете да учите, като правите

Един от най-добрите начини за учене е чрез правене. Но често разработчиците се борят с големия въпрос "какво трябва да изградя?"

Ето 8 идеи за проекти, пълни с брифи за проекти и идеи за оформление, за да започнете да учите чрез работа.

  • Бизнес и реалния свят: Табло за статистически данни на картата
  • Забавно и интересно: Музикален инструмент
  • Лично и портфолио: Блог
  • Производителност: Бележник
  • Пъзели и игри: Space Invaders
  • Инструменти и библиотеки: рамкова тема
  • Добавки за проекти: Webmentions
  • Клонинги: Лов на продукти

Това е преглед на безплатната електронна книга 50 Projects for React & the 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)
  • Листовка за реагиране
  • Gatsby Leaflet Starter (github.com)

Уроци

  • Как да създадете приложение за табло и карта на Coronavirus (COVID-19) в React с Gatsby и Leaflet (freecodecamp.org)
  • Как да добавите статистика за случаите на коронавирус (COVID-19) към вашето табло за реагиране на картата с Gatsby (freecodecamp.org)
  • Картиране с React Leaflet (egghead.io)

Вдъхновение

  • Табло за управление COVID-19 от Центъра за системна наука и инженерство (CSSE) към Университета Джон Хопкинс (JHU) (coronavirus.jhu.ed)
  • Демонстрационно табло на коронавирус (COVID-19) (coronavirus-map-dashboard.netlify.app)

Идея за оформление

Музикален инструмент

Категория: Забавни и интересни

Създайте интерактивно пиано, което можете да използвате за възпроизвеждане на музика с клавиатурата.

Накратко

Не всеки има лукса да притежава музикален инструмент, но може би тези хора имат лаптоп, телефон или таблет. Наличието на пиано е мощен начин да позволите на хората да свирят музика, дори ако преди това не са имали възможност.

Ниво 1

Използвайки приложните програмни интерфейси на браузъра и уеб аудиото, ние можем да създаваме звуци, които когато се съберат, всъщност могат да звучат като музика.

Създайте набор от бутони, които възпроизвеждат ноти в мащаб при щракване.

Ниво 2

Въпреки че не всеки е свирил на инструмент преди, концепцията и интерфейсът на инструмент като пиано обикновено са по-интуитивни от куп бутони.

Създайте оформление на пиано с помощта на бутони, които работят или чрез щракване върху бутона, или с помощта на физическата клавиатура.

Ниво 3

Може да имаме ограничено пространство в браузъра, но има широк спектър от бележки, скали и звуци, които електрическата клавиатура може да издаде с някои добавени ефекти.

Превключватели за създаване на ефект, които променят звука на бележките при включване.

Да направя

  • Създаване на бутони
  • Възпроизвеждане на звук при щракване
  • Подредете бележките в мащаб
  • Създайте оформление на пиано
  • Задайте събития от клавиатурата
  • Създаване на оформление на ефекти
  • Превключване на аудио ефекти

Кутия за инструменти

  • React HotKeys (github.com)

Уроци

  • Изграждане на пиано с React Hooks (dev.to)
  • Как да изградим клавиатура за пиано с помощта на ванилов JavaScript (freecodecamp.org)
  • Изграждане на пиано с tone.js! (разработчик)
  • Как направих пиано само в 1kb JavaScript (frankforce.com)

Вдъхновение

  • React Guitar (response-guitar.com)

Идея за оформление

Блог

Категория: Лични и портфолио

Създайте блог, който можете да използвате, за да споделяте своя опит в кариерата и проекти.

Накратко

С всяка кариера наличието на блог за споделяне на вашия опит е добър начин да информирате хората върху какво работите и да помогнете на другите да се учат от вашия опит.

Това е и начин да затвърдите наученото, за да можете да го правите в бъдеще.

Ниво 1

За да можете да споделите своя опит, имате нужда от структура на уебсайт, която ще ви позволи да създавате ново съдържание и да управлявате съществуващо съдържание.

Един от начините да направите това е чрез създаване на файлове за маркиране, които вашият уебсайт създава, за да създава нови страници и да показва публикациите.

Създайте блог, като използвате файлове за маркиране като източник на съдържание.

Ниво 2

Наличието на вашето съдържание във файлове с маркировка е добър начин за управление на статично съдържание, но може да не искате да редактирате кода всеки път, когато пишете или редактирате публикация.

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

Ниво 3

Ако споделяте код в блога си, HTML изначално поддържа кода и предварителните тагове, които ви помагат да форматирате кода по разбираем начин. Но това не включва подчертаване на синтаксис, което помага за подобряване на четливостта.

Интегрирайте синтаксис, който прави блоковете на кода по-четливи.

Да направя

  • Създайте блог
  • Добавете първо статично съдържание
  • Източник статично съдържание
  • Интегрирайте CMS
  • Добавете код към съдържанието
  • Добавете подчертаване на синтаксис

Кутия за инструменти

  • Netlify CMS (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

Независимо дали го осъзнаваме или не, ние можем да намерим връзки между нашите мисли и по-важното от нашите бележки, където можем да се възползваме от тази мрежа от мисли за нашия бележник.

Добавете свързване на бележки с Roam Research, за да създадете мрежа от мисли.

Да направя

  • Създайте формуляр
  • Съхранявайте нови бележки
  • Бележки към списъка
  • Добавете тагове или категории
  • Добавете търсене на бележки
  • Добавяне на мрежа за бележки

Кутия за инструменти

  • Мозъчна тема на Gatsby (github.com)
  • Fuse.js (fusejs.io)

Уроци

  • Как да добавите търсене към React App с Fuse.js (freecodecamp.org)

Вдъхновение

  • Пяна (foambubble.github.io)
  • Изследване на роуминг (roamresearch.com)
  • Тема за градината Гетсби (github.com)

Идея за оформление

Космически нашественици

Категория: Пъзели и игри

Създайте космически нашественици космически кораб стрелец игра, за да стреля множество вълни на вражески кораби.

Накратко

Space Invaders е аркадна класика, която ви поставя в космически кораб срещу извънземно нашествие. Докато се опитвате да ги свалите, те изстрелват и вие имате само ограничена защита, преди да сте отворени за удар.

Ниво 1

Основната част на играта е, че се движите около космически кораб, опитвайки се да ударите куп извънземни с оръжията си. Докато има един от вас, има много от тях.

Създайте космически кораб, който може да се движи и да стреля извънземни, които не се движат.

Ниво 2

Това, което прави играта сложна, е, че извънземните постоянно се движат. Всеки път, когато ударят ръба на зоната за игра, те падат надолу и ускоряват, приближавайки се до вашия кораб.

Добавете движение към извънземните, които се движат една до друга в зоната за игра. Всеки път, когато извънземните достигнат едната страна, те трябва да се спуснат на ниво. Те също трябва да ускоряват през определени интервали.

Ниво 3

Вие сте сами, но за щастие можете да получите известна защита. Имате щитове, които можете да скриете зад вас, за да ви предпазят, докато издържат.

Създайте няколко щита пред космическия кораб на играча, които могат да понесат ограничено количество щети.

Да направя

  • Създайте нова игра
  • Създайте статични извънземни
  • Създайте космически кораб на играч
  • Добавете контроли за космически кораби
  • Добавете оръжие на космически кораб
  • Конфигурирайте повреда на извънземни
  • Накарайте извънземните да отстрелят
  • Накарайте извънземните да се движат
  • Добавете извънземни интервали
  • Добавете щитове

Уроци

  • Научете JavaScript, като създадете 7 игри (freecodecamp.org)

Вдъхновение

  • Space Invaders (codepen.io)

Идея за оформление

Рамкова тема

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

Създайте тема на Gatsby, която създава проект с рамката на Tailwind CSS.

Накратко

Като разработчици обикновено трябва да правим куп подобни стъпки всеки път, когато създаваме нов проект. Но инструменти като теми ни позволяват да абстрахираме тези стъпки и да ги опаковаме по лесен за използване начин, който може да работи за всеки нов проект.

Ниво 1

Темите на Gatsby са подобна на приставка система, при която можем да се възползваме от конвейера Gatsby, за да споделяме функционалността като пакет на npm.

Това отваря вратата наистина да правим всичко, което бихме направили в сайт на Гетсби, но го правим за повторно използване на всеки сайт на Гетсби.

Създайте нова тема на Gatsby, която, когато се използва, създава нова страница с ръководство за стил във всеки проект, към който е добавена.

Ниво 2

Целта на темите не е просто да създават страници, а да добавят функционалност, която ни прави продуктивни. Това включва неща като рамки и конфигурации на проекти.

Добавете CSS рамка към темата Gatsby, която позволява на добавения проект да използва тази рамка.

Ниво 3

Понякога темите са по-добри само като инструменти, понякога е полезно да бъдете мнителни. Един от начините да добавите полезна функционалност към CSS рамката е да създадете съставни компоненти.

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

Да направя

  • Създайте нова тема
  • Добавете към примерния проект
  • Създайте нова страница със стил
  • Добавете CSS рамка
  • Използвайте CSS в пример
  • Създаване на компоненти
  • Използвайте компоненти

Кутия за инструменти

  • Теми на Гетсби (gatsbyjs.org)
  • Опашен вятър (tailwindcss.com)

Уроци

  • Изграждане на тема (gatsbyjs.org)
  • Какво представлява Tailwind CSS и как мога да го добавя към уебсайта си или към React App? (freecodecamp.org)

Вдъхновение

  • Тема на Gatsby Tailwind (github.com)

Идея за оформление

Webmentions

Категория: Добавки за проекти

Добавете интеграция на уебменции към уебсайт, който показва взаимодействия на Twitter с уебсайта.

Накратко

Социалното взаимодействие е въздействащ начин да привлечем повече аудитория и разговор към теми, за които пишем.

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

Ниво 1

За да се използват Webmentions, уеб сайтът трябва да бъде конфигуриран с мета тагове за предоставяне на информация.

Добавете правилните мета тагове към уебсайт и потвърдете използването му с webmention.io.

Ниво 2

API на Webmentions е начин да видите програмно връзките в социалните взаимодействия от URL на вашия уебсайт. Позволява ви да получите типа на взаимодействието и дори аватара на потребителския профил.

Свържете уебсайт с Webmentions и добавете списък от социални взаимодействия към страниците на публикациите в блога.

Ниво 3

Сега, когато уебсайтът показва всички взаимодействия, трябва да има лесен начин да се присъедините към разговора.

Добавете социална връзка, която при щракване създава туит с връзка към страницата.

Да направя

  • Добавете мета тагове към уебсайта
  • Проверете мета таговете
  • Свържете се с Webmention
  • Свържете социалните към Bridgy
  • Избройте взаимодействията
  • Бутон за добавяне на туит

Кутия за инструменти

  • Webmention.io (webmention.io)
  • Bridgy (brid.gy)
  • Уебменция за приставката Gatsby (github.com)

Уроци

  • Indieweb pt2: Използване на Webmentions в Eleventy (mxb.dev)
  • Клиентски уебменции (swyx.io)
  • Първи стъпки с Webmentions в Gatsby (knutmelvaer.no)
  • Изграждане на уебменции за плъгин Gatsby (christopherbiscardi.com)

Вдъхновение

  • Кнут Мелвер (knutmelvaer.no)
  • Swyx (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 & the Static web!

Спри да се питаш какво да изградя? Изтеглете безплатно на 50reactprojects.com

Последвайте ме за още Javascript, UX и други интересни неща!

  • ? Последвай ме в Туйтър
  • ? ️ Абонирайте се за моя Youtube
  • Регистрирайте се за моя бюлетин