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 AWS Certified Developer - Associate CompTIA Security+
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native 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
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup 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

This course includes:

  • 50 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
Development Web Development App Development

React Avançado: Crie aplicações com NextJS, GraphQL e mais

Aprenda a criar um e-commerce real do zero, indo do backend ao frontend até o deploy para produçao!
Highest Rated
Rating: 4.9 out of 54.9 (741 ratings)
2,009 students
Created by Willian Justen de Vasconcellos, Guilherme Louro
Last updated 1/2021
Portuguese
30-Day Money-Back Guarantee

What you'll learn

  • Boas práticas em ReactJS
  • Boas práticas com Styled Components
  • Boas práticas com Testes
  • Server Side Rendering (SSR)
  • Static Site Generation (SSG)
  • Rotas simples e dinâmicas no NextJS
  • Funcionamento do GraphQL
  • Criar componentes ReactJS do zero
  • Utilizar componentes third-party
  • Utilizar Storybook
  • Criar APIs rapidamente com o Strapi

Course content

32 sections • 331 lectures • 50h 10m total length

  • Preview03:54
  • Preview03:02
  • Preview33:02
  • Introdução ao GraphQL
    17:57
  • Introdução ao GraphQL Clients
    14:25
  • Introdução ao Strapi - Headless CMS
    22:19
  • Introdução ao CSS-in-JS
    13:38
  • Introdução a Testes de Software
    26:24

  • Requisitos para o projeto
    02:43
  • Criando o boilerplate com create-next-app
    10:22
  • Configurando o TypeScript no NextJS
    09:35
  • Configurando o .editorconfig
    02:44
  • Configurando o Eslint
    13:10
  • Configurando o Prettier com o Eslint
    07:25
  • Configurando um git hook com Husky e Lint-Staged
    09:59
  • Instalando e configurando o Jest com TypeScript
    10:29
  • Instalando o React Testing Library e escrevendo primeiros testes
    21:32
  • Usando o findRelatedTests para rodar somente testes necessários
    01:36
  • Instalando o Styled Components e configurando o SSR
    08:25
  • Criando estilos globais com createGlobalStyle
    13:03
  • Criando estilos no primeiro componente
    14:45
  • Melhorando snapshots com Jest-styled-components
    03:44
  • Configurando o Storybook e escrevendo stories
    26:23
  • Migrando Storybook para versão 6.x
    13:11
  • Usando Storybook Essentials e Controls
    16:15
  • Configurando o PWA
    08:53
  • Iniciando um projeto através do nosso boilerplate
    06:38
  • Extra: PR - corrigindo cobertura de testes
    02:08
  • Extra: Servindo estáticos corretamente no build do Storybook
    03:24
  • Extra: Mantendo o boilerplate com atualizado usando Dependabot e Github Actions
    18:13
  • Extra: Automatizando criação de arquivos
    12:40
  • FIX: Corrigindo configuração do jest-styled-components
    04:31
  • FIX: Definindo typings para o jest-styled-components
    04:46

  • Strapi por debaixo dos panos
    12:09
  • Requisitos para o Strapi
    06:34
  • Comandos do PostgreSQL
    09:34
  • Iniciando o Strapi local
    08:02
  • Iniciando o Strapi com Docker (opcional)
    18:41
  • Preview08:17
  • Apresentação do CMS do Strapi
    15:58
  • Arquivos iniciais do Strapi
    12:01
  • Fields do Strapi
    11:53

  • Criando logo e componente de Header
    22:48
  • Criando Section About Project - Rich Text
    04:11
  • Criando Section Tech - Repeatable Component
    06:47
  • Criando Section Concepts
    04:03
  • Criando Section Modules
    03:31
  • Criando Agenda e Pricing Box - reutilizando componente já criado
    06:43
  • Criando Collection Type para Authors
    06:30
  • Adicionando campo faltante em Authors
    00:46
  • Criando relations (has many)
    03:48
  • Criando Section Reviews
    03:01
  • Criando Section FAQ
    03:07
  • Atualizando Strapi para 3.0.6 (se já possuir essa versão ou maior, ignore)
    03:59
  • Adicionando um plugin customizado (CKEditor)
    05:21
  • Importando e Exportando dados no PostgreSQL
    12:18
  • Permissões para rotas de Rest API
    08:28

  • Transformando API em GraphQL
    05:37
  • Criando primeiras queries do GraphQL
    09:14
  • Escrevendo Queries parametrizadas com variáveis
    04:26
  • Utilizando Fragments no GraphQL
    07:13
  • Aliases no GraphQL
    01:20
  • Criando primeira mutation para atualizar dados (updateAuthor)
    09:57
  • Criando mutations parametrizadas
    03:31
  • Criando primeira mutation para criar dados (createAuthor)
    05:19
  • Deletando dados com mutation
    04:20

  • Vendo o código da Landing Page e clonando o projeto
    06:36
  • Criando o GraphQLClient
    05:07
  • Criando a primeira query no Frontend
    04:43
  • Fazendo o fetch dos primeiros dados (Data Fetching - getStaticProps)
    13:58
  • Criando Types para a API e mostrando primeiros dados em tela
    11:20
  • Criando variáveis de ambiente
    10:47
  • Tornando o header dinâmico
    11:10
  • Tornando o SectionAboutProject dinâmico
    10:28
  • Tornando o SectionTech dinâmico
    08:16
  • Tornando o SectionConcepts dinâmico
    05:54
  • Tornando o SectionModules dinâmico
    04:38
  • Tornando o SectionAgenda dinâmico
    03:28
  • Tornando o PricingBox dinâmico
    06:45
  • Tornando o SectionAboutUs dinâmico
    14:58
  • Tornando o SectionReviews dinâmico
    08:42
  • Tornando o SectionFaq dinâmico
    06:07

  • Sobre os serviços utilizados
    04:41
  • Configurando e subindo o projeto no Heroku
    18:36
  • Fazendo dump de local para produção (OPCIONAL)
    14:03
  • Instalando um provider de estáticos (AWS S3)
    13:10
  • Subindo o estático Next para o Netlify
    10:46
  • Criando um webhook para trigger de deploy no Netlify
    16:58

  • Migrando o Strapi da 3.0.x para 3.1.x (a versão com permissões de usuário!)
    07:39
  • Configurando permissões de usuário (Super Admin, Author, Editor)
    14:20
  • Migrando o Strapi para a 3.1.5
    08:24

  • Preview04:19
  • Inicializando o Strapi
    06:25
  • Criando a primeira Collection Type - Categories
    05:47
  • Criando Collection Type - Platforms
    03:01
  • Criando Collection Type - Developers
    01:07
  • Criando Collection Type - Publishers
    00:57
  • Criando Collection Type - Games
    07:25
  • Entendendo e criando Relations - One to Many, Many to Many...
    12:01
  • Configurando o plugin de GraphQL
    01:13
  • Configurando o editor para CKEditor
    05:21

  • Preview01:57
  • Documentação do Strapi sobre Customização
    05:49
  • Customizando a Logo da página de Login/Password/Register
    12:25
  • Editando o favicon
    01:04
  • Removendo ícone de tutoriais
    02:13
  • Mudando a logo do menu esquerdo
    07:29
  • Themes do Strapi e mudando o background color do LeftMenuHeader
    04:36
  • Refatorando o styled component para uma forma mais organizada
    03:40
  • Customizando o background de todo o LeftMenu
    04:50
  • Customizando o LeftMenuLinkSection e identificando elementos com React DevTools
    03:29
  • Customizando o hover dos links do menu
    05:53
  • Customizando o MenuLeftFooter
    04:07
  • Customizando a Home Page
    14:03

Requirements

  • Conhecimento básico de JavaScript
  • Conhecimento básico de React

Description

Esse é um curso em andamento! Leia abaixo sobre todos os detalhes, módulos ou acesse ao site do React Avancado.

Iremos criar um e-commerce de jogos, incluindo toda a parte de pagamentos e área do cliente. Os clientes poderão fazer buscas, filtrar, adicionar ao carrinho e comprar seus jogos favoritos.

Teremos também um CMS completamente customizado para que os administradores possam adicionar produtos, categorias, plataformas, criar promoções, editar partes do site, além de emails automatizados para às vendas de cada produto.

Para criar tudo isso, iremos utilizar ferramentas muito famosas no mercado de trabalho, como ReactJS, Next, Apollo e outras coisas mais. Sempre prezando pela qualidade do código, ou seja, teremos testes em tudo!


---

Introdução e Arquitetura do Projeto

Iremos conhecer a Stack utilizada no curso, tendo explicação de cada uma das escolhas, assim como mostrando os prós e contras de cada uma delas

Iremos construir nosso boilerplate do zero, aprendendo a configurar as ferramentas de qualidade de código, como Eslint, Prettier, Git hooks e TypeScript. Assim como também configurar o Styled Components para funcionar com SSR e PWA.


---

Strapi e GraphQL

Vamos iniciar nosso backend/CMS com o Strapi, aprender mais sobre sua API, como o content type builder, single types, custom components. Além de aprender a criar controllers customizados, serviços, instalar plugins de documentação e também do GraphQL, onde iremos aprender como funciona, como criar queries, filtros, mutations e mais.

Para finalizar, aprenderemos como customizar o CMS para que ele tenha a cara da loja e se torne uma solução mais interessante para o cliente.

---
NextJS, Storybook, Testes e Apollo

Essa que será uma das maiores etapas, é onde vamos aprender a pegar um layout diretamente do Figma e vamos transformá-los em diferentes componentes e estilos.

Faremos todos os componentes com styled components, com testes, cenários no Storybook e pensando na responsividade. Com os componentes prontos, construiremos as páginas, ajustando o que for necessário para que tudo se encaixe perfeitamente.

---

Esse será um curso vivo, onde iremos ter lives e discussões a cada módulo. Para que você possa ter autonomia em seus projetos futuros e consiga criar qualquer tipo de projeto com ReactJS.

Who this course is for:

  • Desenvolvedores que desejam ir além de um simples ToDo
  • Desenvolvedores que desejam aprender a criar APIs de forma rápida
  • Desenvolvedores que desejam ter um ecommerce

Instructors

Willian Justen de Vasconcellos
Engenheiro de Software
Willian Justen de Vasconcellos
  • 4.7 Instructor Rating
  • 32,510 Reviews
  • 210,436 Students
  • 8 Courses

Olá, eu sou Willian Justen. Sou Engenheiro de Software com anos experiência, já tendo trabalhado em grandes empresas como Toptal, Globo, HUGE, Queremos/WeDemand entre outras. Sempre focando na qualidade e melhor entrega para o usuário. Escrevo bastante no meu blog, falando sobre SVG, CSS, JS e minhas experiências como desenvolvedor.

Guilherme Louro
Software Engineer
Guilherme Louro
  • 4.9 Instructor Rating
  • 919 Reviews
  • 2,806 Students
  • 2 Courses

Olá, eu sou Guilherme Louro, trabalho como Engenheiro de Software e tenho mais de 10 anos de experiência na área de desenvolvimento. Já tendo trabalhado com Flex, Flash, PHP, Javascript e Python. E hoje, trabalho boa parte do tempo com React, Redux, no Frontend e com Python e Node no Backend, além de várias outras tecnologias atuais.

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