Criação de Componentes Web - Para Iniciantes

Aprenda como criar seus próprios componentes para facilitar o desenvolvimento Web

Este curso em vídeo foi projetado para programadores JavaScript que desejam aprender como criar componentes Web, ou seja, tags HTML personalizadas. Ele é dividido em quatro partes principais:

Lembretes sobre ECMAScript 6

Lembretes sobre a evolução do ECMAScript 6 no JavaScript. Esses conceitos serão utilizados ao longo do curso. Se você já conhece funções de seta, classes JavaScript, herança, operador spread e desestruturação, pode seguir diretamente para a segunda parte.

Configuração do Ambiente de Desenvolvimento

Instalação do Visual Studio Code e descoberta do plugin Emmet. Se você já tem o VS Code instalado em seu computador e está familiarizado com o Emmet, pode seguir diretamente para a terceira parte.

Primeira Abordagem aos Componentes Web

Aprendizado passo a passo e exercícios práticos sobre tudo o que você precisa saber para criar componentes Web: injeção de conteúdo no DOM, escuta de eventos dentro de um componente, isolamento do componente do restante do DOM, ciclo de vida do componente, shadow DOM, slots, escuta de atributos, estilização de componentes, etc.

Desenvolvimento de Componentes

Nesta parte, você aplicará o que aprendeu para criar cinco componentes muito diferentes. Eu fornecerei instruções para cada componente, e caberá a você codificá-los do zero. Uma solução será fornecida para cada exercício, e os arquivos de origem também serão fornecidos. Quando comecei a criar este curso em vídeo, tive duas opções: criar um fio contínuo e integrar gradualmente os diferentes conceitos aprendidos ao longo do curso, ou criar exemplos independentes para aprender facilmente e rapidamente os diferentes conceitos relacionados à criação de componentes. Como instrutor em treinamentos presenciais e a distância, experimentei ambas as abordagens. Embora a primeira abordagem tenha seus fervorosos defensores, a segunda abordagem oferece melhores resultados de aprendizado, pois cada exemplo pode ser escolhido com extrema precisão, sem precisar seguir uma lógica de integração global que poderia negligenciar certos aspectos do que precisa ser aprendido. Portanto, a segunda abordagem foi adotada. Na terceira parte, cada tópico é abordado de forma independente e ilustra um aspecto específico da criação de componentes. Quando você concluir a terceira parte, será capaz de criar componentes de todos os tipos. Esse é o objetivo da quarta parte. Independentemente do seu nível atual em programação Web, garanto que, ao final deste curso, você saberá como criar todos os tipos de componentes Web. Você só precisará usá-los para facilitar o desenvolvimento de front-end. Mas observe, repito, este é um curso para iniciantes. Se você já sabe como criar componentes Web, este curso não é para você. No entanto, se você sabe (pelo menos um pouco) como codificar em HTML, CSS e JavaScript e deseja aprender como criar componentes Web, este curso é perfeitamente adequado para você. Um manual ilustrado abrangente está acessível ao final do curso. Ele abrange todo o conteúdo do curso. Só posso aconselhá-lo(a) uma coisa: codifique e progrida no seu próprio ritmo. Gradualmente, a criação de componentes Web se tornará algo natural para você, e você apreciará o poder e a flexibilidade deles. Então... Boa codificação!

O que você aprenderá

- Adquirir todos os conceitos básicos necessários para criar seus próprios Componentes Web - Criar Componentes Web em JavaScript ES6 - Estender HTMLElement ou qualquer elemento HTML - Facilitar a criação de páginas Web integrando componentes reutilizáveis