Se você quiser aprender mais sobre tecnologia, assine meu novo canal no YouTube, onde eu explico tópicos complexos de uma maneira clara e clara! → https://www.youtube.com/@litwire
Quer você seja novo em programação ou já seja um desenvolvedor experiente neste setor, aprender novos conceitos e linguagens/frameworks é
Obrigatório para acompanhar as rápidas mudanças.
Vejamos, por exemplo, Reagir – de fonte aberta pelo Facebook há apenas quatro anos, já se tornou a escolha número um para os dispositivos JavaScript em todo o mundo.
Vue e Angular, naturalmente, têm também sua base legítima de seguidores. E depois há as estruturas Svelte e universal como Next.js ou Nuxt.js. E Gatsby e Gridsome e Quasar … e, e, e, e.
Se o senhor quer brilhar como especialista em JavaScript, deveria ao menos ter alguma experiência em diferentes estruturas e bibliotecas – além de fazer seus deveres de casa com o bom e velho JS.
Para ajudar o senhor a tornar-se um mestre de primeira linha, reuni nove projetos, cada um com um tema específico e uma estrutura ou biblioteca JavaScript diferente, como uma pilha de tecnologia que o senhor pode construir e acrescentar ao seu portfólio. Lembre-se de que nada o ajuda mais do que realmente construir coisas, portanto vá em frente, afie sua mente e faça com que isso aconteça.
A primeira coisa com que o senhor poderia começar é a construção de um aplicativo de busca de filmes usando o React. Abaixo está uma imagem de como será a aplicação final:
O que o senhor vai aprender
Ao construir essa aplicação, o senhor melhorará sua capacidade de reação usando o relativamente novo Hooks API. O projeto exemplo usa componentes React, muitos ganchos, um API externo, e, é claro, algum estilo via CSS.
Pilha técnica e características
- Reagir com ganchos
- create-react-app
- JSX
- CSS
Este projeto, sem a utilização de nenhuma aula, dá ao senhor um ponto de entrada perfeito para a Reação funcional e lhe ajudará definitivamente em 2020.
O senhor pode encontrar o projeto de exemplo aqui. Acompanhe o tutorial, ou dê-lhe seu sabor.
Outro grande projeto para o senhor é a construção de uma aplicação de chat usando minha biblioteca favorita de JavaScript: VueJS.
O aplicativo será algo parecido com isto:
O que o senhor vai aprender
Seguindo esse tutorial, o senhor aprenderá como estabelecer um aplicativo Vue do zero – criando componentes, manipulando estados, criando rotas, conectando-se a um serviço de terceiros, e até mesmo manipulando autenticação.
Pilha técnica e características
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Este é realmente um grande projeto para começar com Vue – ou para melhorar suas atuais habilidades – para enfrentar o desenvolvimento em 2023.
O senhor pode encontrar o tutorial direito aqui.
Esse exemplo o ajudará a construir um belo aplicativo meteorológico usando o Angular 8 do Google:
O que o senhor vai aprender
Esse projeto lhe ensinará habilidades valiosas enquanto cria uma aplicação do zero – começando com o projeto sobre o desenvolvimento e indo até uma implantação pronta para a produção.
Pilha técnica e características
- Angular 8
- Firebase
- Prestação do lado do servidor
- CSS com Grid Layout e Flexbox
- Móvel amigável e responsivo
- Modo escuro
- Linda UI
O que eu realmente, realmente gosto nesse projeto abrangente é que o senhor não aprende coisas isoladamente. Em vez disso, o senhor aprende todo o processo de desenvolvimento – desde o projeto até o desdobramento final.
O senhor deve realmente fazer este aqui.
Svelte é o novo garoto do bloco – pelo menos em comparação com React, Vue, e Angular. No entanto, é uma das brasas para 2023.
OK, as aplicações não são necessariamente o tema mais quente lá fora, mas isso realmente o ajudará a afiar suas habilidades de Svelte. Vai ser assim:
O que o senhor vai aprender
Este tutorial lhe mostrará como fazer um aplicativo usando a Svelte 3 do começo ao fim. Ela faz uso de componentes, estilo e manipuladores de eventos.
Pilha técnica e características
- Svelte 3
- Componentes
- Estilização via CSS
- ES 6 sintaxe
Não há assim tantos bons projetos Svelte para começar, então Eu encontrei este para começar.
E, quem sabe, talvez seja o senhor que criará outro tutorial Svelte mais abrangente que será apresentado na versão do próximo ano deste post?
Em seguida, o.js é a estrutura mais popular para a criação de aplicações React que suportem a renderização fora da caixa do lado do servidor.
Este projeto lhe mostrará como construir um carrinho de compras de comércio eletrônico que se parece com este:
O que o senhor vai aprender
Nesse projeto, o senhor aprenderá como criar um ambiente de desenvolvimento Next.js – criar novas páginas e componentes, buscar dados e estilo e implantar uma aplicação Next.
Pilha técnica e características
- Próximo.js
- Componentes e páginas
- Obtenção de dados
- Styling
- Desdobramento
- SSR e SPA
É sempre ótimo ter um exemplo do mundo real, como uma vitrine de comércio eletrônico, para aprender algo novo. O senhor pode encontrar o tutorial aqui.
Nuxt.js é Vue what Next.js is to React: uma grande estrutura para combinar o poder de renderização do lado do servidor e aplicações de página única.
O aplicativo final que o senhor poderia criar terá este aspecto:
O que o senhor vai aprender
Este projeto de exemplo ensinará ao senhor como construir um website completo usando Nuxt.js – desde a instalação inicial até a instalação final.
Ela usa muitas das características legais que a Nuxt tem a oferecer, como páginas e componentes, bem como o estilo com o SCSS.
Pilha técnica e características
- Nuxt.js
- Componentes e páginas
- Módulo Storyblok
- Mixins
- Vuex para a administração do Estado
- SCSS para a estilização
- Novos middlewares
Este é um projeto muito legal para o senhor e cobre muitas das grandes características do Nuxt.js. Eu pessoalmente gosto muito de trabalhar com a Nuxt, por isso o senhor deveria experimentar esta, pois ela também o tornará um melhor desenvolvedor Vue.
Gatsby é um grande gerador de estática que usa React e GraphQL sob o capô. Este é o resultado deste projeto:
O que o senhor vai aprender
Neste tutorial, o senhor aprenderá como alavancar o Gatsby para construir um excelente blog que usa para escrever seus artigos enquanto faz uso do React e do GraphQL.
Pilha técnica e características
- Gatsby
- Reagir
- GraphQL
- Plugins e temas
- MDX/Markdown
- Bootstrap CSS
- Templates
Se alguma vez o senhor quisesse começar um blogue, este é um grande exemplo de como fazer isso, alavancando React e GraphQL.
Não estou dizendo que o WordPress é sempre uma má escolha, mas com Gatsby, o senhor pode criar sites de alto desempenho enquanto usa o React – que é uma combinação fantástica.
Gridsome é para Vue … OK, já tínhamos isso com Next/Nuxt.
Mas o mesmo se aplica a Gridsome e Gatsby. Ambos usam GraphQL como uma camada de dados, mas Gridsome usa VueJS. É também um gerador de sites estáticos fantásticos que o ajudarão a criar grandes blogs:
O que o senhor vai aprender
Esse projeto ensinará a vocês como construir um blog simples para começar com Gridsome, GraphQL e Markdown.
Também cobre a forma como se pode implantar o pedido via Netlify.
Pilha técnica e características
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Este, com certeza, não é o tutorial mais abrangente, mas cobre os conceitos básicos de Gridsome e Markdown e poderia ser um bom ponto de partida.
Quasar é outra estrutura de Vue que também pode ser usada para construir aplicações móveis.
Neste projeto, o senhor criará um aplicativo de áudio como este:
O que o senhor vai aprender
Enquanto os outros projetos se concentram principalmente em aplicações web, este lhe mostrará como criar uma aplicação móvel usando a Vue através do quadro de Quasar.
O senhor já deveria ter uma configuração de Córdoba funcional com o Android Studio/Xcode configurada. Caso contrário, há um link no tutorial para o site do Quasar, onde o senhor pode ver como configurar isso.
Pilha técnica e características
- Quasar
- Vue
- Córdoba
- WaveSurfer
- Componentes da IU
A pequeno projeto que mostra o poder do Quasar para construir aplicações móveis.
Neste artigo, eu lhe mostrei nove projetos que o senhor pode construir, cada um deles focalizando outra estrutura JavaScript ou biblioteca.
Agora a escolha é toda sua: Vai tentar algo novo, usando uma estrutura que nunca usou antes? Ou quer reforçar suas habilidades fazendo um projeto para uma tecnologia da qual já tem algum conhecimento? Ou vai confiar em sua estrutura/biblioteca favorita e fazer todos os projetos em 2023 com ela?
Se o senhor gosta do que escrevo e quer me apoiar e ao meu trabalho, por favor, me acompanhe no Twitter para saber mais sobre programação, fabricação, redação & careers🥰
