Оригинальная ссылка:Dev.to/Simon держи или…
Горячая ежегодная статья DEV, я чувствую себя хорошо после ее прочтения, поэтому я перевел ее для вашего ознакомления. Мой личный уровень ограничен. В статье могут быть некоторые ошибки перевода. Вы можете исправить это в области комментариев.
В этой статье рассматриваются в общей сложности 9 популярных фреймворков/библиотек, нет специального введения в то, как их использовать, но есть несколько отличных практических руководств.
Начинающие (и, возможно, некоторые опытные разработчики) не знают, что делать, когда они читают официальную документацию и хотят написать проект для практики или имеют идеи, но не могут начать. Тогда эта статья вам очень поможет.
Этот перевод был одобрен первоначальным автором:
Другие статьи можно нажать: GitHub.com/Иветт Л.А. Ю/Б…
Управляемое чтение
Будь вы новичок в программировании или опытный разработчик. В этой отрасли мы должны постоянно изучать новые концепции и новые языки или фреймворки, чтобы не отставать от быстрых изменений. Возьмем, к примеру, React: FaceBook был открыт четыре года назад, и теперь он стал первым выбором JS-разработчиков по всему миру. Но в то же время у Vue и Angular есть свои поклонники. Кроме того, есть Svelte, Next и Nuxt.js, Gatsby, Gridsome, quasar и т. д. Если вы хотите стать профессиональным разработчиком JavaScript, вам необходимо иметь некоторые знания о различных фреймворках и библиотеках при разработке фреймворков, с которыми вы знакомы. понимание.
Чтобы помочь вам стать фронтенд-богом в 2020 году, я собрал 9 проектов с использованием различных JS-фреймворков/библиотек, которые вы можете создать или добавить в свои планы на будущее. Помните, что нет ничего более полезного, чем разработка проекта. Так что не медлите и старайтесь развивать его.
1. Создайте приложение для поиска фильмов с помощью React (с хуками)
Во-первых, вы можете создать приложение для поиска фильмов с помощью React. Отображается следующим образом:
Чему вы научитесь?
Создавая этот проект, вы можете использовать более новый Hook API, чтобы улучшить свои навыки работы с React. В примере проекта используются компоненты React, множество хуков, несколько внешних API и, конечно же, несколько стилей CSS.
Стек/точка технологий
- React(Hooks)
- create-react-app
- JSX
- CSS
Вы можете увидеть этот пример проекта здесь:Woohoo.бесплатный код camp.org/news/how-to…
2. Используйте Vue для создания приложения для чата
Еще один замечательный проект, который мы можем вам представить, — это приложение для чата, созданное с помощью Vue. Отображается следующим образом:
Чему вы научитесь?
Вы узнаете, как настроить приложение Vue с нуля, создать компоненты, управлять состоянием, создавать маршруты, подключаться к сторонним службам и даже выполнять аутентификацию.
Стек/точка технологий
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Это действительно отличный проект, будь то изучение Vue или улучшение существующих навыков к 2020 году. Вы можете проверить этот учебник:woohoo.site point.com/pusher-v UE-…
3. Создайте красивое погодное приложение с помощью Augular8.
Этот пример поможет вам создать красивое погодное приложение с помощью Google Angular 8:
Чему вы научитесь?
Этот проект научит вас ценным навыкам, таким как создание приложения с нуля, от проектирования до разработки, вплоть до развертывания в рабочей среде.
Стек/точка технологий
- Angular 8
- Firebase
- SSR
- Веб-макет и Flexbox
- Удобный для мобильных устройств и адаптивный макет
- темный режим
- красивый пользовательский интерфейс
Что мне действительно нравится в этом комплексном проекте, так это не изучение отдельных вещей, а весь процесс разработки от проектирования до окончательного развертывания.
4. Создайте приложение To-Do с помощью Svelte
По сравнению с React, Vue и Angular, Svelte все еще очень новый, но по-прежнему один из самых популярных. Хорошо, приложение To-Do не обязательно является самым популярным продуктом, но оно помогает вам улучшить свои навыки Svelte следующим образом:
Чему вы научитесь?
В этом руководстве показано, как создать приложение с помощью Svelte3 от начала до конца. Он использует компоненты, стили и обработчики событий.
Стек/точка технологий
- Svelte 3
- Components
- CSS
- Синтаксис ES6
У Svelte не так много хороших стартовых проектов, я думаю, это хороший стартовый проект:medium.com/coding он и SM…
5. Создание корзины покупок с помощью Next.js
Next.js — это легкая платформа приложений React, отображаемая на сервере. Этот проект покажет вам, как создать корзину для покупок следующим образом:
Чему вы научитесь?
В этом проекте вы узнаете, как настраивать среду разработки Next.js, создавать новые страницы и компоненты, извлекать данные, стилизовать и развертывать следующее приложение.
Стек/точка технологий
- Next.js
- Компоненты и страницы
- сбор информации
- стиль
- развертывать
- ССР и СПА
Вы можете найти учебник здесь:это ты ПК art.com/blog/next - просто…
6. Создайте многоязычный сайт блога с Nuxt.js
Nuxt.js — это фреймворк приложения для рендеринга на стороне сервера для Vue. Вы можете создать такое приложение:
Чему вы научитесь?
Этот пример проекта шаг за шагом научит вас создавать полноценный веб-сайт с помощью Nuxt.js, от первоначальной настройки до окончательного развертывания. Он использует многие замечательные функции, предоставляемые Nuxt, такие как страницы и компоненты и стили SCSS.
Стек/точка технологий
- Nuxt.js
- Компоненты и страницы
- Модуль сюжетных блоков
- Mixins
- Vuex
- SCSS
- Промежуточное ПО Nuxt
Этот проект содержит множество замечательных функций, которые охватывают Nuxt.js. Мне лично нравится разрабатывать с Nuxt, вам стоит попробовать, это сделает вас лучшим разработчиком Vue!woo woo woo.story Bailian OK.com/vote/angry subsides-that's-…
Кроме того, я также нашел видео станции B:воооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо
7. Создайте блог с Гэтсби
Gatsby — отличный генератор статических сайтов, который позволяет создавать статические сайты с использованием React в качестве механизма рендеринга, и у него действительно есть все преимущества, ожидаемые от современного веб-приложения. Проект выглядит следующим образом:
Чему вы научитесь?
В этом уроке вы узнаете, как создать отличный блог с Гэтсби.
Стек/точка технологий
- Gatsby
- React
- GraphQL
- Plugins & Themes
- MDX / Markdown
- Bootstrap CSS
- Templates
Если вы хотите вести блог, в этом примере показано, как это сделать с помощью React и GraphQL. Не то чтобы Wordpress был плохим выбором, но с Gatsby вы можете создавать эффективные сайты, используя React!
8. Создайте блог с Gridsome
У Gridsome такие же отношения с Vue, как у Gatsby с React. И Gridsome, и Gatsby используют GraphQL в качестве уровня данных, но Gridsome использует VueJS. Это также отличный генератор статических сайтов, который поможет вам создать отличный блог:
Чему вы научитесь?
Проект научит вас использовать Gridsome, GraphQL и Markdown Создать простой блог, он также описывает, как развернуть приложения с помощью NetLify.
Стек/точка технологий
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Конечно, это не самый полный учебник, но он охватывает основные концепции Gridsome и Markdown и может стать хорошей отправной точкой.
woohoo.tel Erik.com/blogs/build…
9. Создайте аудиоплеер, похожий на SoundCloud, с помощью Quasar
Quasar — еще один фреймворк Vue, который также можно использовать для создания мобильных приложений. В этом проекте вы создадите приложение аудиоплеера следующим образом:
Чему вы научитесь?
Довольно много проектов сосредоточено главным образом на веб-приложениях, но этот проект показывает, как создавать мобильные приложения с помощью платформы Quasar. У вас должна быть рабочая установка Cordova, уже настроенная с настроенным android studio/xcode. Если нет, в учебнике есть ссылка на веб-сайт quasar, где вы можете узнать, как его настроить.
Стек/точка технологий
- Quasar
- Vue
- Cordova
- Wavesurfer
- UI Components
Небольшой проект, демонстрирующий возможности Quasar для создания мобильных приложений:Woohoo.учимся чему-то новому.com/how-to-no il…
Суммировать
В этой статье показаны 9 проектов, которые вы можете создать, каждый из которых ориентирован на фреймворк или библиотеку JavaScript. Теперь дело за вами: попробовать что-то новое, используя фреймворк, который вы раньше не использовали, или улучшить существующий навык, выполнив проект, или завершить все проекты в 2020 году?