Olá! Sejam muito bem-vindos a mais um curso do Universo do Front End, desta vez focado no React 19. Meu nome é Vinícius Neves, conhecido como o "Dev careca barbudo da Alura", e estou aqui para acompanhar vocês nesta jornada de desbravar e iniciar o primeiro contato com essa biblioteca tão famosa do Front End.
Vamos começar com o que estou mostrando agora: um Figma e um sonho. Ou seja, precisamos transformar esse Figma estático em um aplicativo React funcional. Para isso, é necessário que já tenhamos uma bagagem de Front End com a trindade fundamental: HTML, CSS e JavaScript.
Se já possuímos conhecimento sobre como o JavaScript funciona dentro do navegador, estamos aptos a dar esse primeiro mergulho juntos. Vamos começar do zero, sem nada, criando toda a aplicação. No final, ao trocar de aba, veremos nossa aplicação funcionando, publicada, e poderemos compartilhar o link com outras pessoas para que elas utilizem, seja o tech board ou qualquer aplicação que desejarmos desenvolver em paralelo.
Há muito a ser feito para alcançarmos esse resultado. Estamos animados e aguardamos no próximo vídeo para criar o projeto e começar a desenvolver os primeiros componentes React necessários para alcançar esse resultado incrível no final, que é o tech board. Vamos lá? Estamos esperando!
Estamos prontos para dar nosso primeiro passo na direção do ecossistema do React. Decidimos aprender essa biblioteca, que é amplamente utilizada atualmente, e agora vamos começar a transferir nosso conhecimento de HTML, CSS e JavaScript para o mundo do React. O primeiro passo é criar um projeto novo do zero.
Para criar um projeto novo do zero, vamos abrir o VSCode. Fechamos tudo que está aberto, incluindo qualquer pasta, para começar com o VSCode limpo. Podemos criar um novo projeto na área de trabalho. O nome do projeto, conforme definido no Figma, é tech-tech-board. Criamos uma pasta chamada tech-board na área de trabalho, arrastamos essa pasta para o VSCode e podemos começar a criar arquivos como index.html, script.js e estilos.css. No index.html, utilizamos o atalho do VSCode para criar a estrutura do documento HTML, que é uma exclamação. Podemos importar o CSS com uma tag link e adicionar um script apontando para script.js, utilizando defer para garantir que o script carregue apenas quando o DOM estiver completamente carregado.
Podemos começar a codificar nossa aplicação tech-board. Utilizamos uma extensão do VSCode, como o Live Server, que nos fornece um botão "Go Live". Ao clicar nele, nossa aplicação é carregada com um H1, e podemos começar a estilizar e adicionar JavaScript. Essa é uma aplicação web tradicional, usando apenas arquivos estáticos: HTML, CSS e JavaScript. No entanto, para o React, esse não é o caminho para construir uma nova aplicação.
Para começar um projeto React, precisamos do Node.js. Vamos utilizar o terminal, que pode variar de acordo com o sistema operacional: Bash, Git Bash, PowerShell, CMD, terminal do Windows, Zsh no Linux, entre outros. Não importa qual terminal escolhemos, podemos nos acostumar com qualquer um. No exemplo, estamos usando o terminal Warp. Com o terminal aberto, garantimos que o Node.js está instalado localmente. Embora o Node.js seja frequentemente associado ao back-end, no nosso caso, ele será uma ferramenta de desenvolvimento. O React requer mais passos para ser transformado em algo que o navegador entenda, e o Node.js facilita esse processo.
Para verificar a instalação do Node.js, utilizamos o comando node -v no terminal, que retorna a versão exata do Node.js em uso, como 22.12.0. Recomendamos instalar a versão 22.x na máquina. No material de preparação do ambiente, há dicas e truques para ajudar nesse processo. O mais importante é garantir que o Node.js esteja instalado neste momento.
Se ainda não fizemos isso, é importante pausar o vídeo, voltar ao preparo do ambiente e seguir os passos para instalar o Node.js. Com o Node.js instalado, podemos iniciar o projeto e começar nosso aprendizado com o React.
É importante destacar que o React, por si só, não faz nada. Ele precisa de uma ferramenta ou estrutura para funcionar. Existem várias maneiras de criar uma aplicação React do zero, e uma delas é utilizando uma ferramenta chamada Vite. O Node.js é o ambiente de execução JavaScript, enquanto o Vite é um pacote JavaScript que utilizaremos. O Vite cuidará do nosso ambiente de desenvolvimento e, quando a aplicação estiver pronta, transformará o código em algo que o navegador possa entender.
No site do Vite, na seção "vite.dev-guide", encontramos informações sobre como criar nosso primeiro projeto com Vite. Para isso, precisamos executar o comando npm create vite@latest. Vamos copiar esse comando e colá-lo no terminal. No terminal, estamos acessando a área de trabalho. O local onde executarmos esse comando será onde o projeto será criado.
Após colar o comando npm create vite@latest e pressionar Enter, o terminal perguntará qual será o nome do projeto. Conforme visto no Figma, o nome é "techboard". Após inserir o nome, o terminal solicitará a seleção de um framework. Temos várias opções, e a terceira é o React. Vamos focar no React.
A próxima pergunta é sobre o uso de TypeScript ou JavaScript. Se já soubermos TypeScript, podemos optar por ele, mas usaremos JavaScript puro, que é a terceira opção. Após isso, a estrutura do projeto estará criada. Precisamos entrar no projeto, instalar as dependências necessárias e executar o comando npm run dev para iniciar o ambiente de desenvolvimento.
Os passos são: cd techboard, npm install para instalar as dependências, e npm run dev para iniciar o servidor de desenvolvimento. O Node.js será utilizado pelo Vite para levantar o servidor. Após executar npm run dev, o terminal indicará que a versão do Vite é 6.2.6 e que está disponível localmente na porta 5173. Podemos acessar a aplicação clicando no link fornecido.
Este é o processo para iniciar um projeto React do zero. Embora existam outras maneiras, neste curso, utilizaremos o Vite para aprender os fundamentos do React. Este foi o preparo do ambiente, e muito código ainda está por vir. Nos vemos no próximo vídeo. Até mais!
O projeto está criado e funcionando. Conseguimos integrar o Vite com o React. Vamos abrir o VS Code. Ainda não estamos com a pasta aberta, ela está na área de trabalho. Vamos arrastá-la para abrir diretamente no VS Code. Nosso projeto está iniciado. No Chrome, na localhost:5173, podemos ver que ele exibe "Vite + React".
Devemos editar o arquivo dentro da pasta src, chamado app.jsx, e salvá-lo para testar o HMR (Hot Module Replacement). Basicamente, o HMR permite que as alterações no código sejam refletidas imediatamente no navegador sem a necessidade de recarregar a página. Vamos demonstrar isso na prática. Vamos ajustar o tamanho do navegador e do VS Code para que fiquem lado a lado. No arquivo src/app.jsx, há um trecho de código entre as linhas 10 e 31 que nos interessa. Esse trecho parece HTML, mas não é exatamente isso, como veremos em breve. Ele contém tags e uma imagem, incluindo a indicação de "Vite + React".
Se editarmos esse arquivo, a tela será atualizada automaticamente. Vamos deletar tudo, exceto o import app.css e o return entre parênteses. Assim, a função app ficará com return e parênteses vazios. Agora, vamos criar uma tag main, que será o conteúdo da nossa página, e começar a organizar o HTML.
No Figma, vamos começar pelo cabeçalho e pelo banner. Precisaremos de duas imagens. Vamos criar uma tag header e, dentro dela, uma imagem. Ainda não sabemos onde está essa imagem. Em seguida, criaremos uma section para o banner, que também conterá uma imagem. Já fizemos o download dessas imagens, que estão disponíveis no link "Para Saber Mais", caso ainda não tenham sido baixadas. Na pasta de downloads, temos banner.png e logo.png.
O React depende do Vite para funcionar. Para disponibilizar essas imagens no projeto, vamos movê-las para a pasta "public", na raiz do projeto. Essa pasta já contém o Vite.svg, que é o logo do Vite. Agora, também terá logo.png, que é o logo do Techboard, e banner.png, que é a imagem de uma pessoa com óculos de realidade aumentada.
Para acessar essas imagens, podemos usar o endereço localhost:5173 seguido do nome da imagem. Por exemplo, ao acessar localhost:5173/banner.png, a imagem será carregada no navegador. O Vite está funcionando como um servidor web, semelhante ao que a extensão Live Server do VS Code faz. Podemos também carregar o logo, que será exibido como "Techboard".
No projeto, vamos focar no app.jsx. Como estamos acessando diretamente da raiz, podemos usar /logo.png para a imagem no header e, na section do banner, usar /banner.png. O VS Code indica que ainda não salvamos as alterações. Após salvar, ao voltar para a aba localhost:5173, a imagem do banner será exibida em tamanho grande.
Precisamos agora trazer um pouco de estilo para o nosso layout, especialmente para o header. O logo do Tech Board não está aparecendo, pois é branco e o fundo também está branco. Vamos corrigir isso.
Na linha 1 do nosso app.jsx, estamos importando o app.css. Ao clicar com command ou control, podemos abrir esse arquivo. Dentro dele, há muito CSS da aplicação que foi criada com o Vite. Vamos deletar tudo. Após selecionar e apagar, restará apenas o hub aberto, a imagem do Tech Hub, o seu hub de eventos. Precisamos estilizar isso.
Voltando ao app.jsx, temos uma tag header e uma section com uma imagem dentro. Vamos usar esses seletores. Primeiro, vamos definir a cor de fundo do header. No Figma, selecionamos o pedaço correspondente ao header e copiamos o código hexadecimal da cor. Este é o CSS que já conhecemos. Agora, ao verificar no Vite, o fundo está correto. No entanto, ainda há alguns estilos aplicados, como a margem interna padrão do body.
No Vite, existe um arquivo global chamado index.css, que contém estilos globais da aplicação. Vamos deletar o conteúdo desse arquivo. Após isso, o espaçamento padrão do body será removido. Podemos voltar ao app.css e remover essa margem, definindo margin: 0 para o body.
Agora, precisamos adicionar espaçamento interno e centralizar a imagem. No Figma, verificamos que o espaçamento interno é de 32 pixels para cima e para baixo, e a imagem está centralizada. No header, vamos adicionar padding: 32px e centralizar a imagem usando display: flex e justify-content: center. Ao verificar no Vite, tudo está conforme o esperado.
Vamos continuar estilizando a section. Ela possui um fundo degradê, que podemos copiar do Figma. Após selecionar o elemento, copiamos o estilo de degradê linear e colamos no VS Code. O resultado no Vite já se assemelha ao desejado. Precisamos centralizar e evitar que a imagem vaze. Para centralizar, usamos display: flex e justify-content: center. Para evitar que a imagem vaze, definimos um tamanho máximo de 90% da largura total para a imagem dentro da section. Assim, se a tela for menor, a imagem se ajustará.
Até agora, editamos o app.jsx e o app.css, utilizando HTML e CSS. Esses conceitos são familiares para quem trabalha com web, HTML, CSS e JavaScript. Contudo, o React oferece muito mais do que apenas essa configuração com Vite e Node. No próximo vídeo, começaremos a criar componentes, dando os primeiros passos com o React de verdade.
O curso React 19: JSX, componentes, form action e useState possui 194 minutos de vídeos, em um total de 56 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
Impulsione a sua carreira com os melhores cursos e faça parte da maior comunidade tech.
1 ano de Alura
Assine o PLUS e garanta:
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Acelere o seu aprendizado com a IA da Alura e prepare-se para o mercado internacional.
1 ano de Alura
Todos os benefícios do PLUS e mais vantagens exclusivas:
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Transforme a sua jornada com benefícios exclusivos e evolua ainda mais na sua carreira.
1 ano de Alura
Todos os benefícios do PRO e mais vantagens exclusivas:
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.