Curso React.js Ninja - React Completo
4.9 (39 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
158 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Curso React.js Ninja - React Completo to your Wishlist.

Add to Wishlist

Curso React.js Ninja - React Completo

O curso para se tornar um ninja em React.js, e todas as ferramentas do seu ecossistema!
4.9 (39 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
158 students enrolled
Created by Fernando Daciuk
Last updated 8/2017
Portuguese
Price: $200
30-Day Money-Back Guarantee
Includes:
  • 37.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Criar aplicações utilizando o React.js de forma correta
  • Configurar seu ambiente de desenvolvimento e produção
  • Usar conceitos de programação funcional em suas aplicações
  • Aplicar testes de vários tipos em suas aplicações
  • Criar aplicações com rotas, estados isolado e pré-renderização no lado do servidor
View Curriculum
Requirements
  • Você precisa ter uma noção básica de JavaScript
Description

Esse curso está em pré-venda, e pode ter um bom desconto! Entre em contato para entender como funciona, ou acesse o repositório do curso, no GitHub, em /da2k/curso-reactjs-ninja =)

---

O Curso React.js Ninja é para aqueles desenvolvedores que querem crescer como programadores na área de desenvolvimento web. Nesse curso será abordado não só sobre a lib React.js em si, mas todas as ferramentas e técnicas do ecossistema ao seu redor: redux, react-router, Server Side Rendering, programação funcional, testes, etc.

O curso está em andamento, e está sendo separado por módulos. Para acompanhar a ementa de cada módulo, e todos os códigos utilizados, acesso o repositório do curso, entrando no GitHub, e acessando /da2k/curso-reactjs-ninja.

Who is the target audience?
  • Desenvolvedores com conhecimento básico em JavaScript que queiram entender sobre React.js e todo o seu ecossistema.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
221 Lectures
37:29:24
+
Módulo #01 - Parte 1
6 Lectures 49:53


M1#A03 - Começando a trabalhar com React
11:23

M1#A04 - Criando elementos aninhados
04:33

M1#A05 - Conhecendo o JSX
09:52

M1#A06 - Aninhando com JSX e criando componentes
10:54
+
Módulo React + Webpack
10 Lectures 01:22:16
MRW#01 - Apresentando minhas configurações de ambiente e o Webpack
03:20

MRW#02 - Configuração básica do Webpack
07:58

MRW#03 - Usando o server do Webpack
05:00

MRW#04 - Modularizando a aplicação
03:50

MRW#05 - Criando uma aplicação em React
08:28

MRW#06 - Usando o sistema de módulos do ES6/2015
14:39

#07 - Configurando JSX no babel e sourcemaps no Webpack
06:52

#08 - Configurando nossa aplicação para usar o React hot loader
11:12

#09 - Colocando o hot loader para funcionar
12:42

#10 - Configurando a ferramenta de lint
08:15
+
Módulo #01 - Parte 2
48 Lectures 07:25:52
M1#A07 - Passando props
04:49

M1#A08 - Atributos do HTML
04:59

M1#A09 - getDefaultProps
05:20

M1#A10 - Passando outros tipos de dados via props
05:32

M1#A11 - Renderizando componentes com funções puras
14:10

M1#A12 - Renderizando componentes com classes do ES6/2015
05:48

M1#A13 - Conhecendo a prop "key"
10:38

M1#A14 - Problemas ao duplicar a "key"
04:10

M1#A15 - Eventos
08:29

M1#A16 - A prop "children"
05:52

M1#A17 - Composição
10:56

M1#A18 - State
08:25

M1#A19 - Entendendo arrow functions
10:46

M1#A20 - Stateful vs stateless
14:33

M1#A21 - Lifecycle dos componentes
05:28

M1#A22 - Lifecycle: fluxo de montagem / desmontagem
16:02

M1#A23 - Lifecycle: fluxo de atualização (componentWillReceiveProps)
04:12

M1#A24 - Lifecycle: fluxo de atualização (shouldComponentUpdate)
08:52

M1#A25 - Lifecycle: fluxo de atualização (componentWillUpdate)
05:31

M1#A26 - Lifecycle: fluxo de atualização (componentDidUpdate)
04:28

M1#A27 - propTypes
10:00

M1#A28 - Introdução à formulários no React
12:55

M1#A29 - Formulários (checkbox e radio)
10:32

M1#A30 - Formulários (select e option)
06:19

M1#A31 - Formulários (textarea)
04:46

M1#A32 - Eventos para componente de formulário
06:06

M1#A33 - setState é assíncrono
06:53

M1#A34 - Conceitos e tipos de componentes com React, criando uma app (GitHub)
04:54

M1#A35 - GitHub app - Criando a marcação da aplicação
10:49

M1#A36 - GitHub app - Separando os componentes
19:03

M1#A37 - GitHub app - Criando o Container Component da aplicação
11:06

M1#A38 - GitHub app - Criando o objeto de estado da aplicação
14:17

M1#A39 - GitHub app - Passando o state via props para o componente UserInfo
07:09

M1#A40 - GitHub app - Fazendo o request dos dados do usuário
07:39

M1#A41 - GitHub app - Refatorando a aplicação e populando os dados do usuário
10:39

M1#A42 - GitHub app - popular dados dos repositórios
10:53

M1#A43 - GitHub app - método para buscar repositórios e favoritos
18:23

M1#A44 - GitHub app - buscar repositórios do usuário pesquisado
11:18

M1#A45 - GitHub app - sobre eventos - desabilitar / habilitar campo de busca
13:28

M1#A46 - GitHub app - loading enquanto estiver buscando os dados
09:16

M1#A47 - GitHub app - organizando as propTypes
05:33

M1#A48 - formas de fazer "bind" do this em eventos
08:51

M1#A49 - Entendendo o spread operator do ES6/2015
13:29

M1#A50 - Trabalhando com libs de terceiros junto com React
12:10

M1#A51 - Um overview sobre testes
07:55

M1#A52 - TDD
14:19

M1#A53 - Testes unitários em componentes
16:03

M1#A54 - Encerramento módulo 1
02:07
+
Módulo #02
141 Lectures 25:26:55
M2#A01 - Introdução
05:32

M2#A02 - Conhecendo o create-react-app
13:00

M2#A03 - Jest (overview)
09:43

M2#A04 - Jest na prática - instalação e configuração
08:36

M2#A05 - Jest na prática - conhecendo as funções para teste e asserção
08:57

M2#A06 - Jest na prática - code coverage
14:06

M2#A07 - Jest na prática - Integração com ES6/2015
06:59

M2#A08 - Jest na prática - watch interativo
11:45

M2#A09 - TDD - Assertion tools e desafio método map
12:48

M2#A10 - TDD - método map
27:47

M2#A11 - TDD - aprendendo recursão
11:23

M2#A12 - TDD - map recursivo
12:25

M2#A13 - TDD - map recursivo - parte 2
16:45

M2#A14 - TDD - filter
20:41

M2#A15 - TDD - filter recursivo
09:43

M2#A16 - TDD - every
10:55

M2#A17 - TDD - every recursivo
10:20

M2#A18 - TDD - some
09:52

M2#A19 - TDD - some recursivo
05:21

M2#A20 - TDD - reverse
06:48

M2#A21 - TDD - reverse recursivo
14:18

M2#A22 - TDD - reduce
12:35

M2#A23 - TDD - reduce (parte 2)
16:07

M2#A24 - TDD - reduce recursivo
17:19

M2#A25 - TDD - reduceRight
09:30

M2#A26 - TDD - reduceRight recursivo
08:20

M2#A27 - TDD - find
08:57

M2#A28 - TDD - find recursivo
08:43

Link para os objetos de erro que podem ser usados para lançar uma exceção: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Error

M2#A29 - TDD - testando exceções
18:13

M2#A30 - Conhecendo o Storybook
14:09

M2#A31 - Trabalhando com assets: configuração no Webpack
14:34

M2#A32 - Trabalhando com assets: HTML
10:14

M2#A33 - Trabalhando com assets: Exportando CSS em um arquivo
09:27

M2#A34 - Webpack: gerando bundle de produção
11:46

M2#A35 - Webpack Dashboard
04:57

M2#A36 - Trabalhando com assets: Modularizando o CSS
08:22

M2#A37 - Trabalhando com assets: CSS Modules
07:24

M2#A38 - Trabalhando com assets: Critical Rendering Path
10:31

M2#A39 - Trabalhando com assets: Otimizando o Critical Rendering Path
13:37

M2#A40 - Trabalhando com assets: Ajustando ambiente de dev
02:31

M2#A41 - cross-env
04:17

M2#A42 - criando alias no webpack
09:46

M2#A43 - Configurando o Storybook
14:19

M2#A44 - Storybook - escrevendo histórias reais
10:27

M2#A45 - Storybook - extendendo o webpack.config padrão
13:39

M2#A46 - Storybook - localização do arquivo de config, linter e static build
07:33

M2#A47 - Storybook - criando histórias para os outros componentes
12:54

M2#A48 - Paginação - criando o componente
09:58

M2#A49 - Conhecendo o Yarn
04:22

M2#A50 - Paginação - ambiente para testes
06:05

M2#A51 - Paginação - ambiente para testes - linter
09:03

M2#A52 - Paginação - implementação inicial
15:40

M2#A53 - Paginação - implementação - parte 2
10:34

M2#A54 - Paginação - implementação - parte 3
15:50

M2#A55 - Paginação - implementação - parte 4
08:36

M2#A56 - Paginação - implementação - parte 5
16:12

M2#A57 - Paginação - testando as excessões
15:54

M2#A58 - Paginação - storybook
09:43

M2#A59 - Paginação - storybook - parte 2
08:49

M2#A60 - Paginação - storybook - parte 3
10:16

M2#A61 - Paginação - storybook - parte 4
06:46

M2#A62 - Abstraindo configuração padrão do webpack
09:44

M2#A63 - Abstraindo configuração padrão do webpack - parte 2
16:45

M2#A64 - Abstraindo configuração padrão do webpack - parte 3
06:05

M2#A65 - Adicionando paginação na aplicação
06:27

M2#A66 - Colocando a paginação pra funcionar
03:51

M2#A67 - Trocando de página
13:21

M2#A68 - Adicionando parâmetros de paginação para os repositórios
13:27

M2#A69 - Ajustando as proptypes do state para paginação
07:31

M2#A70 - Acertando informações da paginação - página ativa
02:54

M2#A71 - Acertando informações da paginação - total de páginas
19:17

M2#A72 - Webpack - atualizando nosso boilerplate para webpack v2
17:50

M2#A73 - Atualização do Webpack - atualizando as dependências
16:24

M2#A74 - Atualização do Webpack - removendo dependências não utilizadas
04:19

M2#A75 - Atualização do Webpack - atualizar storybook e remover erros
07:59

M2#A76 - Atualização do Webpack - o que o tree shaking e como configurar
11:10

M2#A77 - ES6 - Promises
15:05

M2#A78 - webpack clean plugin
04:53

M2#A79 - ES7 - async / await
08:37

M2#A80 - Adicionando async / await no nosso workflow
11:30

M2#A81 - Ajustando storybook
13:54

M2#A82 - Centralizar paths do webpack no common.js
07:38

M2#A83 - Introdução à code splitting
11:24

M2#A84 - CommonsChunkPlugin
06:36

M2#A85 - CommonsChunkPlugin - opções do plugin
13:42

M2#A86 - import() dinâmico
15:17

M2#A87 - import() dinâmico - e o linter?
07:42

M2#A88 - webpack - file-loader: imagens e outros assets além de CSS
13:24

M2#A89 - webpack - url-loader: imagens e outros assets além de CSS
05:09

M2#A90 - webpack - raw-loader: pegando conteúdo de qualquer tipo de arquivo
03:52

M2#A91 - webpack - adicionando o file-loader e url-loader no nosso boilerplate
11:09

M2#A92 - this.setState() - usando funções fazer atualizações em lote
11:52

M2#A93 - Configuração do preloader do storybook
06:12

M2#A94 - Aplicação: editor de Markdown
14:51

M2#A95 - Aplicação: editor de Markdown - melhorando a estrutura inicial
11:01

M2#A96 - Aplicação: editor de Markdown - renderizando HTML
10:40

M2#A97 - webpack - ajustando loader de CSS para depências externas
03:26

M2#A98 - Aplicação: editor de Markdown - adicionando opção de markdown no editor
05:08

M2#A99 - Aplicação: editor de Markdown - colorindo blocos de código
09:42

M2#A100 - Aplicação: editor de Markdown - como fica em produção?
10:42

M2#A101 - Aplicação: editor de Markdown - analisando bundle de produção
08:25

M2#A102 - Aplicação: editor de Markdown - melhorar bundle de produção
10:08

M2#A103 - Aplicação: editor de Markdown - ordenando os scripts no HTML
16:31

M2#A104 - Aplicação: editor de Markdown - highlight.js assíncrono
08:17

M2#A105 - Aplicação: editor de Markdown - reduzindo o bundle de produção
15:28

M2#A106 - Aplicação: editor de Markdown - servindo arquivos comprimidos com gzip
10:00

M2#A107 - react dev tools - conhecendo a ferramenta
07:23

M2#A108 - Aplicação: editor de Markdown - persistência de dados
10:26

M2#A109 - Aplicação: editor de Markdown - removendo ações do comp. stateless
15:38

M2#A110 - Aplicação: editor de Markdown - salvando automaticamente
09:33

M2#A111 - Aplicação: editor de Markdown - feedback de salvamento automático
11:46

M2#A112 - Aplicação: editor de Markdown - removendo do localStorage
17:08

M2#A113 - Aplicação: editor de Markdown - criar arquivos MD
13:29

M2#A114 - Aplicação: editor de Markdown - oportunidades de melhorias
15:27

M2#A115 - Aplicação: editor de Markdown - storybook do botão
08:06

M2#A116 - Aplicação: editor de Markdown - mais oportunidades de refactory
13:28

M2#A117 - Aplicação: editor de Markdown - atualização do React 15 - 15.5 - 16
11:02

M2#A118 - Aplicação: editor de Markdown - conhecendo a lib strclass
11:20

M2#A119 - Aplicação: editor de Markdown - adicionar novo MD no localStorage
17:08

M2#A120 - Aplicação: editor de Markdown - lista de arquivos MD (componente)
08:48

M2#A121 - Aplicação: editor de Markdown - popular a lista de arquivos MD
11:21

M2#A122 - Aplicação: editor de Markdown - remover arquivos dinamicamente
11:13

M2#A123 - Aplicação: editor de Markdown - editar e adicionar arquivos no state
03:23

M2#A124 - Aplicação: editor de Markdown - adicionar título para arquivos
08:06

M2#A125 - Aplicação: editor de Markdown - remover entradas que não são arquivos
05:07

M2#A126 - Aplicação: editor de Markdown - componente para título do arquivo
06:20

M2#A127 - Aplicação: editor de Markdown - opção para editar título
12:50

M2#A128 - Aplicação: editor de Markdown - usando só uma entrada no localStorage
10:42

M2#A129 - Conhecendo o PureComponent
17:09

M2#A130 - Introdução à context API
13:21

M2#A131 - Context API - Trabalhando com informações dinâmicas
08:33

M2#A132 - Context API - Resolvendo shouldComponentUpdate retornando false
08:15

M2#A133 - Context API - Atualizando context à partir da emissão de eventos
13:54

M2#A134 - Context API - Unsubscribe está funcionando?
09:35

M2#A135 - Higher Order Component (HOC) - Entendendo o que é um HOC
15:38

M2#A136 - Context API - Isolando o context usando HOC
14:57

M2#A137 - Testes - Conhecendo os snapshots
11:39

M2#A138 - Testes - Atualizando Jest no workflow e criando teste de snapshot
14:51

M2#A139 - Aplicação: editor de Markdown - testando componentes
10:06

M2#A140 - Enzyme - Testando lógica em componentes
11:15

Curso Willian Justen - JavaScript com TDD na prática: https://www.sympla.com.br/javascript-com-tdd-na-pratica__146668

M2#A141 - Encerramento módulo #02
02:56
+
Módulo #03
16 Lectures 02:24:28
M3#A01 - Introdução
07:14

M3#A02 - O que é, e para que serve Redux?
01:58

M3#A03 - Conhecendo o Redux - Primeiro princípio
09:19

M3#A04 - Conhecendo o Redux - Segundo princípio
06:55

M3#A05 - Conhecendo o Redux - Terceiro princípio - Funções Puras
04:26

M3#A06 - Conhecendo o Redux - Terceiro princípio - Reducer
04:23

M3#A07 - Primeiro contato com Redux
08:14

M3#A08 - Criando nosso primeiro reducer com testes
11:37

M3#A09 - Adicionando redux na aplicação Contador
11:51

M3#A10 - Colocando o contador pra funcionar
09:20

M3#A11 - Como funciona o createStore()?
13:50

M3#A12 - "Contador" no React
12:05

M3#A13 - "Contador" no React - estado no Redux
10:03

M3#A14 - "Contador" no React - estado no Redux - parte 2
11:23

M3#A15 - "Contador" no React - estado no Redux - parte 3
11:33

M3#A16 - Adicionando mais contadores
10:17
About the Instructor
Fernando Daciuk
4.8 Average rating
185 Reviews
3,048 Students
4 Courses
full-stack developer

Sou desenvolvedor web desde 2002, com foco em frontend desde 2004, principalmente JavaScript. Sou professor de alguns cursos que você pode encontrar no meu blog (endereço no meu perfil): 

- JavaScript Ninja - um curso que fala sobre a linguagem JavaScript em si - para quem nunca programou na vida; 

- Git e GitHub Ninja, para aprender a utilizar essas ferramentas para trabalhar em equipe (ou mesmo sozinho, mas com o entendimento de como é possível versionar seus projetos de forma correta)

- React Ninja, onde abordamos não apenas a biblioteca React.js em si, mas também todo o ecossistema em volta da ferramenta: testes para componentes, gerenciamento de estados, rotas, renderização do lado do servidor, configurações específicas para agilizar o desenvolvimento, e configurações para performar da melhor forma possível quando entregar um projeto com React em produção.