9 proxectos máis para mellorar as túas habilidades front-end
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.
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 proxecto de exemplo aquí. 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 tutorial aquí.
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
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 atopar tutorial aquí.
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
Este é un proxecto moi chulo., 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, este é un gran exemplo 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.
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
pequeno proxecto, demostrando as capacidades de Quasar para crear aplicacións móbiles.