Desenvolvedor front-end - curso 47.600 rublos. da Loft School, treinamento de 3 meses, data 28 de novembro de 2023.

Desenvolvimento Web Avançado Vue.js

Semana 1 – Fluxo de trabalho

— Conhecemos o mentor e o grupo.
— Utilizando webpack assembly, criamos o layout selecionado para o projeto final.
— Postamos o resultado no Github e enviamos ao mentor para verificação.

Abertura do curso
1. Como vai o treinamento (01:09:37)

Veja. Características principais

1. Teoria (04:49)
2. Olá Mundo (06:20)
3. Tratamento de eventos (02:38)
4. Lidando com vários eventos (01:19)
5. Valores dinâmicos (01:30)
6. Introdução às Diretivas (05:40)
7. Diretivas abreviadas (00:37)
8. Métodos com parâmetros (01:36)
9. Modificadores de eventos (08:52)
10. Propriedades computadas (10:50)
11. Observadores (06:02)
12. Trabalhando com aulas (03:37)
13. Trabalhando com propriedades CSS (02:49)
14. Acessando elementos DOM (03:50)
15. Renderização condicional (04:46)
16. Renderizando listas (05:12)
17. Criando um Componente (04:16)
18. Componentes locais (02:44)
19. Reatividade de dados (04:35)
20. Propriedades dos componentes (03:52)
21. Slots (04:37)
22. Slots com escopo (04:52)
23. Eventos Personalizados (04:27)
24. Teleportes (02:53)

Veja. Componentes de arquivo único
1. Instalando o projeto. VUE-CLI (09:22)
2. Componente de arquivo único (03:18)
3. Trabalhando com estilos (07:02)
4. Passando atributos e manipuladores (02:53)
5. Arquivos individuais (01:26)
6. Validação de propriedades de componentes (07:35)
7. Validação de eventos do usuário (02:01)
8. Comunicação de dados bidirecional (04:11)
9. Modelo v personalizado (05:51)
10. Ganchos de ciclo de vida (07:08)
11. Impurezas (04:40)

NPM
1. O que é NPM? (05:50)
2. Instalando e atualizando o npm (02:33)
3. Ajuda com npm (01:28)
4. Encontrando e instalando pacotes (04:24)
5. Dependências do pacote (02:09)
6. Arquivo de manifesto package.json (03:02)
7. Removendo e atualizando pacotes (03:02)
8. dependências e devDependencies (01:51)
9. Webpack e npx (04:04)
10. scripts npm (04:02)
11. npm, git e github (02:40)

Fio
1. Fio (07:07)

Webpack. Fundamentos
1. Teoria (01:09)
2. Configuração e inicialização mínimas (04:41)
3. Nomenclatura de arquivo (02:34)
4. Carregadores (04:28)
5. Servidor de desenvolvimento (02:43)
6. Plug-ins (02:34)
7. Pesquisa de módulos (03:18)
8. Sorsmaps (03:17)
9. Dev e outros (02:42)
10. Tipos de módulos (03:00)
11. Montagem mínima (05:30)

ESLint. Visão geral da configuração
1. Introdução (01:26)
2. Instalação e lançamento (03:10)
3. Correções de bugs (02:04)
4. Configuração (05:21)
5. Formato de saída (00:52)

Figma para designer de layout
1. Figura. Interface (04:37)
2. Figura. Organização do projeto (01:32)

Caixa flexível
1. Introdução (00:45)
2. Recipiente flexível (01:43)
3. Alinhamento do Eixo Principal (01:37)
4. Alinhamento do eixo cruzado (01:50)
5. Alinhando um único elemento (01:09)
6. Elemento flexível - contêiner (00:53)
7. Direção dos eixos (03:18)
8. Contêiner multilinha (02:54)
9. Alinhando conteúdo multilinha (01:25)
10. Proporções (02:46)
11. Proporções de compressão (01:24)
12. Tamanho básico (04:02)
13. Ordem dos elementos (02:40)

GIT
1. Introdução (07:03)
2. Introdução ao Git (03:01)
3. Criando um novo repositório (01:09)
4. Adicionando arquivos ao índice Git (área de observação) (06:49)
5. Criando um commit (07:17)
6. Confirme a navegação. Cancelar alterações (12h10)
7. Ciclo típico do Git (03:34)
8. Ramificação no Git (11:27)
9. Conflitos ao mesclar filiais (06:06)
10. Salvamento temporário de dados (sem commit) (05:25)
11. Trabalhando com repositórios remotos (20:04)
12. Usando páginas do GitHub para hospedar projetos (04:31)

Veja. Oficina #1
1. Início do projeto (05:24)
2. Componente de cabeçalho (04:13)
3. Componente de ícone (05:06)
4. Exibindo uma lista de componentes (02:56)
5. Alternar componente (03:19)

Semana 2 – Vue.js

— Tornamos o layout adaptável.
— Implementaremos o bloco “Skills” em Vue.js.
— Implementaremos o bloco “Meus Projetos” em Vue.js.
— Implementamos o bloco “Slider for reviews” usando o plugin Vue.js.

Livro de histórias
1. Instalação (01:56) 
2. Primeira história (04:35)
3. Conectando um componente (01:24)
4. Expansão de configuração (04:26)
5. Estilos gerais (02:08)
6. História para o componente (05:23)
7. CDD (04:16)
8. Criando um componente (02:28)
9. Aplicando um componente (02:29)
10. Registro de eventos (03:29)
11. Complemento de planos de fundo (01:41)
12. Botões adicionais (02:28)
13. Fonte do complemento (02:17)
14. Conclusão (01:11)

JavaScript-ES6
1. Interpolação de strings (07:39)
2. Simplificando descrições de métodos (13:35)
3. Padrões (30:08)
4. Tarefa de Desestruturação: Objetos (07:30)
5. Novos recursos e navegadores antigos (13:07)

Assincronia em JavaScript
1. Temporizadores (23:44)
2. Carregando fotos (22:21)
3. Promessas (36:29)
4. AJAX (32:28)

Axios. Biblioteca de consultas
1. Introdução (02:23)
2. Enviando uma solicitação (02:12)
3. Visão geral da configuração (04:30)
4. Corpo da solicitação (01:43)
5. Configurações padrão (01:38)
6. Interceptadores (02:11)
7. Serviços (02:33)
8. espera assíncrona (01:18)

Veja. Oficina #2
1. Preparação (02:39)
2. Conectando um componente (02:16)
3. Saída de controle (02:38)
4. Componente de progresso (05:09)
5. Solicitação ao servidor (06:38)
6. Saída de dados (05:55)

Semana 3 – JavaScript nativo

— Estamos criando o painel de administração.
— Estudamos Storybook e aplicamos em nosso projeto.
— Realizamos o processamento necessário (validação) dos formulários dos projetos.

VueRouter. Roteamento no navegador
1. Introdução (04:31)
2. Construção de links (02:41)
3. Navegação de software (02:35)
4. Parâmetros de caminho (04:42)
5. Parâmetros como propriedades (00:49)
6. Opções avançadas e 404 (03:29)
7. Rotas aninhadas (03:23)
8. Aulas de atividades (02:37)
9. Várias visualizações do roteador (01:08)
10. Importações dinâmicas (02:00)
11. URL lindo (02:16)

Vuex. Gerente Estadual
1. Introdução (01:13)
2. Conexão (02:30)
3. Ação (02:27)
4. Mutações (02:16)
5. Getters (02:02)
6. Aplicação na prática (08:07)
7. Funções de assistente (02:59)
8. Módulos (05:18)
9. Módulos dinâmicos (01:38)
Resposta da questão

Veja. Oficina #3
1. Disposição (04:33)
2. Saída de dados (02:42)
3. Preparando-se para Animação (02:14)
4. Exibição de botão (03:45)
5. Carregamento de conteúdo adicional (11:38)
6. Mostrar slide após a transição (02:17)

Semana 4 - Vue.js, SPA

— Implementamos SPA no painel de administração.
— Estudamos como trabalhar com dados por meio do armazenamento de aplicativos
— Usamos ajax para nos comunicarmos com a API, configurar interações cliente-servidor.

Autorização. Fichas
1. Tipos de autorização (04:20)
2. GitHub OAuth (01:42)
3. Criando um aplicativo GitHub (02:28)
4. Recebendo um token (08:38)
5. Armazenando dados em código (01:46)
6. Proteção de rota (04:13)

Veja. Oficina #4
1. Preparação (01:33)
2. Criando uma ação (02:30)
3. Status do download (04:01)
4. Solicitação (02:27)
5. Removendo duplicatas (03:29)
6. Proteção de rota (03:23)
7. Sair (00:51)

Semana 5 – Prática

— Exibimos os dados salvos do painel de administração na página inicial.
— Testamos os componentes.
— Trabalho em grupo num projeto com um mentor.

Vue.js. API de composição
1. Introdução (01:29)
2. Exemplo geral (03:57)
3. Função de música (01:51)
4. Função reativa (00:55)
5. Função toRef (01:35)
6. Função toRefs (00:58)
7. Propriedades computadas (00:56)
8. função de relógio (01:41)
9. Função watchEffect (03:14)
10. função somente leitura (00:40)
11. Funções de teste (02:30)
12. função não ref (01:27)
13. Ganchos de ciclo de vida (00:58)
14. Exemplo. Visão geral do projeto (00:53)
15. Exemplo. Funcionalidade de carregamento (01:20)
16. Exemplo. Categorias (02:20)
17. Exemplo. Filtragem inicial (02:46)
18. Exemplo. Troca de filtro (02:11)
19. Exemplo. Outras funções de filtragem (02:03)
20. Exemplo. Método de classificação (03:05)
Teste de código JS
1. Introdução (16:05)
2. Brincadeira (15:47)
3. Os benefícios dos testes (09:01)
4. Cobertura (10:02)

Vue.js. Teste de componentes
1. Configurando pacotes (04:39)
2. Invólucro de componente (04:13)
3. O que testar (02:48)
4. Primeiro teste (05:25)
5. Verificando o evento de emissão (03:44)
6. Transferência de propriedades (02:58)
7. Trabalhando com elementos de formulário (05:42)
8. Configurações gerais (01:15)
9. Moki (05:04)
10. Conectando bibliotecas (02:32)
11. Teste de ação (03:26)
12. Testando a loja (02:53)
13. Testando com fotos (03:08)

Testando. moki
1. Criando uma maquete (02:39)
2. Trabalhando com argumentos (01:39)
3. Valor de retorno (02:57)
4. Módulos (04:24)
5. Temporizadores (02:05)

Veja. Oficina #5
1. Componente Simples (03:03)
2. Componente com loja (05:21)
3. Testando. Preparação (03:20)
4. Testando. Alternador (02:38)
5. Testando. Problemas (05:08)

Semana 6 - Concluindo o projeto

— Estamos finalizando o projeto.
— Submetemos o projeto para avaliação dos mentores.
— Diplomas de classificação.

Como conseguir um emprego em TI: dicas e truques
1. Como conseguir um emprego em TI? Pesquisa, entrevista e período probatório (42:21)
2. Como encontrar trabalhos remotos e pedidos freelance? (20:12)
3. Primeiro emprego em TI – como se comportar? Estágios, emprego oficial e trabalho “por comida” (14:11)
4. Como passar o período probatório? (27:10)
5. Como se preparar para uma entrevista em uma empresa FAANG (08:52)
6. O processo de carregamento de uma página da web (25:19)
7. Entrevista com programador – tudo o que você precisa saber (01:24:07)
8. Resolvendo um problema em uma entrevista com um programador (19:36)
9. Entrevista com desenvolvedor front-end (01:37:17)

Desenvolvimento de aplicações web React.js

Semana 1 - Introdução ao React.js

— Conhecemos a equipe do curso e os colegas.
— Aprendendo JSX e Virtual DOM em React.
— Estamos considerando a abordagem dos componentes e os métodos de transferência de dados.

Conhecido
1. Abertura do curso (05:41)

Eu reajo.js
1. O que é reagir (07:05)
2. DOM virtual (02:46)
3. JSX (06:10)
4. Renderizando com condições (05:11)
5. Trabalhando com listas (02:45)
6. Componentes (02:41)
7. Adereços (01:45)
8. Estadual (06:45)
9. Eventos (02:26)
10. Reagir Devtools (03:58)

IIReagir.js
1. Métodos de ciclo de vida (05:19)
2. Componentes - funções (01:29)
3. Componente Puro (02:54)
4. Eventos Sintéticos (01:42)
5. Trabalhando com formulários (02:51)
6. Tratamento de erros (01:39)

Análise das tarefas #1
1. Oficina #1 (30:36)

Semana 2 – Padrões React.js, testes

— Estudamos componentes, elementos e instâncias da classe de componentes.
— Consideramos a biblioteca Recompose, componentes de alta ordem e padrões Render Props.
— Entendemos as vantagens dos testes, estudamos Jest, Enzyme, Snapshots.

III Reagir
1. Introdução (01:43)
2. PropTypes (10:18)
3. Contexto (05:19)
4. Referências (05:18)
5. Portais (05:02)
6. Ganchos (10:42)

IV React.js
1. Componentes de ordem superior (HOCs) - Componentes de ordem superior (10:33)
2. Encaminhamento de referência (HOCs) (04:31)
3. Padrão de adereços de renderização (05:25)
4. Recomposição da biblioteca HOK (10:32)
5. Perfil (04:02)

Teste
1. Introdução (05:06)
2. Corredor de teste (02:51)
3. Teste DSL (08:41)
4. Enzima (06:57)
5. Instantâneos (03:09)
6. Testando sagas (05:01)
7. Biblioteca de testes React (06:32)

Análise das tarefas #2
1. Oficina #2 (27:54)

Semana 3 - Redux, roteamento

— Estudamos roteamento: roteamento simples, roteamento com Switch, bem como roteamento aninhado.
— Conhecendo a biblioteca Redux: conceitos básicos e conceitos de Store, Actions, Redutores, React-redux.
— Middleware é considerado uma forma de trabalhar com Sideeffect.

Roteamento no navegador
1. API de histórico (02:48)
2. Roteamento simples (05:39)
3. Roteamento do switch (04:16)
4. Roteamento aninhado (05:32)
5. Rota privada (04:39)

Eu redux
1. Introdução (04:07)
2. Loja (05:03)
3. Ações (02:17)
4. Redutores (07:56)
5. Reagir-redux (03:26)

II Redux
1. Introdução (03:11)
2. CreateActions (ações redux) (09:13)
3. Middleware (07:54)
4. Lidar com ações (05:52)
5. Seletores (06:17)
6. Selecionar novamente (04:49)
7. Patos (06:56)

Análise das tarefas #3
1. Oficina #3 (39:13)

Semana 4 - Saga Redux

— Estamos estudando a biblioteca da saga Redux. Repita as funções do gerador*. Vamos aprender como executá-los em paralelo.
— Vejamos o método Take. Vamos estudar o select como forma de obter dados da Store.
— Estamos procurando maneiras de estilizar um aplicativo React. Estudamos as bibliotecas ClassNames, StyledComponents, BrowserList, MaterialUI.

Eu Redux-saga
1. Introdução (00:57)
2. Visão geral (02:08)
3. Geradores (04:11)
4. Adicionando sagas (02:07)
5. Reaja às ações (03:53)
6. Lançamentos de recursos (02:06)

II Redux-saga
1. Introdução (00:27)
2. Executando efeitos em paralelo (03:41)
3. Faça efeito (02:45)
4. Selecione o efeito (02:04)
5. Cancelar efeitos (04:05)

Trabalhando com estilos
1. Introdução (01:34)
2. Estilos CRA (05:21)
3. Nomes das turmas (06:32)
4. Componentes estilizados (07:11)
5. Lista de navegadores (01:37)
6. IU de materiais (08:13)

Análise das tarefas #4
1. Oficina #4 (09:55)

Semana 5 – Formulários, CI e DI e tratamento de erros do cliente

— Consideramos trabalhar com formulários usando as bibliotecas Formik, Redux Forms, React Final Form.
— Estamos considerando métodos para garantir a qualidade do código de produção. Analisamos ferramentas como: Husky, TravisCI, HerokuNow.
— Estamos estudando um conjunto de bibliotecas úteis para desenvolvimento (Storybook, RamdaJS, Axios).
— Estamos considerando o TypeScript.

Trabalhando com Formulários
1. Introdução (05:07)
2. Formik (08:51)
3. Formulário redux (06:22)
4. Forma final do React (06:36)

Tratamento de erros de CI, DI e cliente
1. Introdução (05:07)
2. Husky (02:32)
3. CI usando TravisCI (03:32)
4. Implantar no heroku (04:57)
5. Barra de rolagem (02:00)

Um conjunto de bibliotecas úteis para desenvolvimento
1. Livro de histórias (05:32)
2. RamdaJS (04:47)
3. Eixos (05:52)
4. Texto datilografado (09:31)

Análise das tarefas #5
1. Oficina #5 (13:17)

Semana 6 - Trabalho de projeto

— Concluímos o requerimento e o enviamos para análise.

Como conseguir um emprego em TI: dicas e truques
1. Como conseguir um emprego em TI? Pesquisa, entrevista e período probatório (42:21)
2. Como encontrar trabalhos remotos e pedidos freelance? (20:12)
3. Primeiro emprego em TI – como se comportar? Estágios, emprego oficial e trabalho “por comida” (14:11)
4. Como passar o período probatório? (27:10)
5. Como se preparar para uma entrevista em uma empresa FAANG (08:52)
6. O processo de carregamento de uma página da web (25:19)
7. Entrevista com programador – tudo o que você precisa saber (01:24:07)
8. Resolvendo um problema em uma entrevista com um programador (19:36)
9. Entrevista com desenvolvedor front-end (01:37:17)