Introdução
Quer você seja novo em programação ou um desenvolvedor experiente, aprender novos conceitos e linguagens/frameworks é uma obrigação neste setor para acompanhar as tendências.
Veja o React, por exemplo, que o Facebook abriu o código-fonte há apenas quatro anos e já se tornou a escolha número um para desenvolvedores de JavaScript em todo o mundo.
Vue e Angular, é claro, também têm sua própria base de fãs legítima. E há o Svelte e outras estruturas universais, como Next.js ou Nuxt.js. E Gatsby, e Gridsome, e Quasar... e muito mais.
Se você quiser provar que é um desenvolvedor JavaScript experiente, você deve ter pelo menos alguma experiência com vários frameworks e bibliotecas - além de trabalhar com o bom e velho JS.
Para ajudá-lo a se tornar um mestre front-end em 2020, reuni nove projetos diferentes, cada um focando em uma estrutura e biblioteca JavaScript diferente como uma pilha de tecnologia que você pode construir e adicionar ao seu portfólio. Lembre-se que nada ajuda mais do que realmente criar coisas, então siga em frente, use sua mente e faça acontecer
O artigo foi traduzido com o apoio da EDISON Software, que E .
Aplicativo de pesquisa de filmes usando React (com ganchos)
A primeira coisa que você pode fazer é criar um aplicativo de busca de filmes usando React. Abaixo está uma imagem de como ficará a aplicação final:
O que você vai aprender
Ao construir este aplicativo, você melhorará suas habilidades de React usando a API Hooks relativamente nova. O projeto de exemplo usa componentes React, muitos ganchos, uma API externa e, claro, alguns estilos CSS.
Pilha de tecnologia e recursos
- Reaja com ganchos
- criar-reagir-app
- Jsx
- APF
Sem usar nenhuma classe, esses projetos oferecem o ponto de entrada perfeito para o React funcional e certamente irão ajudá-lo em 2020. você pode encontrar . Siga as instruções ou faça você mesmo.
Aplicativo de bate-papo com Vue
Outro ótimo projeto para você fazer é criar um aplicativo de chat usando minha biblioteca JavaScript favorita: VueJS. O aplicativo ficará mais ou menos assim:
O que você vai aprender
Neste tutorial, você aprenderá como fazer um aplicativo Vue do zero - criando componentes, manipulando estado, criando rotas, conectando-se a serviços de terceiros e até mesmo lidando com autenticação.
Pilha de tecnologia e recursos
- vista
- vuex
- Roteador Vue
- Vista CLI
- Impulsor
- APF
Este é um projeto realmente ótimo para começar com o Vue ou melhorar suas habilidades existentes para entrar no desenvolvimento em 2020. você pode encontrar .
Aplicativo de clima bonito com Angular 8
Este exemplo irá ajudá-lo a criar um belo aplicativo de clima usando Angular 8:
O que você vai aprender
Este projeto ensinará habilidades valiosas na construção de aplicativos do zero - desde o design até o desenvolvimento, até um aplicativo pronto para implantação.
Pilha de tecnologia e recursos
- Angular8
- Firebase
- Renderização do lado do servidor
- CSS com Grid e Flexbox
- Compatível com dispositivos móveis e adaptabilidade
- Modo escuro
- Interface bonita
O que eu realmente adoro neste projeto abrangente é que você não estuda as coisas isoladamente. Em vez disso, você aprende todo o processo de desenvolvimento, desde o design até a implantação final.
Aplicativo de tarefas pendentes usando Svelte
Svelte é como o novato na abordagem baseada em componentes - pelo menos semelhante a React, Vue e Angular. E este é um dos novos produtos mais quentes para 2020.
Os aplicativos de tarefas não são necessariamente o tópico mais popular, mas realmente ajudarão você a aprimorar suas habilidades no Svelte. Isso parecerá assim:
O que você vai aprender
Este tutorial mostrará como criar um aplicativo usando Svelte 3, do início ao fim. Você usará componentes, estilos e manipuladores de eventos
Pilha de tecnologia e recursos
- Esbelto 3
- Componentes
- Estilizando com CSS
- Sintaxe ES 6
Não existem muitos bons projetos iniciais do Svelte, então descobri .
Aplicativo de comércio eletrônico usando Next.js
Next.js é a estrutura mais popular para construir aplicativos React que suportam renderização no lado do servidor pronta para uso.
Este projeto mostrará como criar um aplicativo de comércio eletrônico semelhante a este:
O que você vai aprender
Neste projeto, você aprenderá como desenvolver com Next.js – criar novas páginas e componentes, extrair dados, estilizar e implantar um aplicativo Next.
Pilha de tecnologia e recursos
- Próximo.js
- Componentes e páginas
- Amostragem de dados
- Styling
- Implantação do Projeto
- RSS e SPA
É sempre bom ter um exemplo real, como um aplicativo de comércio eletrônico, para aprender algo novo. Você pode .
Blog multilíngue completo com Nuxt.js
Nuxt.js é para Vue, o que Next.js é para React: uma ótima estrutura para combinar o poder da renderização do lado do servidor e aplicativos de página única
O aplicativo final que você pode criar ficará assim:
O que você vai aprender
Neste projeto de exemplo, você aprenderá como criar um site completo usando Nuxt.js, desde a configuração inicial até a implantação final.
Ele aproveita muitos dos recursos interessantes que o Nuxt tem a oferecer, como páginas e componentes, e estilo com SCSS.
Pilha de tecnologia e recursos
- Nuxt.js
- Componentes e páginas
- Módulo Storyblock
- Peixe-bruxa
- Vuex para gestão estadual
- SCSS para estilo
- Middlewares Nuxt
, que inclui muitos recursos excelentes do Nuxt.js. Pessoalmente, adoro trabalhar com Nuxt, então você deveria tentar, pois também fará de você um ótimo desenvolvedor Vue.
Blog com Gatsby
Gatsby é um excelente gerador de sites estáticos usando React e GraphQL. Este é o resultado do projeto:
O que você vai aprender
Neste tutorial, você aprenderá como usar Gatsby para criar um blog que usará para escrever seus próprios artigos usando React e GraphQL.
Pilha de tecnologia e recursos
- gatsby
- Reagir
- GraphQL
- Plug-ins e temas
- MDX/redução
- CSS Bootstrap
- templates
Se você sempre quis começar um blog, sobre como fazer isso usando React e GraphQL.
Não estou dizendo que WordPress seja uma má escolha, mas com Gatsby você pode construir sites de alto desempenho usando React – o que é uma combinação incrível.
Blog com Gridsome
Gridsome para Vue... Ok, já tivemos isso com Next/Nuxt.
Mas o mesmo se aplica a Gridsome e Gatsby. Ambos usam GraphQL como camada de dados, mas Gridsome usa VueJS. Este também é um incrível gerador de sites estáticos que o ajudará a criar ótimos blogs:
O que você vai aprender
Este projeto vai te ensinar como criar um blog simples para começar a usar Gridsome, GraphQL e Markdown. Também aborda como implantar um aplicativo por meio do Netlify.
Pilha de tecnologia e recursos
- Grelhado
- vista
- GraphQL
- Redução de preço
- Netlify
Este certamente não é o tutorial mais completo, mas cobre os conceitos básicos do Gridsome e .
Reprodutor de áudio semelhante ao SoundCloud usando Quasar
Quasar é outra estrutura Vue que pode ser usada para criar aplicativos móveis. Neste projeto você criará um aplicativo reprodutor de áudio, por exemplo:
O que você vai aprender
Enquanto outros projetos se concentram principalmente em aplicações web, este mostrará como criar uma aplicação móvel usando Vue e a estrutura Quasar.
Você já deve ter o Cordova rodando com o Android Studio/Xcode configurado. Caso contrário, o manual traz um link para o site do Quasar, onde mostram como configurar tudo.
Pilha de tecnologia e recursos
- Quasar
- vista
- Cordova
- Onda Surfista
- Componentes da IU
, demonstrando os recursos do Quasar para a criação de aplicativos móveis.
Fonte: habr.com