Це відео не доступне.
Перепрошуємо.

Agentes do Valorant - Parte 2: Cabeçalho da aplicação - NextJS, TypeScript e Sass

Поділитися
Вставка
  • Опубліковано 8 сер 2024
  • Na segunda parte da nossa série "Agentes do Valorant", exploraremos a estrutura do cabeçalho da nossa aplicação, organizando o HTML e criando a estilização com o pré-processador Sass. Em seguida, daremos os primeiros passos na criação de componentes React, vamos criar o nosso componente Header, a criação de componentes é uma habilidade fundamental para a construção de interfaces dinâmicas e reutilizáveis.
    Não se esqueça de se inscrever e ativar as notificações para não perder nenhum episódio.
    Link do notion: leovargas.notion.site/Agentes...
    🎥 𝗢𝗨𝗧𝗥𝗢𝗦 𝗩𝗜𝗗𝗘𝗢𝗦
    • Criando um portfólio do zero
    • CRIANDO UM SITE DE POR...
    • Projetos de frontend para o portfólio
    • Criação de sites para ...
    • Configurando o ambiente de programação (linux, terminal, vscode)
    • Configurando ambiente ...
    • Curso de ReactJS para iniciantes
    • Curso de React
    ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
    🏘 𝗖𝗢𝗠𝗨𝗡𝗜𝗗𝗔𝗗𝗘 𝗡𝗢 𝗗𝗜𝗦𝗖𝗢𝗥𝗗
    / discord
    ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
    📱𝗥𝗘𝗗𝗘𝗦 𝗦𝗢𝗖𝗜𝗔𝗜𝗦
    ⮞ Twitch: / leovargasdev
    ⮞ Instagram: / leuvargas
    ⮞ Twitter: / leovargasdev
    ⮞ Github: www.github.com/leovargasdev
    ⮞ Linkedin: / leonardo-luis-de-vargas
    ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
    💻 𝗦𝗘𝗧𝗨𝗣
    Notebook Dell (amzn.to/48080ra)
    Tela 1: Monitor AOC(amzn.to/3NAJq8L)
    Suporte Ergonômico ELG (amzn.to/3t0i1G5)
    Hub USB C p/ usar na 2ª tela (amzn.to/3uI2jjs)
    Webcam Logitech BRIO (amzn.to/3RDm4BP)
    Microfone Blue Yeticaster (amzn.to/3sW32wW)
    Teclado Redragon Varuna (amzn.to/3T8Dkji)
    Mouse Logitech G300s (amzn.to/3Rtnfn4)
    Mouse Pad (amzn.to/3Rtnfn4)
    Estante (amzn.to/46KgVfr)
    ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
    📑 𝗦𝗨𝗠𝗔𝗥𝗜𝗢 𝗗𝗢 𝗩𝗜́𝗗𝗘𝗢
    00:00 Introdução
    00:18 Estruturando o header
    01:30 Configurando o Eslint
    03:16 Continuando a estrutura do header
    04:10 Estilizando o header
    06:10 Links do menu
    07:48 Html da area do avatar
    11:00 Estilizando o componente user
    13:26 Separando o cabeçalho em um componente
    17:55 Explicando a estrutura de um componente ReactJS
    20:49: Enviando codigo para o git e encerramento
    #webdevelopment #reactjs #nextjs #sass #valorant

КОМЕНТАРІ • 8

  • @PiguitoBr
    @PiguitoBr 9 місяців тому +1

    Ta aí um cara que merecia ter beeemm mais inscritos no meio Dev, tu tá me ajudando dms a me aprofundar nos estudos irmãozinho, mt obgg

    • @leovargas
      @leovargas  9 місяців тому +1

      De nada!! Aos poucos o canal vai crescendo, o seu comentário já fortalece bastante!! Muito obrigado 🙏🙏🙏

  • @mat.amaral
    @mat.amaral 9 місяців тому +1

    sabe muito!!

    • @leovargas
      @leovargas  9 місяців тому

      Obrigadão Matheus!!!

  • @matheusquintanilha1438
    @matheusquintanilha1438 8 місяців тому +1

    Leo, porque quando voce criou a const Header = () => () você abriu a função com () e não com {}? fiquei confuso nisso porque sempre abri fução tanto normal quanto arrow com chaves e não parenteses

    • @leovargas
      @leovargas  8 місяців тому +1

      Olá Matheus, você pode usar os () em casos que a sua função terá somente o retorno, ou seja, não terá outro código dentro dela, condicionais, laços, criação de variáveis e etc.
      Isso é uma forma de simplificar o retorno, sem precisar usar o método return. No tempo 19:36 eu falo sobre isso.

    • @matheusquintanilha1438
      @matheusquintanilha1438 8 місяців тому

      Ah entendi, e pelo o que você falou no vídeo quando você usa arrow function geralmente você usa assim com () né. A funcionalidade seria a mesma, seria mais a questão da legibilidade do código

    • @leovargas
      @leovargas  8 місяців тому

      isso