Curso React completo | Star Wars Cardgame [PORTUGUESE]

Curso React completo | Star Wars Cardgame [PORTUGUESE]

Sobre as aulas

01 - Curso React completo - Introdução [PORTUGUESE]

Duração:

01:41min

Descrição:

**Aprenda a criar um card game do Star Wars com IETT e React** Neste curso, você aprenderá conceitos essenciais de desenvolvimento front-end criando um card game do Star Wars. Você trabalhará com IETT (React JavaScript), design responsivo, paginação, componentes do React, CSS, Bootstrap e bibliotecas de ícones. Nós também abordaremos práticas de desempenho de renderização para garantir que sua aplicação seja rápida e eficiente. O curso é projetado para fornecer uma base sólida para o desenvolvimento de aplicações front-end reais e de alto desempenho. **O que você aprenderá:** * IETT (React JavaScript) * Desenvolvimento front-end * Design responsivo * Paginação * Componentes do React * CSS * Bootstrap * Biblioteca de ícones * Práticas de desempenho de renderização **Recursos:** * Animações * Consumo de dados de personagens * Código disponível no Bitcamp Se você está interessado em desenvolvimento front-end e quer aprender as melhores práticas, este curso é para você. Junte-se a nós e crie um card game do Star Wars incrível!

02 - Curso React Completo - Configuração do ambiente [PORTUGUESE]

Duração:

07:47min

Descrição:

Neste vídeo tutorial, você aprenderá a configurar seu ambiente de desenvolvimento para criar aplicativos React. Mostraremos como instalar as ferramentas necessárias, incluindo um editor de texto, Node.js, create-react-app e yarn (opcional). Forneceremos instruções passo a passo sobre como criar um novo projeto React e iniciar o processo de desenvolvimento. Se você é novo no React ou deseja aprimorar suas habilidades de configuração, este vídeo é o ponto de partida perfeito para você. Junte-se a nós e comece sua jornada de desenvolvimento React hoje mesmo!

03 - Curso React Completo - Estrutura do projeto [PORTUGUESE]

Duração:

08:17min

Descrição:

**Aprenda a Configurar seu Projeto Meat Up** Neste vídeo, você aprenderá a configurar a estrutura do seu projeto Meat Up, um aplicativo de realidade aumentada. Mostraremos como personalizar a interface do cliente Mash-Up, iniciar o servidor e criar as pastas e arquivos necessários para o seu projeto. Ao longo do vídeo, abordaremos os seguintes tópicos: * Configuração da estrutura do projeto usando Create React App * Customização da interface do cliente Mash-Up * Início do servidor local * Criação de pastas e arquivos para componentes, páginas e serviços Este vídeo é perfeito para desenvolvedores iniciantes que desejam começar a criar aplicativos de realidade aumentada com o Meat Up. Ao seguir as etapas descritas no vídeo, você poderá configurar rapidamente seu projeto e começar a trabalhar no desenvolvimento do seu aplicativo. Não perca este vídeo essencial e comece sua jornada de desenvolvimento de realidade aumentada hoje mesmo!

04 - Curso React Completo - Criando o Header [PORTUGUESE]

Duração:

08:04min

Descrição:

**Descrição do Vídeo (máximo 500 caracteres):** Neste tutorial, você aprenderá a criar um componente "Header" personalizado para uma aplicação Next.js. O componente "Header" é um elemento comum em aplicações web e normalmente contém o logotipo da marca, links de navegação e outros elementos essenciais. Vamos orientá-lo passo a passo no processo de criação do componente "Header", desde a criação do ficheiro do componente até à sua importação na página principal da aplicação. Você também aprenderá sobre as melhores práticas para acessibilidade, como fornecer texto alternativo (alt) para imagens. Ao final deste tutorial, você será capaz de criar facilmente componentes personalizados para suas aplicações Next.js, aprimorando sua aparência e funcionalidade. Se você é novo no Next.js ou deseja aprimorar suas habilidades de desenvolvimento front-end, este tutorial é perfeito para você. **Recursos adicionais:** * [Documentação do Next.js](https://nextjs.org/) * [Guia de Acessibilidade Web](https://www.w3.org/WAI/) Não se esqueça de se inscrever em nosso canal para mais tutoriais e dicas de desenvolvimento web.

05 - Curso React Completo - Estilizando o Header [PORTUGUESE]

Duração:

08:43min

Descrição:

**Descrição do Vídeo (até 500 caracteres):** Aprenda a estilizar componentes da web com CSS e JavaScript usando a biblioteca styled-components. Esta aula introdutória mostra como instalar e usar a biblioteca para criar estilos reutilizáveis e mantenedores para seus aplicativos. A styled-components oferece uma maneira moderna e eficiente de estilizar componentes da web. Ao separar a lógica de estilo do código HTML e JavaScript, você pode criar componentes visualmente consistentes e facilmente atualizáveis. Neste vídeo, você aprenderá: * Como instalar a biblioteca styled-components * Como definir e aplicar estilos CSS em JavaScript * Como importar componentes estilizados em seus arquivos de renderização Se você está procurando uma maneira poderosa e flexível de estilizar seus aplicativos da web, não perca esta aula. A styled-components é uma ferramenta essencial para desenvolvedores front-end que desejam criar interfaces de usuário bonitas e responsivas. Inscreva-se no canal para mais tutoriais e dicas de desenvolvimento web. Compartilhe este vídeo com outros desenvolvedores e deixe um comentário abaixo se tiver alguma dúvida.

06 - Curso React Completo - Rotas [PORTUGUESE]

Duração:

10:25min

Descrição:

**Descrição do Vídeo (máximo de 500 caracteres):** Aprenda a configurar rotas em aplicações React usando o React Router. Este vídeo tutorial mostra passo a passo como importar bibliotecas essenciais, criar um arquivo de rotas e integrá-lo ao seu aplicativo React. Você aprenderá a definir caminhos para diferentes componentes de página e a navegar entre eles usando um componente de cabeçalho. Este guia abrangente é perfeito para iniciantes ou desenvolvedores que desejam aprimorar suas habilidades de roteamento no React. Ao final deste vídeo, você terá uma compreensão sólida da criação de aplicativos React com navegação dinâmica.

07 - Curso React Completo - Estilos Globais [PORTUGUESE]

Duração:

09:29min

Descrição:

**Descrição do Vídeo (máx. 500 caracteres)** Neste tutorial, você aprenderá a criar estilos globais para sua aplicação React usando a biblioteca "styled-components". Os estilos globais são estilos comuns usados em vários componentes em toda a aplicação. Vamos criar um arquivo "global.js" para armazenar os estilos globais. Importaremos esse arquivo para os componentes que precisam desses estilos. No arquivo "global.js", definiremos estilos globais como fonte, tamanho da fonte, espaçamento e tamanho do contêiner. Esses estilos serão aplicados automaticamente a todos os componentes que usam a biblioteca "styled-components". Isso simplifica a manutenção do estilo da sua aplicação e garante consistência em toda a interface do usuário. Colocando os estilos globais em um arquivo separado, você pode gerenciá-los e atualizá-los facilmente sem precisar modificar vários componentes. Isso melhora a organização e a manutenção do código. Assistir a este tutorial é essencial para desenvolvedores React que buscam criar aplicações com estilos consistentes e fáceis de manter.

08 - Curso React Completo - Estrutura do Card [PORTUGUESE]

Duração:

08:22min

Descrição:

**Descrição do Vídeo (máximo 500 caracteres)** Neste tutorial em vídeo, você aprenderá a criar um card responsivo usando HTML, CSS e JavaScript. Um card é um componente de interface do usuário comumente usado para exibir informações de forma concisa e organizada. Abordaremos os seguintes tópicos: * **Estruturação do HTML:** Criando a estrutura básica do card usando elementos HTML como divs, imagens e parágrafos. * **Estilização com CSS:** Aplicando estilos CSS para controlar o layout, cores, fontes e outros aspectos visuais do card. * **Responsividade com JavaScript:** Usando JavaScript para tornar o card responsivo, garantindo que ele se adapte a diferentes tamanhos de tela. Este tutorial é perfeito para iniciantes que desejam criar cards responsivos e atraentes para seus sites ou aplicativos. Siga as etapas passo a passo e você terá um card totalmente funcional em pouco tempo. Não se esqueça de se inscrever em nosso canal para mais tutoriais e dicas de desenvolvimento web!

09 - Curso React Completo - Conceitos de Props [PORTUGUESE]

Duração:

05:45min

Descrição:

Neste vídeo, você aprenderá sobre props (propriedades) no Vue.js. As props são o meio pelo qual os componentes se comunicam, permitindo que os componentes pais passem dados para os componentes filhos. Você verá como definir props em componentes filhos usando chaves ({}) e como passar dados para as props no componente pai usando a sintaxe de parâmetros do componente de função. Também aprenderá como passar dados dinamicamente para as props, permitindo que sejam recuperados de fontes como banco de dados ou estruturas de dados. Isso é essencial para criar aplicações Vue.js desacopladas e reutilizáveis. Ao entender as props, você pode melhorar a modularidade e a manutenção do seu código. Se você é novo no Vue.js ou deseja aprimorar suas habilidades, este vídeo fornecerá uma base sólida sobre este conceito fundamental.

10 - Curso React Completo - Ícones [PORTUGUESE]

Duração:

05:06min

Descrição:

**Aprenda a adicionar ícones à sua aplicação React com React Icons** Quer adicionar ícones elegantes e profissionais à sua aplicação React? Neste tutorial passo a passo, você aprenderá como fazer isso usando a biblioteca React Icons. A biblioteca React Icons fornece acesso a uma ampla variedade de ícones de fontes populares como Font Awesome e Bootstrap. Mostraremos como instalá-la, importar ícones específicos e adicioná-los aos seus componentes React. Você aprenderá a usar ícones para representar ações, status e muito mais, aprimorando a interface do usuário e a experiência do usuário de sua aplicação. Este tutorial é perfeito para iniciantes e desenvolvedores React experientes que desejam adicionar ícones personalizados às suas aplicações. **O que você aprenderá:** * Como instalar a biblioteca React Icons * Como importar ícones específicos * Como adicionar ícones a componentes React * Como usar ícones para aprimorar a interface do usuário **Inscreva-se no canal para mais tutoriais de desenvolvimento React:** [Link do canal] **Compartilhe este vídeo com outros desenvolvedores React:** [Link do vídeo]

11 - Curso React Completo - State e eventos de clique [PORTUGUESE]

Duração:

07:40min

Descrição:

**Descrição do Vídeo (máximo de 500 caracteres):** Aprenda os fundamentos dos eventos de clique e estados no React, uma biblioteca JavaScript popular para construção de interfaces de usuário. Neste vídeo, você aprenderá a: * Criar e gerenciar estados usando hooks do React * Responder a eventos de clique em elementos de botão * Renderizar condicionalmente elementos com base nos valores de estado * Entender como o React atualiza dinamicamente os componentes quando o estado muda Os eventos de clique permitem que os usuários interajam com sua aplicação, enquanto os estados armazenam informações específicas do componente que podem afetar seu comportamento. A renderização condicional permite que você exiba diferentes elementos com base nos valores de estado. O React usa uma abordagem eficiente para atualização, renderizando apenas as partes alteradas da interface do usuário, o que resulta em alta performance. Este vídeo é perfeito para iniciantes em React que desejam entender os conceitos básicos de gerenciamento de estado e resposta a eventos.

12 - Curso React Completo - Card Bottom [PORTUGUESE]

Duração:

09:18min

Descrição:

**Aprenda a construir seu próprio componente de botão personalizado em React** Neste tutorial passo a passo, você descobrirá como criar um componente de botão reutilizável e personalizável em React. Iremos abordar os seguintes tópicos: * Compreendendo a estrutura de um botão * Criando o componente do botão * Estilizando o botão com CSS * Usando o componente do botão em diferentes partes do seu aplicativo Este tutorial é perfeito para iniciantes em React ou para aqueles que desejam aprimorar suas habilidades de desenvolvimento de componentes reutilizáveis. Ao final do tutorial, você terá um conhecimento sólido de como criar e usar componentes de botão personalizados em seus aplicativos React. **O que você aprenderá:** * Como criar um componente de botão personalizado em React * Como estilizar o botão usando CSS * Como passar dados para o componente do botão * Como usar o componente do botão em diferentes locais do seu aplicativo **Por que assistir a este tutorial:** * Se você é um iniciante em React e deseja aprender a criar componentes reutilizáveis * Se você é um desenvolvedor React experiente e deseja aprimorar suas habilidades de desenvolvimento de componentes * Se você deseja criar aplicativos React mais eficientes e personalizáveis **Não perca este tutorial abrangente e comece a criar seus próprios componentes de botão personalizados em React hoje mesmo!**