Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Formação programador frontend - ReactJS

Name: Formação programador frontend - ReactJS
Rating: 4.6 (49 reviews)

Material UI, React Bootstrap, Firebase, Styled Components, Hooks e muito mais.

Highest Rated

Created byDaniel Lopes

Last updated 6/2024

Portuguese

What you'll learn

Compreender o universo ReactJS
Fazer deploy da sua aplicação (de forma gratuita)
Trabalhar com Material UI
Trabalhar com React Bootstrap
Trabalhar com Firebase

Coding Exercises

This course includes our updated coding exercises so you can practice your skills as you learn.

Course content

7 sections • 115 lectures • 14h 12m total length

Apresentação curso1:23
Nesse vídeo nós teremos uma apresentação geral do nosso curso.
Convite para formações0:33
Cupom de desconto: SETEMBRODEV

https://www.udemy.com/course/formacao-programador-backend-nodejs/
https://www.udemy.com/course/formacao-programador-frontend-vuejs/

Apresentação1:06
Nessa aula iremos fazer a apresentação de como funcionará o nosso curso, olhe bem e veja o que faremos.
História do Javascript e o que precisamos para o curso2:50
Nessa aula iremos fazer o download da nossa IDE VSCode.
Avaliação da Udemy0:51
Hoje iremos criar o nosso primeiro projeto e termos contato com linguagem de programação, veremos ainda operadores matemáticos.
Instalação Visual Studio Code e o NodeJS6:41
Configurando o Visual Studio Code5:03
Hoje iremos ver sobre declaração de variáveis em JavaScript, também ao final da aula eu deixarei um desafio para ser resolvido e iremos corrigir na próxima aula.
Criando o projeto e aprendendo sobre operadores matemáticos9:42
Strings e Concatenação7:18
Como criar um variável e qual a diferença entre var, const e let11:26
Identifique os tipos de dados na imagem
Como funcionam os números em Javascript?3:06
Nessa aula iremos ver que cada string possui índice, também iremos ver como e o que é concatenar.
Valores booleanos1:54
Nessa aula iremos aprender como armazenar os resultados de comparações em Strings, também iremos ver sobre os tipos de dados booleanos.
Conhecendo os operadores de atribuição, atribuição de adição e atribuição d6:43
Nessa aula iremos aprender a fazer comparações entre Strings e também sobre como 1 representa o True e 0 representa o False.
Operadores de comparação, igual, diferente, estritamente igual, estritament16:57
Nessa aula aprenderemos sobre condicionais If e Else (se e se não), também teremos um desafio e a sua correção.
Operadores lógicos, and, or e not12:33
Nessa aula aprenderemos mais sobre if e else e iniciaremos Else IF e condicionais aninhados.
Resolva os exercícios combinando os operadores lógicos e de true e false
Padrões de nomenclaturas, convenções e o que são variáveis6:48
Aprendendo a verificar se o número é impar ou par.
Diferença entre null e undefined3:12
Nessa aula nós iremos aprender sobre os operadores lógicos AND, OR e NOT, veremos isso de maneira teórica e com aplicações práticas.
Quando eu recebo um NaN, o que é?2:52
Nessa aula nós iremos complementar os estudos sobre true e false.
Bloco de código, estruturas condicionais e escopo de varíaveis14:00
Nessa aula nós iremos aprender sobre os operadores ternários.
Truthy e Falsy o que é?5:18
Nessa aula iremos aprender a estrutura Switch Case.
Conhecendo o operador ternário4:19
Nessa aula nós iremos começar a ver sobre estruturas de repetição, iniciante com a while.
Aprendendo a trabalhar com Switch case4:32
Nessa aula iremos aprender sobre a estrutura de repetição chamada FOR.
Estrutura de repetição (loops) While7:25
Nessa aula nós iremos trabalhar com um for aninhado (ou matriz)
Estrutura de repetição (loops) Do While4:55
Nessa aula aprenderemos as estruturas de funções com e sem parâmetros.
Estrutura de repetição (loops) For3:35
Nessa aula deixaremos de saber apenas as funções void, mas, saberemos a partir dessa aula como utilizar o return.
Estruturas de Repetição (Loop) For Of3:48
Nessa aula aprenderemos a utilizar a combinação de funções, determinando resultados de uma função com o retorno de outra função, parece complexo, mas na verdade é bem simples, acompanhe a aula.
O que são loops?
O que são funções? Como usar com parâmetro e sem parâmetro6:36
Nessa aula nós iremos aprender sobre escopo e acesso a variáveis, são conceitos importantíssimos para a sequência da nossa carreira na programação.
Funções utilizando o Return7:45
Nessa aula nós iremos aprender a criar e percorrer todos os itens de um array em Javascript.
Criando e Percorrendo um Array5:52
Aqui aprenderemos a funcionalidade do Método Push em um array.
Conhecendo a propriedade length e as funções push e pop4:30
Aqui aprenderemos a funcionalidade do Método Pop em um array.
Métodos Reverse, Foreach e Map5:45
Nessa aula nós iremos ver um método extremamente importante na manipulação de arrays, o splice.
Como usar os métodos Find e FindIndex3:19
Aqui abordaremos o famoso Reverse.
Conhecendo o método Filter3:21
Nessa aula veremos o método abordado será o ForEach.
Método filter
Trabalhando e entendendo o Método Splice do Array2:20
Nessa aula abordaremos dois métodos, o MAP que permite que façamos alterações em nossos registro e o ToUpperCase que permite que deixemos o texto em caixa alta.
O que são Objetos e como criá-los?7:16
Última Aula de Arrays - Veremos Matrizes ou Seja Arrays de Arrays
Mesclando o uso de arrays com objetos4:26
Nessa aula nós daremos início nos objetos, aqui usarei um sabre de luz como instrumento de estudo.
Assincronismo com fetch api7:18
Nessa aula nós daremos sequencia no estudo de Objetos, e aqui trago dois bonecos de super herói (Homem de Ferro e Lanterna Verde) para exemplificar o uso de objetos.
O que é o ES6 e principais mudanças e usando o rest parameters6:36
Nessa aula nós iremos aprender mais sobre objetos e seus atributos, utilizaremos os animais como instrumento de estudo.
Arrow functions e hosting3:49
Desestruturação de arrays e objetos5:18
Spread operator4:14
Prática
Trabalhando com async await3:04
Trabalhando com try catch e finally4:46
Mais detalhes sobre try catch e finally1:00
Parabéns!!!! Você terminou o curso e está pronto para por tudo em prática!1:27

Apresentação1:29
Mostrando o funcionamento do jogo1:57
Mostrando o código do projeto1:38
Configurando o setup do visual studio code7:18
Explicando um pouco sobre html, tags e também estilizações12:33
Configurando a imagem de reset do jogo14:40
Colocando a imagem de fundo do nosso jogo10:39
Finalizando as estilizações dos personagens5:34
Recuperando os elementos na tela e vinculando com o Javascript10:19
Movimentando o Ash pela grama13:23
Ativando e desativando o som do game6:11
Encontrando os pokemons na grama7:24
Fazendo os pokemons nos seguirem7:06
Criando a funcionalidade de game over8:48
Criando a funcionalidade de ganhar o jogo3:26

O que é ReactJS? Breve introdução12:15
Nessa aula nós teremos uma breve introdução sobre o que é o ReactJS, aqui nós veremos a descrição e acompanharemos o início da documentação.
Avaliação Udemy0:53
O que é Material UI? Apresentação do Framework13:27
Nessa aula eu irei apresentar a você o nosso querido Material UI, onde nós poderemos estilizar os nossos projetos de maneira fácil e profissional.
O que é o Firebase? Apresentação do Framework (Será usado no futuro do curso)11:31
Nessa aula eu irei apresentar a vocês o poderoso Firebase, com ele nós poderemos criar aplicações sem a necessidade de criar um backend.
Instalação do Nodejs + NPM + Yarn + Create React App10:49
Nesse ponto nós iremos fazer a instalação do NodeJS, NPM, Yarn e o Create React APP que serão usadas no curso.
Instalando VS Code e extensões13:32
Nessa aula nós iremos instalar o VSCODE e as extensões dele.
Criando o primeiro projeto com Create React App8:35
Vamos criar o nosso primeiro projeto com o create react app?
Nessa aula nós iremos criar e limpar arquivos desnecessários em nosso projeto.
Atenção para a próxima aula0:10
Instalando Material UI e começando a usar7:54
Nessa aula nós iremos instalar e começar a usar o famoso Material UI.
Introdução Téorica sobre components (Entendendo finalmente components)13:06
Nessa aula nós iremos entender a parte teórica sobre components e criaremos o nosso primeiro.
Criando o component Cards4:47
Nessa aula nós iremos criar o component Cards.
Conhecendo as famosas PROPS7:28
Nessa aula nós iremos utilizar PROPS em nosso projeto.
Populando component Cards com dados dinâmicos5:00
Vamos popular os nossos components de cards? Então vamos lá!
Criando o component Footer8:17
Nessa aula nós iremos criar o nosso component Footer.
Subindo o projeto para o Github12:04
Nessa aula nós iremos subir o nosso projeto para o Github.

Apresentação3:18
Nessa aula nós iremos fazer a apresentação do projeto que será desenvolvido ao longo do curso.
Instalações VsCode + Node + NPM + Yarn e Create React APP5:55
Nessa aula nós iremos preparar o nosso ambiente, instalações diversas e personalizações.
Personalizando VsCode (Extensões e Settings.json)7:11
Nessa aula nós iremos personalizar o seu vscode, para que fique igual ao meu.
Criando Projeto no Firebase + Configurando Hosting + Build + Deploy7:05
Nessa aula nós iremos criar o projeto no firebase, fazer o nosso build e deploy pela primeira vez.
Nessa aula nós iremos enviar o nosso projeto pela primeira vez ao Github2:46
Nessa aula nós iremos aprender a fazer o build do projeto e também o deploy no firebase, assim o nosso projeto ficará on-line.
Instalação Eslint + Prettier7:30
Nessa aula nós iremos configurar duas importantes ferramentas, o eslint e prettier, assim ganharemos agilidade no nosso projeto.
Configurando React Bootstrap (para nossas estilizações)2:42
Aqui nós iremos configurar o nosso projeto para receber o react bootstrap, com o react bootstrap nossos esforços para desenvolver uma aplicação será reduzidos.
Configurando o Cloud Firebase e criando a nossa primeira página8:30
Nessa aula nós iremos configurar o Cloud Firestore para armazenar a lista de nossos seriados e também criaremos a nossa primeira página (Main).
Estilização da Página Main11:36
Nessa aula nós iremos fazer uma estilização prévia para nossa página Main.
Explicações sobre o conceito de COMPONENTIZAÇÃO5:48
Nessa aula nós faremos uma introdução teórica sobre o conceito de componentização.
Criando o nosso primeiro component: <Header/>6:38
Nessa aula nós iremos criar o nosso primeiro componente.
Correção alinhamento botão <Header/>1:44
Aqui iremos corrigir o bug do alinhamento.
Criando filmes no firebase (de forma manual)8:39
Nessa aula nós iremos inserir alguns filmes no firebase (de forma manual).
Mudando Main Class Component => funcional component - Parte 112:53
Nessa aula nós iremos fazer um refactor do nosso código, vamos tirar a nossa Main do modelo de classes e levaremos para o modelo de component funcionais.
Continuando o nosso refactor - Criando nosso arquivo de styles6:37
Nessa aula nós iremos continuar a nossa refatoração, assim poderemos aprender esse conceito tão importante.
Refactor no component Header3:03
Nessa breve aula nós iremos deixar o nosso component Header também no formato de component funcional.
Recuperando dados do Firebase7:27
Nessa aula nós iremos aprender a ler dados vindos do firebase, para posteriormente listarmos de forma dinâmica os nossos filmes/séries.
Listando nossos filmes na nossa tela MAIN5:35
Nessa aula, nós iremos fazer a tão esperada listagem de filmes na tela principal da aplicação.
Desenvolvendo nosso arquivo de rotas e a página para assistir aos vídeos8:12
Nessa aula nós iremos aprender a fazer a navegação entre telas no ReactJS, para isso usaremos o React Router Dom, criaremos então o nosso arquivo de rotas.
Criando a nossa página de listar episódios12:56
Nessa aula nós iremos criar a nossa rota para listar episódios, e também começar a desenhar a tela para tal.
Usando history para a passagem de parâmetros10:06
Nessa aula nós iremos aprender um importante conceito, que é a utilização do history para passar parâmetros de um component para outro.
Listando episódios10:55
Nessa aula nós iremos listar os nosso episódios, para podermos então clicar para assistir.
Assistindo um episódio12:54
Nessa aula nós iremos assistir ao nosso primeiro episódio, venha, vai ser muito bacana!
Enviando atualizações para o github (commits, staged and pull req8:22
Nessa aula nós iremos enviar essas nossas atualizações, diretamente para o github.

Criando projeto e instalando extenções3:59
Essa é a primeira aula da nossa série de Styled components, nesse módulo você vai aprender muito sobre css e styled components.
Configurando Eslint e Prettier7:24
Nessa aula nós iremos fazer a configuração do nosso Eslint e Prettier
Removendo arquivos desnecessários2:23
Apagando e removendo arquivos desnecessários do projeto.
Criando o nosso estio global6:47
Nessa aula nós iremos criar o nosso guia de estilos globais, isso é muito importante para todo o desenvolvimento do projeto.
Criando estrutura de pastas0:54
Nessa aula rápida, nós iremos configurar como serão as estruturas de pastas do nosso projeto.
Criando o nosso arquivo de rotas5:39
Nessa aula nós iremos criar as nossas configurações de rotas (navegação) do nosso projeto.
Estilizando nossa tela de Login (Inputs e containers)6:08
Nessa aula nós iremos estilizar a nossa tela de login.
Criando os nossos inputs e buttons9:19
Nessa aula você irá aprender a como criar e customizar inputs e buttons de forma manual.
Adicionando imagens e trabalhando com responsividade7:40
Nessa aula eu irei abordar o conceito e algumas práticas de responsividade.
Criando a nossa primeira animação7:51
Nessa aula nós iremos criar o nosso primeiro KeyFrame.
Tela de login completa + animação4:36
Nessa aula vamos finalizar a nossa tela de login e adicionaremos uma animação também.

Requirements

Conhecimentos básicos em Javascript
Conhecimentos Básicos em HTML + CSS

Description

Formação programador BACKEND

Se você sonha em ser um programador backend, você chegou ao curso certo, pois daqui você sai do total zero e vai até o nível avançado.

Você não sabe programar em Javascript? Não tem problema, dentro da grade temos um curso completo de JavaScript

Aqui você aprenderá com quem atua no mercado (Se quiser saber mais sobre o instrutor, corre lá no LinkedIn)

O que você aprenderá?

Instalar NodeJS
Instalar Yarn
Instalar o CLI do ReactJS
Criar um projeto do zero
Configurar o bootstrap no projeto
Criar um site básico utilizando ReactJS com Bootstrap
Consumir API JSON com ReactJS e muito mais.
Trabalhar com Material UI
Criar um projeto do zero e fazer o Deploy
Ser um programador Frontend COMPLETO

Tudo isso pensado em você, no seu aprendizado.

Quais são os requisitos?

Lógica de Programação
Computador com acesso a internet
Muita vontade de aprender

Qual é o público-alvo?

Pessoas que desejam trabalhar como desenvolvedor backend na stack NodeJS.

Quem é o professor?

Formado em análise e Desenvolvimento de Sistemas pela Faculdade de Tecnologia do Estado de São Paulo, Daniel começou na área de informática ainda muito jovem, passando por diversas áreas de atuação, sendo elas:

- Manutenção de Micromputadores;

- Suporte Técnico para Usuários;

- Manutenção em Redes Sem Fio;

- Programador (Android, PHP, C#, JavaScript, Java, MySQL, SQL Server, React JS, React Native, VueJS, NodeJS e MongoDB).

Atualmente Daniel, trabalha como desenvolvedor de Web fullstack e também como professor de programação na Cubos Academy, além de ter se encantado pela área do ensino a distância, para manter-se atualizado e bem informado Lopes busca as mais diversas capacitações, cursos, livros, treinamentos.

Em 2017 Daniel passou a se dedicar a criação de conteúdos na internet, ao iniciar um canal no Youtube, Lopes recebeu diversas solicitações de criação de cursos com o conteúdo abordado lá, após isso, tem se dedicado em criar apostilas, cursos presenciais e on-line, além de participar de projetos de aceleração de startups.

Ao ver que sua paixão era o ensino, Daniel resolveu então participar de eventos que possibilitam um melhor entendimento na área de inovação tecnológica. Eventos como Startup Weekend e Hackathon, são fundamentais no desenvolvimento pessoal e profissional de todos nós.

Who this course is for:

Programadores Frontend
Pessoas que desejam começar ou se aperfeiçoar em ReactJS

Formação programador frontend - ReactJS

What you'll learn

Explore related topics

Coding Exercises

Course content

Apresentação do curso2 lectures • 2min

Curso de Javascript completo43 lectures • 3hr 56min

Lógica e Manipulação da DOM com Javascript puro15 lectures • 1hr 52min

Introdução ao React15 lectures • 2hr 10min

Criando uma aplicação com ReactJS Movie Now24 lectures • 2hr 58min

Aprendendo Styled Components e um pouco sobre animação11 lectures • 1hr 3min

Vídeos úteis5 lectures • 2hr 12min

Requirements

Description

Who this course is for: