Introdución
Tanto se es novo na programación como se xa é un programador experimentado, neste sector é imprescindible aprender novos conceptos e linguaxes/marcos para estar ao día das tendencias.
Tomemos, por exemplo, React, que só foi de código aberto por Facebook hai catro anos e que xa se converteu na elección número un para os desenvolvedores de JavaScript en todo o mundo.
Vue e Angular, por suposto, tamén teñen a súa lexítima base de seguidores. E despois están Svelte e outros frameworks de propósito xeral como Next.js ou Nuxt.js. E Gatsby, e Gridsome, e Quasar... e moito máis.
Se queres demostrar que eres un programador de JavaScript experimentado, debes ter polo menos experiencia con varios frameworks e bibliotecas, ademais de facer un bo traballo antigo con JS.
Para axudarche a converterte nun mestre de front-end en 2020, elaborei nove proxectos diferentes, cada un centrándose en diferentes marcos e bibliotecas de JavaScript como pila tecnolóxica que podes construír e engadir á túa carteira. Lembra que nada che axuda máis que poñer as cousas en práctica, así que adiante, enciende a túa mente e faino posible.
O artigo foi traducido co apoio de EDISON Software, que E .
Aplicación de busca de películas con React (con ganchos)
O primeiro que podes comezar é construír unha aplicación de busca de películas con React. A continuación móstrase unha imaxe de como será a aplicación final:
Que aprenderás
Ao crear esta aplicación, mellorarás as túas habilidades de React usando a relativamente nova API de Hooks. O proxecto de mostra usa compoñentes de React, moitos ganchos, unha API externa e, por suposto, algún estilo CSS.
Pila tecnolóxica e características
- Reacciona con ganchos
- crear-reaccionar-aplicación
- JSX
- CSS
Sen utilizar ningunha clase, estes proxectos ofrécenche o punto de entrada perfecto para React funcional e definitivamente axudarache en 2020. podes atopar . Sigue as instrucións ou faino teu.
Aplicación de chat con Vue
Outro gran proxecto para ti é crear unha aplicación de chat usando a miña biblioteca de JavaScript favorita: VueJS. A aplicación terá un aspecto así:
Que aprenderás
Neste titorial, aprenderás a crear unha aplicación Vue desde cero: crear compoñentes, xestionar estados, crear rutas, conectarte a servizos de terceiros e mesmo xestionar a autenticación.
Pila tecnolóxica e características
- Vue
- vuex
- router vue
- Vista CLI
- Impulsor
- CSS
Este é un proxecto realmente xenial para comezar con Vue ou mellorar as túas habilidades existentes para iniciar o desenvolvemento en 2020. podes atopar .
Fermosa aplicación meteorolóxica con Angular 8
Este exemplo axudarache a crear unha fermosa aplicación meteorolóxica usando Angular 8:
Que aprenderás
Este proxecto ensinarache habilidades valiosas para crear aplicacións desde cero, desde o deseño ata o desenvolvemento, ata unha aplicación lista para implementar.
Pila tecnolóxica e características
- Angular 8
- Base de lume
- Representación do lado do servidor
- CSS con Grid e Flexbox
- Mobil amigable e adaptabilidade
- Modo escuro
- Fermosa interface
O que me gusta moito deste proxecto completo é que non se estuda as cousas de forma illada. Pola contra, aprendes todo o proceso de desenvolvemento desde o deseño ata a implantación final.
Aplicación de tarefas pendentes con Svelte
Svelte é como o novo neno no enfoque dos compoñentes, polo menos semellante a React, Vue e Angular. E este é un dos produtos novos máis populares para 2020.
As aplicacións de tarefas pendentes non son necesariamente o tema máis candente, pero realmente axudaranche a mellorar as túas habilidades Svelte. Será así:
Que aprenderás
Este tutorial mostrarache como crear unha aplicación usando Svelte 3, de principio a fin. Usará compoñentes, estilos e controladores de eventos
Pila tecnolóxica e características
- Esvelto 3
- Compoñentes
- Estilo con CSS
- Sintaxe ES6
Non hai moitos bos proxectos de iniciación Svelte, así que atopei .
Aplicación de comercio electrónico con Next.js
Next.js é o marco máis popular para crear aplicacións React que admitan a renderización do lado do servidor fóra da caixa.
Este proxecto amosarache como crear unha aplicación de comercio electrónico que teña este aspecto:
Que aprenderás
Neste proxecto, aprenderás a desenvolver con Next.js: crear páxinas e compoñentes novos, recuperar datos e aplicar estilo e implementar unha aplicación Next.
Pila tecnolóxica e características
- Seguinte.js
- Compoñentes e páxinas
- Mostraxe de datos
- Estilización
- Implantación do proxecto
- SSR e SPA
Sempre é xenial ter un exemplo real como unha aplicación de comercio electrónico para aprender algo novo. Podes .
Blog multilingüe completo con Nuxt.js
Nuxt.js é para Vue, do mesmo xeito que Next.js é para React: un excelente marco para combinar renderizado no servidor e aplicacións dunha soa páxina
A última aplicación que podes crear terá o seguinte aspecto:
Que aprenderás
Neste proxecto de exemplo, aprenderás a crear un sitio web completo usando Nuxt.js, desde a configuración inicial ata a implementación final.
Aproveita moitas das características interesantes que ofrece Nuxt, como páxinas e compoñentes, e estilos con SCSS.
Pila tecnolóxica e características
- Nuxt.js
- Compoñentes e páxinas
- módulo storyblock
- Mixins
- Vuex para a xestión estatal
- SCSS para estilizar
- Intermediarios de Nuxt
, que inclúe moitas das excelentes funcións de Nuxt.js. Persoalmente, encántame traballar con Nuxt, polo que deberías probalo xa que tamén che converterá nun excelente programador de Vue.
Blog con Gatsby
Gatsby é un gran xerador de sitios estáticos usando React e GraphQL. Este é o resultado do proxecto:
Que aprenderás
Neste tutorial, aprenderás a usar Gatsby para crear un blog que utilizarás para escribir os teus propios artigos usando React e GraphQL.
Pila tecnolóxica e características
- gatsby
- Reaccionar
- GraphQL
- Complementos e temas
- MDX/Markdown
- Bootstrap CSS
- templates
Se algunha vez quixeches comezar un blog, como facelo usando React e GraphQL.
Non digo que WordPress sexa unha mala opción, pero con Gatsby podes crear sitios web de alto rendemento usando React, que é unha combinación incrible.
Blog con Gridsome
Gridsome para Vue... Vale, xa o tiñamos con Next/Nuxt.
Pero o mesmo ocorre con Gridsome e Gatsby. Ambos usan GraphQL como a súa capa de datos, pero Gridsome usa VueJS. Tamén é un xenial xerador de sitios estáticos para axudarche a crear excelentes blogs:
Que aprenderás
Este proxecto ensinarache como crear un blog sinxelo para comezar con Gridsome, GraphQL e Markdown. Tamén explica como implementar unha aplicación a través de Netlify.
Pila tecnolóxica e características
- cuadriculado
- Vue
- GraphQL
- Redución de prezo
- netlify
Este non é o titorial máis completo, pero abrangue os conceptos básicos de Gridsome e .
Reproductor de audio similar a SoundCloud usando Quasar
Quasar é outro marco de Vue que se pode usar para crear aplicacións móbiles. Neste proxecto, crearás unha aplicación de reprodutor de audio, por exemplo:
Que aprenderás
Aínda que outros proxectos céntranse principalmente en aplicacións web, este amosarache como crear unha aplicación móbil usando Vue e o framework Quasar.
Xa deberías ter un Cordova funcionando con Android Studio/Xcode configurado. Se non, o manual ten unha ligazón ao sitio web de Quasar onde che mostran como configurar todo.
Pila tecnolóxica e características
- quásar
- Vue
- Córdoba
- wavesurfer
- Compoñentes da IU
, demostrando as capacidades de Quasar para crear aplicacións móbiles.
Fonte: www.habr.com