Проекты JavaScript для обучения Node и React
Итак ... вы, вероятно, потратили много времени на просмотр видеоуроков и копирование кода из статей, но пробовали ли вы создать собственный проект?
Присоединяйтесь к Сообществу Degreeless Developer
Изучение синтаксиса языка - это в некоторой степени легкая часть, собрать все это воедино - задача и, на мой взгляд, лучшая и самая полезная часть. Ниже я составил список возможных проектов, над которыми вы можете работать, чтобы вы могли применить полученные навыки на практике. Приведенные ниже идеи изложены в общих чертах, чтобы вы могли самостоятельно изучить их более подробно, поскольку это лучший способ научиться и выяснить, как соединить мозаику вместе.
Следующие проекты позволят вам поэкспериментировать, научиться читать документацию и улучшить свои навыки решения проблем, ведь все они имеют решающее значение в разработке.
Node.js
Обычно Node.js используется в отрасли для создания масштабируемых микросервисов (подробнее о микросервисах можно узнать здесь). Имея это в виду, я придумал несколько проектных идей, в которых это учтено.
1) Создайте REST API, который взаимодействует с MongoDB.
Сложность: легкая - средняя
Создайте REST API, который позволяет создавать, обновлять, удалять и извлекать пользовательские данные. Пользовательские данные должны храниться в MongoDB.
Пользовательский объект
используйте следующий объект в качестве объекта пользователя:
{"id": 0,"user": {"firstName": "","lastName": "","age": 0,"gender": "","tandcs": false,"email": ""}}
Создайте следующие конечные точки, чтобы редактировать этот пользовательский объект, а также получать его:
/ user / get / {id}: получит пользователя по идентификатору
/ user / create: создает пользователя.
/ user / update / {id}: обновляет пользователя по идентификатору.
/ user / delete / {id}: удаляет пользователя по идентификатору.
Документация:
2) Создайте REST API, который интегрируется с Google Vision API.
Сложность: средняя - высокая
У Google есть невероятный API видения, который использует ИИ для чтения текста с изображений, выполнения задач распознавания и множества других интересных функций.
Проект: создайте REST API, который позволяет отправлять ему изображение, данные из изображения затем извлекаются через Google и сохраняются в базе данных NoSQL, такой как MongoDB.
Конечные точки: / image / upload & / image / get / {imageID}
Документация:
3) Создайте чат с помощью Socket.io
Сложность: средняя
Веб-сокеты обычно используются при потоковой передаче данных через Интернет в реальном времени. Socket.io - это библиотека JavaScript, которая построена поверх этого и представляет собой отличный забавный инструмент, который можно использовать для создания классных проектов, таких как чат.
Для этого вам нужно будет создать html-страницу с простым окном типа чата. Создавайте сокетные соединения, и вы даже можете сохранять разговоры, которые пользователи ведут через вашу чат-комнату, в базе данных.
Документация:
React.js
React - одна из «большой тройки» фреймворков, пользующаяся огромной популярностью. Он обычно используется с узлом во внешних приложениях, чтобы разрешить приложения для рендеринга на стороне сервера, также известные как изоморфные приложения.
Имея это в виду, ниже представлена коллекция полезных идей для проектов, которые помогут вам изучить React.
1) Приложение Social Media Stream
Создайте приложение, которое позволит вам просматривать все ваши каналы социальных сетей на одной странице одновременно. Если вы хотите пойти дальше, у вас может быть кнопка «Снимок», которая в это время сохраняет все ваши данные на экране.
Пользовательский интерфейс приложения может выглядеть примерно так, как показано ниже. где вы можете перемещать и потенциально изменять размер потоков в соответствии с вашими потребностями, используя что-то вроде реагирующего перетаскиваемого пакета e.
Документация:
2) Создайте магазин электронной торговли с помощью redux
React и Redux - отличная комбинация для магазина электронной коммерции, позволяющая создавать действительно крутые и динамичные циклы взаимодействия с клиентами. Попробуйте создать простое приложение, которое использует магазин redux, библиотеку компонентов пользовательского интерфейса и стороннего поставщика платежей, например Stripe.
Вы можете создать несколько макетов продуктов с помощью псевдонима JSON API или жестко запрограммировать файл продуктов.
Документация:
Библиотека пользовательского интерфейса витрины
3) Панель управления криптовалютой
Создайте дашборд с помощью chart.js и CryptoCompare. Панель управления должна позволить вам выбрать несколько валют, а затем отобразить различные диаграммы в зависимости от того, что вы выбрали.
Вы также можете создать фальшивого трейдера, на счету которого будет аккредитована определенная сумма денег. Затем вы можете совершать поддельные транзакции, чтобы имитировать торговлю с использованием криптографического API.
Документация:
Бонус
В качестве бонуса, если вы действительно хотите создать что-то крутое, вы можете попытаться создать систему, в которой вы будете использовать что-то вроде службы User из раздела node в качестве способа получения пользовательских данных для последующего заполнения упомянутого выше приложения для реагирования.
Удачного взлома, и я надеюсь, что это помогло вам дать некоторые идеи. Не стесняйтесь оставлять комментарии, если вам есть что добавить или вам нужна помощь. Вы также можете найти меня в твиттере, используя GeorgeAField1
Получите электронную книгу 101 проекта JavaScript бесплатно
