Aula 1 – Montando seu Front-End Moderno: React + TypeScript + Bootstrap do zero

Bem‑vindo(a) à primeira aula da disciplina Tecnologias Front‑End da Especialização em Desenvolvimento Web e Mobile do IF Sudeste MG (Campus Rio Pomba). Neste vídeo, o professor Lucas Grassano Lattari mostra, passo a passo, como preparar um ambiente profissional usando React, TypeScript, Bootstrap e Visual Studio Code, com gerenciamento de pacotes via Node.js + npm e scaffolding com Vite. Ao final da aula você terá um projeto React totalmente funcional, estilizado com Bootstrap, pronto para evoluir nas próximas semanas. 📂 Recursos da aula * Repositório GitHub (código‑fonte + scripts): https://github.com/lucaslattari/tec\_front\_end---aula-1 * Downloads oficiais • Node.js LTS → https://nodejs.org • VS Code → https://code.visualstudio.com • React Docs → https://react.dev • Bootstrap Docs → https://getbootstrap.com ✅ Pré‑requisitos * Lógica básica de programação * Conhecimento de HTML e CSS * Sistema operacional Windows, macOS ou Linux com permissões de instalação 🕒 Minutagem da Aula 00:00 - Introdução e Apresentação do Professor 00:43 - Visão Geral do Curso e Objetivos 03:23 - Estrutura do Curso e Público-Alvo 04:58 - Explicação: O que é Front-end e Back-end 07:53 - Por que Bootstrap? Responsividade e Desenvolvimento Eficiente 11:52 - Introdução ao React e seus Benefícios 12:44 - TypeScript: Segurança e Qualidade no Código 13:47 - Analogia das Ferramentas (Bootstrap, React, TypeScript) 16:21 - INÍCIO DA PARTE PRÁTICA: Instalação do Ambiente 17:07 - Instalando o Node.js e NPM 22:49 - Verificando a Instalação do Node e NPM 24:49 - Visual Studio Code: Instalação e Configuração 26:55 - Trabalhando com o Terminal no VS Code 28:51 - Criando o Projeto com Vite 33:44 - Instalando React Bootstrap e Bootstrap 5.3.3 37:28 - Configurando o Projeto e Adicionando Bootstrap 39:42 - Criando o Primeiro Componente com React e Bootstrap 40:27 - Explicação do Código e Conceitos Básicos 44:32 - Executando a Aplicação 46:16 - Finalização e Próximos Passos 💡 O que você aprende hoje 1. Diferença entre Front‑End e Back‑End e o papel de cada tecnologia 2. Por que Bootstrap acelera prototipagem responsiva 3. Como o React gerencia estados e componentes 4. Benefícios de TypeScript para prevenir bugs 5. Instalação do ambiente: Node, npm, VS Code, Vite 6. Criação de um projeto React + TS e inclusão de Bootstrap 💬 Fale com o professor Deixe suas dúvidas nos comentários ou pela plataforma da pós‑graduação. Gostou do conteúdo? Curta, compartilhe e inscreva‑se para não perder as próximas aulas! Roteirização, Narração, Produção e Edição do Vídeo: Lucas Grassano Lattari Logo do DACC criado por Flávio Augusto de Freitas. #DesenvolvimentoWeb #React #TypeScript #Bootstrap #FrontEnd #NodeJS #VisualStudioCode #CursoFrontEnd #JavaScript #WebDevelopment #IFSEMG #ifet #RioPomba