Busca DevMedia
Você está buscando por "javascript" em vídeo aula no canal front-end web
Já conhece nosso Plano de Estudo?
Conheça o passo a passo da Carreira Programador Front-End
- Criando os serviços de consultas e faturamento - Minha Primeira Single Page Application com React - Vídeo 19 Vídeo
Para finalizar o curso, resta apenas criar os serviços que servirão como auxiliares para os componentes Consultas e Faturamento. Neste vídeo criaremos então os arquivos consultas.js e faturamento.js na pasta services.
- Configurando as rotas - Minha Primeira Single Page Application com React - Vídeo 15 Vídeo
Tendo instalado o pacote react-router-dom e adicionando o BrowserRouter no index.js, devemos agora definir onde os componentes serão renderizados quando cada rota for acessada. Isso será feito com usando as classes Switch e Route dentro do App.js.
- Automatizando o LESS com Grunt - O que é LESS? - Vídeo 3 Vídeo
A fim de acelerar o processo de desenvolvimento, veremos nesse vídeo como automatizar a compilação dos arquivos .less usando o Grunt, um task runner também baseado no Node.js.
- Exibindo o menu superior - Minha Primeira Single Page Application com React - Vídeo 5 Vídeo
Tendo criado o menu superior no vídeo passado, veremos agora como importar esse componente dentro do App.js e exibi-lo na página.
- Funções assíncronas no Redux com o thunk - Minha primeira aplicação React com Redux - Vídeo 8 Vídeo
Agora que finalizamos o api.js vamos até as actions para que elas listem os pacotes vindos na requisições. Para isso, instalaremos o middleware do Redux redux-thunk, que permite o uso de funções assíncronas em nossa store de forma fácil.
- Separando o connect do componente - Minha primeira aplicação React com Redux - Vídeo 7 Vídeo
Após conectar nosso componente ao Redux vamos mover o connect do React para o arquivo index.js desse componente, permitindo maior legibilidade do código do projeto. Em seguida construiremos o arquivo que reunirá as funções assíncronas.
- Organizando a Store - Minha primeira aplicação React com Redux - Vídeo 4 Vídeo
Depois de finalizar a modelagem da nossa store no arquivo index.js, podemos mover nossas actions, reducers e a própria store para uma pasta separada. Isso permite uma manutenção mais simples do projeto.
- Instalando o Bootstrap - Minha Primeira Single Page Application com React - Vídeo 3 Vídeo
O Bootstrap é um dos principais frameworks front-end do mercado. Ele tem como dependência a biblioteca jQuery e na versão 4 passou a depender também do Popper.js. Neste vídeo vamos ver como instalá-lo em uma aplicação React.
- Introdução - O que é AJAX? - Vídeo 1 Vídeo
Uma das técnicas essenciais no mundo JavaScript é o AJAX. Com ele podemos criar sites mais eficientes e agradáveis para o usuário, carregando apenas trechos específicos da página, em lugar de carregá-la por completo.
- Definindo classes CSS dinamicamente - Minha Primeira Single Page Application com React - Vídeo 10 Vídeo
Da mesma forma que exibimos dados no HTML por meio de instruções JavaScript, também podemos definir classes CSS dinamicamente. Para isso, veremos como atribuir um valor à propriedade className de acordo com uma expressão condicional.
- Trazendo os dados da view consulta e o Safe Navigation Operator - Minha primeira Single Page Application com Angular - Vídeo 21 Vídeo
Precisamos trazer os dados da API que representa a view consulta, assim como fizemos na view resumo. Veremos uma outra sintaxe do Angular que nos permite acessar um objeto nulo de forma segura, evitando causar um erro no JavaScript.
- Criando a primeira aplicação Vue.js - Como criar sua primeira aplicação com Vue.js - Vídeo 3 Vídeo
Neste vídeo criaremos nossa primeira aplicação utilizando o Vue.js. Além disso, veremos como é seu comportamento e como adicioná-la no nosso template.
- Introdução - O que é Vue.js? - Vídeo 1 Vídeo
O Vue.js é um framework JavaScript utilizado na construção das views de aplicações baseadas em HTML. Seu principal objetivo é permitir a interação uni e bidirecional dos elementos HTML com os dados e métodos definidos via JavaScript.
- Introdução - Como criar sua primeira aplicação com Vue.js - Vídeo 1 Vídeo
Dando início ao nosso curso veremos o que é o Vue.js, qual seu funcionamento e suas principais características. Além disso, veremos a aplicação final do curso em execução.
- Utilizando o Vue.js - O que é Vue.js? - Vídeo 2 Vídeo
A fim de visualizar alguns dos recursos do Vue.js e entender como é simples utilizá-lo em uma página web, neste vídeo veremos um exemplo prático de uso desse framework.
- Criando o HTML da página - Como criar sua primeira aplicação com Vue.js - Vídeo 2 Vídeo
O Vue.js trabalha na parte front-end da nossa aplicação, por isso desenvolveremos o HTML que será utilizado durante nosso curso. Criaremos então a tabela para listagem dos registros e o formulário para a inserção dos mesmos.
- Criando a listagem das tarefas - Como criar sua primeira aplicação com Vue.js - Vídeo 4 Vídeo
Para realizar a listagem dos registros que existem em nosso array de tarefas utilizamos o data-bind do Vue.js. Neste vídeo veremos como declará-lo e seu funcionamento.
- Adicionando novas tarefas - Como criar sua primeira aplicação com Vue.js - Vídeo 6 Vídeo
Agora precisamos capturar os dados digitados através do nosso formulário e inseri-los em nossa listagem de tarefas, o que será visto neste vídeo.
- Removendo tarefas - Como criar sua primeira aplicação com Vue.js - Vídeo 7 Vídeo
Veremos agora como realizar a remoção das tarefas exibidas em nossa tabela e quais diretivas serão utilizadas para esta funcionalidade.
- Configuração do topo - Landing Page: Como criar um layout com HTML, CSS e JavaScript - Vídeo 4 Vídeo
Neste vídeos vamos aprender como redimensionar o tamanho topo, à medida que o scroll da página é acionado.
- Estrutura HTML - Landing Page: Como criar um layout com HTML, CSS e JavaScript - Vídeo 2 Vídeo
Criação de toda estrutura HTML do projeto, divisão do projeto em topo, área de conteúdo e rodapé.
- Alterando o CSS da listagem quando a tarefa estiver pronta - Como criar sua primeira aplicação com Vue.js - Vídeo 8 Vídeo
Finalizando o curso, veremos como personalizar o título de uma tarefa quando marcamos seu status como ‘pronta’. Para isso aplicaremos uma classe CSS ao título quando o atributo ‘pronta’ for verdadeiro.
- Utilizando o v-for para listar todas as tarefas - Como criar sua primeira aplicação com Vue.js - Vídeo 5 Vídeo
Neste vídeo veremos como a diretiva v-for auxilia no processo de automatização da listagem dos nossos registros e a economia de código que obtemos ao utilizar esta diretiva.
- Criação do efeito parallax - Landing Page: Como criar um layout com HTML, CSS e JavaScript - Vídeo 7 Vídeo
Finalizando o nosso projeto vamos realizar a inclusão do script para a animação do efeito parallax, tornando o projeto visualmente mais bonito.
- Navegação entre seções e tooltips - Landing Page: Como criar um layout com HTML, CSS e JavaScript - Vídeo 6 Vídeo
Veremos como deixar a transição do menu mais agradável, fazendo que o conteúdo deslize até a sessão, também criaremos o tooltips, nossos balões de ajuda.