HTML & CSS - Como sair do ZERO no React em Apenas UMA AULA

Quer saber mais sobre o nosso Curso Completo de Full Stack? Clique no link abaixo para garantir sua vaga na próxima turma: https://lp.hashtagtreinamentos.com/full-stack/espera/impressionador?fonte=org-yt_6hiqVVCsA_I&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=zero-react-03-03&conversion=lesfs-mar-25 PARA ACESSAR O MINICURSO GRATUITO DE HTML E CSS (LANDING PAGE): https://pages.hashtagtreinamentos.com/inscricao-minicurso-html-css-landingpage?origemurl=hashtag_yt_org_minihtmlcss_landingpage_6hiqVVCsA_I&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=zero-react-03-03&conversion=lesfs-mar-25 ----------------------------------------------------------------------- 📁 Arquivos Utilizados no Vídeo: https://dlp.hashtagtreinamentos.com/full-stack/arquivo/download?id=1s3oLhzcmyVZH4yp5Xo6qe5DtW243bk6u&origemurl=hashtag_yt_org_arquivofs_6hiqVVCsA_I&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=zero-react-03-03&conversion=lesfs-mar-25 💻 Recomendação de vídeo: Instalação do VS Code e Node JS https://youtu.be/fzgL5YIL77Q Aprenda a usar o Tailwind CSS https://youtu.be/7mt89PPWhaY Curso Básico de Full Stack https://www.youtube.com/playlist?list=PLpdAy0tYrnKzcqd9knClODBDkghwGpzOJ ----------------------------------------------------------------------- Caso prefira o vídeo em texto: https://www.hashtagtreinamentos.com/aprender-react-javascript ----------------------------------------------------------------------- PARA CONTRATAR A HASHTAG PARA SUA EMPRESA: https://www.hashtagtreinamentos.com/treinamentos-corporativos?fonte=yt&origemurl=hashtag_yt_org_incompany_6hiqVVCsA_I&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=zero-react-03-03&conversion=lesfs-mar-25 ----------------------------------------------------------------------- Aprender React do zero pode parecer desafiador, mas com o caminho certo, você vai aprender de forma rápida e prática! Nesta aula, você sairá do zero e criará seu primeiro projeto React completo, entendendo cada etapa essencial para desenvolver interfaces modernas e interativas. Vamos começar configurando o ambiente com Vite e VS Code e, em seguida, explorar conceitos fundamentais, como componentização, estados (useState), manipulação de eventos e renderização condicional. Você também aprenderá a trabalhar com listas dinâmicas, remoção de itens, uso de referências (useRef) e muito mais! Hoje, você desenvolverá a inteligência de um aplicativo para controle de Lista de Mercado. Na próxima aula, vamos estilizar essa aplicação usando Tailwind CSS, tornando-a mais profissional e visualmente atrativa. Com esse conhecimento, você terá uma base sólida para criar projetos cada vez mais robustos e avançar na sua jornada como desenvolvedor Full Stack. Se você quer aprender React do jeito certo, passo a passo e aplicando tudo na prática, essa aula é para você! ----------------------------------------------------------------------- Hashtag Programação ► Inscreva-se em nosso canal: http://bit.ly/3c0LJQi ► Ative as notificações (clica no sininho)! ► Curta o nosso vídeo! ----------------------------------------------------------------------- Redes Sociais ► Blog: https://bit.ly/2MRUZs0 ► YouTube: http://bit.ly/3c0LJQi ► Instagram: https://bit.ly/3o6dw42 ► Facebook: http://bit.ly/3qGtaF2 Aqui nos vídeos do canal da Hashtag Programação ensinamos diversas dicas de HTML e CSS para que você consiga se desenvolver nessa linguagem de programação e criar seus próprios projetos! ----------------------------------------------------------------------- Conteúdo da Aula 00:00 Introdução 02:52 Configurando o projeto React com Vite 06:20 Removendo códigos e arquivos desnecessários 08:34 Entendendo a estrutura do projeto 10:40 O que são componentes em React? 13:25 StrictMode – Testando o código 15:00 Criando um componente no React 15:32 O que é JSX? 16:13 Fragment no React – Retornando um único elemento 18:10 Adicionando elementos ao componente 21:07 Organizando o aplicativo em múltiplos componentes 22:04 Criando um novo componente (Item da Lista) 24:00 Importando e utilizando um componente no React 26:30 Criando uma lista de elementos 27:28 Mapeando e renderizando a lista dinamicamente 29:38 O que são props no React? 32:00 Acessando props dentro de um componente 34:23 Usando desestruturação em props 34:52 O que são Hooks no React? 36:40 Criando uma função para capturar cliques no botão 40:10 Variáveis de estado no React (Hook useState) 41:58 Criando a lista com useState 47:53 Usando o operador ternário para verificar o tamanho da lista 49:25 Função para remover itens da lista 55:51 Ajustando a função para adicionar elementos à lista 58:00 Referência de variável no React (Hook useRef) 1:02:00 Tratando inputs vazios e prevenindo erros 01:04:20 Testando o aplicativo React 01:04:48 Conclusão #fullstack #htmlecss #html #css #javascript #hashtagprogramacao