Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Online Business Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
IT & Software Other IT & Software React

React Profissional

Torne-se um profissional em React e todo seu ecossistema.
Highest Rated
Rating: 4.7 out of 54.7 (424 ratings)
1,654 students
Created by Bruno Nardini
Last updated 9/2020
Portuguese
Portuguese [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Conhecimento para definir a melhorar arquitetura para projetos React, com ou sem Redux.
  • Domínio para implementar o React em projetos já existentes.
  • Terá uma base sólida para fazer entrevistas de emprego e para discutir com colegas de trabalho sobre projetos afins.

Requirements

  • Conhecimento básico de programação
  • Conhecimento básico de HTML e CSS
  • Conhecimento básico de Javascript

Description

Se seu objetivo é usar o React em grandes empresas e colocar grandes projetos online para milhares de usuários, então por que não aprender com quem já fez isso?

Além da teoria, neste curso estou passando toda minha experiência, mostro passo a passo todas as decisões que eu tomaria ao criar um projeto, do início ao fim. É como se você tivesse sentado ao meu lado desenvolvendo em uma grande empresa, e você pode discutir cada decisão comigo no fórum do curso.

A primeira parte do curso irá apresentar o React na sua forma mais simples. Albert Einstein disse "Tudo deveria se tornar o mais simples possível, mas não simplificado.", seguindo essa filosofia, é feito uma introdução aos conceitos e os primeiros passos de como usá-lo.

No segundo módulo passamos a criar um projeto do ínicio. Você vai me acompanhar em cada decisão do projeto, desde as pequenas até as grandes. Cada passo do desenvolvimento foi pensado e projetado para lhe passar o máximo de conhecimento, para que você possa tomar suas próprias decisões quando estiver em um projeto por conta própria, ou até mesmo em uma entrevista de emprego.

No terceiro módulo continuamos com o projeto explorando novos desafios e conceitos. No final você irá poder publicar o app criado em uma hospedagem grátis para poder usar e compartilhar com quem quiser.


Who this course is for:

  • Iniciantes em desenvolvimento web
  • Programadores que não conhece React
  • Quem já conhece React e quer aprimorar suas habilidades

Course content

9 sections • 284 lectures • 27h 9m total length

  • Preview09:55
  • Preview06:39
  • Preview01:58
  • Recomendações
    00:41
  • Editor de códigos
    03:32
  • Extensões
    01:18
  • Primeiros passos
    09:44
  • Componentes React
    03:07
  • Arrow functions
    03:15
  • Funções JavaScript
    02:21
  • Explicação detalhada do estado - parte 1
    14:49
  • Explicação detalhada do estado - parte 2
    05:01
  • Explicação detalhada do estado - parte 3
    04:15
  • Usando o Estado no projeto
    06:20
  • Propriedades (props)
    06:35
  • Array de elementos
    03:51
  • React Developer Tools
    04:19
  • Fluxo de dados unidirecional
    04:37
  • Renderização
    01:24
  • Novos botões
    04:38
  • Operadores
    07:53
  • Limpar e deletar
    02:45
  • Componente controlado e não controlado
    06:23
  • Tratando o estado através de um evento
    04:51
  • Eventos
    05:33
  • Estado de erro
    07:42
  • Efeito colateral - sideEffect()
    13:33
  • React Hooks
    06:25
  • Regras dos Hooks
    01:31
  • Teclas avançadas
    06:16
  • Concorrência
    05:25
  • Histórico
    04:50
  • Exibição do histórico
    09:38
  • Limpar tudo
    01:55
  • Voltar no histórico
    03:43
  • Barra de rolagem
    07:31
  • Conclusão do projeto
    02:25

  • Teste prático 1 - Olá mundo!
    1 question
  • Resolução teste prático 1
    02:16
  • Teste prático 2 - Contador
    1 question
  • Resolução teste prático 2
    03:44
  • Teste prático 3 - Título da página
    1 question
  • Resolução teste prático 3
    08:14
  • Teste teórico - Conceitos básico
    6 questions

  • Fundamentos - Introdução
    03:33
  • Processo de desenvolvimento
    04:54
  • Primeira entrega, protótipo
    05:03
  • Node.js
    03:23
  • Instalação passo a passo
    01:32
  • Criando o projeto
    13:42
  • Storybook
    07:48
  • Formatadores
    09:23
  • Hero
    07:37
  • Composição de componentes
    05:25
  • Mudando a fonte
    04:39
  • Styled Components
    06:27
  • Imagens
    07:10
  • Estilos globais
    10:00
  • Margens
    08:39
  • Media Queries
    06:35
  • Testando em diferentes tamanhos de telas
    06:10
  • Tipagem com PropTypes
    09:48
  • Adicionando a cor padrão
    08:58
  • Compound Components
    09:20
  • Construção de títulos
    12:28
  • Componente Heading
    05:38
  • Documentação do Heading
    05:49
  • Organização da documentação
    07:27
  • Storybook groups
    01:34
  • Storybook Knobs
    05:56
  • Diretório de estilos
    04:36
  • Ajuste no Storybook para o MDX
    00:32
  • Storybook com MDX
    12:58
  • Tipografia
    09:49
  • Criando um teste de unidade
    11:21
  • Teste da imagem do Hero
    04:46
  • Test Coverage
    04:13
  • Snapshot Testing
    07:58
  • Testando arquivos de estilos
    12:20
  • Revisão
    08:53
  • GitHub
    12:16
  • React Helmet
    09:09
  • Atualização das dependências
    10:51
  • Criando um botão personalizado
    09:05
  • Usando um tema
    06:10
  • Definindo o tema globalmente
    04:08
  • Melhor definição das cores
    04:40
  • Repassando as cores para o componente
    08:08
  • Definindo o comportamento do componente
    08:16
  • Variante Outlined
    09:25
  • Variante Link
    03:32
  • Test Provider
    11:32
  • Testando o evento de click
    04:11
  • Testando as diferentes propriedades
    14:07
  • Revisão
    05:12
  • Diferentes temas
    08:44
  • Ajuste na cor do texto
    02:07
  • Repassando o tema para todos os componentes
    08:21

  • Design System
    10:00
  • Atomic Design
    11:25
  • Por que mudamos de opinião?
    02:37
  • Code snippet
    11:38
  • Feature component
    02:01
  • Feature story
    10:17
  • Adicionando ícones
    02:01
  • Definindo o estilo
    04:37
  • Estilo do ícone
    08:27
  • Grid
    04:25
  • Construindo a Grid
    11:11
  • Títulos do mesmo tamanho
    05:15
  • Testes para o componente e seu snippet
    06:09
  • Testando a grid
    09:29
  • Revisão
    01:26
  • Transferindo os componentes para o App
    11:33
  • Atomic Page
    07:52
  • Container
    05:31
  • Seção da página
    04:37
  • Teste da página
    08:44
  • Revisão
    01:34
  • Seção invertida
    05:41
  • Sobre
    09:00
  • Rodapé
    07:35
  • Itens do rodapé
    11:49
  • Revisão
    01:07
  • Componente Card
    08:06
  • Card Body
    03:56
  • Card Media
    04:59
  • Propriedades de múltiplos componentes
    02:45
  • Organização de múltiplos componentes
    04:35
  • Construção do ProductGrid
    07:27
  • Documentação do ProductGrid
    06:14
  • Definindo a imagem
    01:52
  • Definindo o comportamento do componente
    07:17
  • Teste de exibição do componente
    06:29
  • Otimizando os casos de testes
    02:33
  • Testando a exibição de toda a lista
    07:07
  • Adicionando a lista de serviços na página inicial
    03:17
  • Revisão
    01:25
  • Ajuste nas bordas
    01:53
  • Componente controlado e não controlado
    10:05
  • Accordion
    08:45
  • Refinando o estilo do Accordion
    02:17
  • Definindo o componente como não controlado
    03:27
  • Espaçamento entre os itens
    04:03
  • AccordionGroup
    04:56
  • Definindo o componente como controlado
    04:40
  • Mapeando e clonando os elementos React
    03:58
  • Controlando o estado pelo grupo
    06:55
  • Atualizando a página
    02:14
  • Definindo os primeiros testes
    04:52
  • Testando o evento onChange
    04:14
  • Testando o comportamento de forma controlada
    07:05
  • Concluindo os testes do Accordion
    05:03
  • Agrupando os componentes comum em um diretório
    07:17
  • Testando o AccordionGroup
    03:36
  • Completando a cobertura
    08:47
  • Revisão
    01:48

  • Introdução
    06:00
  • Back-end e Servidor HTTP
    03:37
  • CDN
    06:12
  • JAMstack
    04:07
  • Build
    06:07
  • Limpeza do build local
    01:33
  • Colocando no ar nossa aplicação
    09:36
  • Mais sobre o deploy
    02:02
  • Desafio prático
    01:36
  • Publicação do Design System
    07:01
  • Build do Storybook
    03:31
  • Deploy do Storybook
    04:29
  • Chromatic
    05:05
  • Configuração
    03:42

  • Introdução
    04:13
  • Fluxo de trabalho
    06:18
  • Solicitação de integração
    04:05
  • Fluxos de erro
    03:56
  • Novas extensões
    02:38
  • Nova branch
    02:08
  • Atualização do Storybook
    09:47
  • Push da nova branch
    02:33
  • Atualização do React
    05:22
  • Ajustes na configuração do Storybook
    03:02
  • Primeira alteração: vídeo autoplay
    02:35
  • Segunda alteração: espaçamento horizontal
    03:40
  • Terceira alteração: ajustes no card
    03:44
  • Quarta alteração: espaçamento vertical
    02:19
  • Registrando as alterações
    01:37
  • Pull Request
    06:34
  • Revisão visual dos componentes
    05:46
  • Merge
    05:31
  • Entrega concluída
    01:31
  • Atualizando repositório local
    02:04
  • Tag e Release
    04:04

  • Introdução
    05:11
  • Nova branch e atualização do README.md
    03:05
  • CircleCI
    04:24
  • Configuração do CircleCI
    07:00
  • Novo Pull Request
    02:01
  • Status Badge
    03:41
  • Conclusão do primeiro passo
    06:15
  • Análise estática
    07:56
  • Testes na Integração Contínua
    02:53
  • Cobertura do código na Integração Contínua
    04:11
  • Configuração do Codecov
    05:44
  • Merge
    02:51
  • Atualizando a branch principal
    00:35
  • Parte 2
    06:14
  • Adiciona a validação da versão
    05:33
  • Novo Pull Request
    03:04
  • Versão alterada com sucesso
    01:36
  • Publicação automática para o Chromatic
    08:21
  • Descrição detalhada das etapas
    04:12
  • Conclusão
    02:22

  • Novas páginas
    03:29
  • Nova branch
    01:30
  • Construindo a página Sobre
    06:22
  • Formatação do texto
    01:43
  • Ilustrações
    02:15
  • Utilizando SVG
    04:51
  • Uso avançado do SVG
    08:58
  • Acessibilidade para o SVG inline
    02:42
  • Restante da estrutura da página
    03:46
  • Grid dos instrutores
    08:45
  • Incluindo a grid na página com os dados
    06:05
  • Terminando a página
    02:53
  • Componente Callout
    06:21
  • Single React Component Snippet
    05:15
  • CalloutBody e CalloutAction
    04:46
  • CalloutMedia
    06:17
  • Escondendo a imagem em telas menores
    02:02
  • Página de detalhe do serviço
    06:36
  • Lista de documentos
    06:47
  • Revisão
    01:47
  • Biblioteca de rotas
    04:54
  • Primeiras rotas
    05:05
  • Links
    04:30
  • Button Link
    03:28
  • Ajustes no estilo do botão para o link
    07:31
  • Ajuste no hover
    01:49
  • Definindo a rolagem para cima
    04:02
  • Construindo o BreadCrumb
    05:48
  • Particularidades de um componente com link
    09:21
  • BreadCrumb na página
    01:29
  • Adicionando a rota de serviço
    04:29
  • Custom Hook
    03:58
  • Finalizando a página do serviço
    02:39
  • Revisão e Pull Request
    04:49
  • Ajustes dos testes para a rota
    03:59
  • Cobertura do código
    05:40
  • Teste de Fumaça
    06:37
  • Retornando para 100% de cobertura
    04:48
  • Fechamento da primeira parte
    06:08
  • Segunda parte
    03:58
  • Componente de rotas
    09:35
  • Revisão
    01:11
  • Rotas dinâmicas
    05:04
  • ProductType
    05:11
  • Product Custom Hook
    10:13
  • Revisão
    02:08
  • Construção do builder para o Storybook
    06:06
  • Dados falsos
    05:38
  • Fixtures
    07:34
  • Variando entre dados estáticos e dinâmicos
    06:41
  • Utilizando os dados falsos
    07:18
  • Página de erro
    08:34
  • Página não encontrada
    07:29
  • Serviço não encontrado
    06:02
  • Revisão
    00:59
  • Correção dos testes
    06:29
  • Usando Mock Function em um Hook
    06:26
  • Testes para o Custom Hook
    06:08
  • Teste da página de erro
    02:53
  • Conclusão
    06:58
  • Continua...
    04:05

  • Novo projeto
    08:54
  • Material UI
    07:11
  • Uma nova forma de definir os estilos
    17:33
  • Definição da carta
    13:38
  • Definindo o primeiro estado
    03:24
  • Redux
    03:34
  • Criando a store
    12:11
  • Redux DevTools
    08:28
  • Lista de cartas
    05:38
  • Definindo o match
    06:45
  • Redux Saga
    18:07
  • Organizando o Redux em arquivos
    10:42
  • List Builder
    05:10
  • Embaralhando as cartas
    03:12
  • Vitória!
    12:06

Instructor

Bruno Nardini
Fundador do Nardini Academy
Bruno Nardini
  • 4.7 Instructor Rating
  • 424 Reviews
  • 2,027 Students
  • 1 Course

  Sou bacharel em Ciências da Computação, pós-graduado em Gerenciamento de Projetos, certificado em ITIL, CobIT, Lean Kanban e Scrum Master (CSM). Tenho mais de 15 anos de experiência com desenvolvimento de software em diversas empresas. 

  Satisfeito por trabalhar na minha área de interesse busco me manter ativo na comunidade com projetos, eventos, grupos de discussões e redes sociais. Interagindo com colegas de profissão e iniciantes nestes ambientes, percebi a dificuldade que existe em se destacar no mercado de trabalho, assim como eu mesmo tive no começo da minha carreira. Então fundei a Nardini Academy, para ajudar a você se destacar com as melhores práticas de desenvolvimento de software. 

  A Nardini Academy possui a missão de levar ensino de tecnologia de qualidade para todos, a fim de ajudá-los a alcançar seus sonhos e mudar o mundo. 

  Os alunos são os responsáveis pela evolução desta academia, pois é através de seus feedbacks que o conteúdo é melhorado, e é essa troca de experiência que mantém a excelência dos cursos. 

  Diferente de outros cursos, a Nardini Academy foca na realidade das melhores empresas da área, no que é mais atual e o que entrega mais resultados. Assim, todo material é preparado com a ajuda de profissionais em destaque dessas empresas, para que você adquira conhecimento necessário para fazer parte deste seleto grupo. 

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.