da2k / curso-reactjs-ninja Goto Github PK

@fdaciuk, só uma dúvida meio em OFF ao curso.

O intuito de estar fazendo este curso é que vou precisar desenvolver uma aplicação grande (Painel Administrativo) em breve. E decidi fazer em React !

Estava bem preocupado com a questão de layout, como estou usando JSX, vou me perder um pouco para usar folhas de estilo e tudo mais. Dei uma breve pesquisada e acabei caindo aqui: Material UI. Essa seria uma boa alternativa para desenvolvimento? Pois eu vi que tem bastante coisa legal e "pronta". Gostaria que me falasse mais sobre esses Material Designs do React, o que você recomenda e tudo mais.

Fala @fdaciuk, tudo certo?

Configurei o CSS Modules aqui, seguindo a aula etc. Em ambiente de DEV, deu tudo certo! Porém ao gerar o bundle de produção, ele gera com as classes normais do CSS. Como eu faria para gerar o hashs nas classes em produção também? Ou isso não é uma boa prática?

Fala @fdaciuk, beleza? Estou com um probleminha aqui, que não consigo resolver!

Estou na aula "M1#A43 - GitHub app - método para buscar repositórios e favoritos". Finalizando o request dos repositórios e colocando na tela.

O que está acontecendo é o seguinte:
Quando vou dar um setState({ }) com o retorno da promise, ele não faz nada. Se dou console.log(result) todos os dados estão ali corretos. Não da erro no console nem no devtools do React. Vou deixar o link do meu app.js.

Fico no aguardo e enquanto isso vou tentando resolver, valeu!

https://github.com/gabrielferreiraa/bp_react/blob/master/github-app/src/app.js (line 45)

Professor, sobre o modulo#04 que vai ser sobre o react-router, vai demorar muito pra sair ? porque não é com essa lib que se faz as SPA ?

@fdaciuk

Comecei o curso recentemente e tive alguns problemas relacionado a versões, tanto do próprio React quanto das ferramentas.

Vou começar a app do primeiro módulo, posso usar o create-app do react, ao invés do boilerplate que fizemos no começo do curso?

Professor, na aula o senhor explica como trabalhar com checkbox, mas na parte de radio button a explicação ficou meio rasa, tentei fazer aqui um exemplo de radio button, a ideia é a mesma do checked e tal, mas se houver mais de 2 radio buttons, é preciso de uma abordagem diferente para controlar, o conceito foi intendido mas durante o curso faremos algum componente usando radio buttons ? só pra fixar melhor na pratica ?

@fdaciuk

Boa tarde @fdaciuk

Dúvida, no projeto githubapp eu vi que você criou um styles.css no diretorio dist, mas no webpack.config não tem nenhuma saída pra css.. é isso mesmo? Ele não será sobre escrito ao gerar o bundle?

Valeu!

Você mostrou nessa aula como criar o component Title com função pura.

E ai por curiosidade como aquele módulo era só ES6 ao meu ver poderia remover o import do React, porém quando remove ele fala que React is not defined.

Porque ele dá o erro sendo que não estamos usando nenhuma feature do React dentro do component?

@fdaciuk

Boa tarde @fdaciuk , beleza? Uma dúvida bem rápida. O uso do standard como preLoader, elimina a necessidade de usar ponto e virgula em toda minha aplicação? Pois estou com algumas mensagens de error de semicolon, creio que seja por conta do ponto e vírgula. Existe algum parâmetro para ele ignorar isso? Pois prefiro trabalhar com ponto e vírgula. Ou procuro outro lint? Valeu!

Tem dois tipos de interpolação:

<h1>Olá {this.props.name + ' ' + this.props.lastname}!</h1>

<h1>{`${this.props.name} ${this.props.lastname}`}!</h1>

mas por prática de ruby eu fiz assim:

<h1>{this.props.name} {this.props.lastname}!</h1>

e funcionou, a diferença delas está somente na escrita? porque essa última me pareceu mais agradável.

@fdaciuk, da esse erro ao rodar getstorybook

@fdaciuk, cá estou novamente. Não para dúvida, mas por curiosidade!

Estudando junto com você, e ao mesmo tempo buscando novos conteúdos na internet, posso ver a citação de várias tecnologias e pensamentos que acompanham o React e trabalham junto com ele, são eles os principais: Flux e Redux. Estou na aula M1#A50 até o momento isso não foi abordado. Alguma das aulas que estão no ar, explicam o que são esses conceitos/tecnologias? Pesquiso, pesquiso e pesquiso porém, não acho ninguém didático o suficiente para me explicar e me ajudar em relação a isso. Consegue me dar uma mão?

Desculpe a "abrissão" de issues, é que esse React tem mta coisa pra aprender hehehehe

Abraço!

Fala @fdaciuk blza? tive um imprevisto aqui estou no começo do curso e tinha importado a ultima versão do babel 6. alguma coisa e não estava indo por nada, resolvi colocar a 5. alguma coisa q no caso do vídeo era a que você usava, e funcionou.

vou dar sequencia no curso, no caso pelo que entendi algo que era necessário foi removido do babel 5 pra 6, preciso me preocupar?

Eae @fdaciuk ,

Estou com um duvida um tanto inciante, mas estou me quebrando um pouco.

Qual é a forma correta de utilizar lib's externas em componentes? Estou fazendo umas testes com uma lib de node qualquer e ocorre um erro na renderização do componente, consegue me ajudar?

Segue o fonte:

https://github.com/RodrigoWP/learning-react/blob/master/src/app.js

Bom dia meu querido @fdaciuk, tudo certo ?

Aqui estou eu praticando meu lindo React. Até o momento estou usando a estrutura inicial sua, passada em aula, de CSS Modules, com CSS puro, importando ele dentro do JS e colocando no className. Porém, agora vi a necessidade de ter uma estrutura parecida com um ambiente de pré processadores.

Preciso ter um arquivo de CSS centralizado, com as cores padrão do meu site por exemplo, as fontes padrão, usar uma classe de forma global, importando um mixin por exemplo. Como o CSS Modules de comporta diante disso ? Eu vi que ele tem um tal de composes, mas não achei tão interessante rs, acho que não usei ele pra valer mesmo. Você acha necessário usar SASS juntamente com o CSS Modules, ou você acha desnecessário ?

Consegue me dar uma mão / ajuda em relação a isso? Qual seria o ambiente adequado para trabalhar com CSS dentro da estrutura do React com Webpack ?

Grande abraço!

@fdaciuk

Boa noite @fdaciuk, tudo certo ? Vou tentar te expor um código que fiz e pedir umas dicas pra você. Pode ser?

O que eu quis tentar fazer é aquele esquema de Input Search Real Time em Tabela, sabe ? E CONSEGUI !

Primeiramente coloquei tudo em uma só classe, a tabela, o input search, tudo misturado.. depois pensei, porque não crio um componente desse input search, passo umas props e posso utilizar ele em outros lugares. Resumindo, criei um component com esse input search, esse aqui. (algumas funções nesse arquivo como getInitialState e searchUpdated estão na documentação desse pacote)

Ele recebe umas props, como: data (array de objetos com as informações da tabela), função de callback, e umas outras não muito importantes. p/ a ocasião.

Criei funções getters e setters. Quando dou change no input, a lib importada faz seu trabalho e me retorna o array de objetos filtrado, e jogo isso no setEntityResult para ele guardar em uma variavel. Dentro da função searchUpdated (que está no onChange), eu chamo a função de callback passando como parametro o a função getEntityResult.

Na função de callback que está no componente da tabela, eu dou um setState com o resultado que recebi, e como o map da minha tabela está ouvindo de this.state ele atualiza a tabela.

Fiquei bem feliz de conseguir fazer isso funcionar 🥇 Porém como sou bem encucado, fico pensando, isso foi coisa mirabolante da minha cabeça? Esse "fluxo" que fiz... Fiz da melhor forma? Fiz da forma mais performática? Posso replicar esse fluxo de mudança de estado para o resto da minha aplicação ? Tenho medo disso virar uma salada de callbacks e props quando a aplicação crescer, não tenho ideia ainda hahah.

Gostaria de umas dicas em relação a esse esquema que fiz, caso você não tenha entendido da forma que expliquei me da um toque.

Valeu por toda ajuda!

Fiz as configs iguais a da aula, porém retorna um erro quando tento rodar o script.

TypeError: webpack.HotModuleReplacementPLugin is not a constructor

Deixei todas as versões de dependências iguais a da aula em questão mesmo assim não resolveu o problema.

Link para o repositório com o código: https://github.com/williamcosta/curso-react

@fdaciuk

Fala @fdaciuk, tudo tranquilo? Estou aqui com a dúvida da semana, não te dou sossego ! hahaha

1. Estamos com aplicações pequenas até o momento e o bundle gerado já é de quase 3mb, e quando tivermos aplicações gigantes, iremos gerar o bundle e vai dar 20-30-40mb, como o browser lida com isso? Não há queda na performance ? Ou algo do tipo, demora para renderizar algo para o usuário.

2. Como já falei pra você em issues e dúvidas passadas, estou fazendo esse curso para montar uma aplicação. Por isso as vezes faço perguntas pensando la na frente, ou perguntando coisas que "não está na hora de aprender" ainda, você deve me entender, estou correndo contra o tempo. Para começar a estruturar minha aplicação eu preciso de um norte em relação a Flux/Redux, pois quero utiliza-los. Não vou conseguir esperar as aulas do curso saírem (o que eu queria MUITO!) mas não vou conseguir, infelizmente. Tem algum lugar que você me indica ver/ler/estudar sobre esse assunto ? Todos vídeos/artigos que vejo, me perco mais ainda, eu realmente preciso de um norte em relação a esse assunto. Você consegue me ajudar? Mesmo "não estando na hora", digamos assim !?

Valeu por toda atenção!

Uma duvida rápida, no caso como foi explicado na aula, se eu usar "evento" que é emitido pelo onKeyUp, ele só vai deixar null as propriedades quando eu fizer uso desse "evento", em uma função assíncrona ?, ou sempre ao finalizar o callback, ele faz as propriedades ficarem null ?, porque na aula foi possível guardar e.target em uma constante, pra depois ser usada no método always, ai sim ele foi mudado pra null. em resumo só dá uma re explicação rápida pois não ficou muito claro pra min :)

@fdaciuk

Fala @fdaciuk, beleza?

Fiquei com dúvida sobre a diferença entre os binds do método handleSearch e getRepos. Porque não precisamos fazer o bind no constructor para o getRepos?

Porque o método getRepos é executado logo que a pagina é carregada e o método handleSearch não?

Se eu remover a arrow function ( return (e) => { ) do método getRepos, o que muda no bind deste método?

Estou no começo o curso agora e tendo o meu primeiro contato com o React, então desculpe se estou escrevendo alguma bobagem.....

@fdaciuk, duas questões sobre a short-hand notation:

1. Há algum ganho de performance na aplicação pelo fato de conseguirmos importar uma parte de um todo, como feito com { Component } na aula 12 do módulo 1?

2. O espaço após a abertura e antes do fechamento das chaves é obrigatório ou apenas uma convenção?

Fala @fdaciuk, beleza?

Uma dúvida em relação ao storybook.
Eu instancio um componente dentro do .story.js e esse componente tem suas dependências, que são instanciadas dentro do próprio componente.

Por exemplo: Eu instancio o componente X. Dentro do componente X, ele chama vários arquivos JS por exemplo.

Quando eu faço uma story desse componente X, o storybook pede as dependências que já estão sendo pedidas dentro do próprio componente (CSS por exemplo, ou algum outro componente secundário que ele usa).

Qual o motivo disso?

Valeu !

Oi pessoal, quando instalei o babel-react-preset e adicionei react no array de presets do .babelrc, meu projeto passou a dar esse erro de compilação:

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src/index
Module not found: Error: Can't resolve 'babel' in '/Users/camilaibs/Desktop/curso-react-ninja'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'babel-loader' instead of 'babel',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index

Dai troquei o loader de babel para babel-loader no webpack.config.js e voltou a funcionar, aconteceu isso com vocês, entendi certo o que era para fazer na mensagem de erro?

@fdaciuk

Boa noite de novo cara, estou na parte de instalar o standard como lint do meu boilerplate, mas esta dando um erro parece que com o preLoader, segue:

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
configuration.module has an unknown property 'preLoaders'. These properties are valid:
object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }

Fiz tudo direitinho como foi passado no vídeo, porem não roda o bundle de jeito algum, meu código está em:

https://github.com/juliocarneiro/react-front-boilerplate

@fdaciuk

Fala @fdaciuk, beleza? Lá vai as perguntas rs

1 - Meu carma, autenticação. Não cheguei a colocar a mão na massa em relação a isso ainda, só pesquisei, acabei caindo aqui. É mais ou menos esse fluxo que preciso seguir (apenas de não estar tão claro pra mim esse auth-flow), tem algum lugar que posso me basear?

2 - Vamos pensar em um "editar usuário", que usa o mesmo arquivo de formulário "criar usuário" por exemplo, isso pode ser uma boa prática ou má prática? Ainda não consigo desenhar na minha cabeça o fluxo de CRUD em React editando/deletando. Pode me dar uns toques em relação a formulários nesse sentido? Trabalho com o <form> normal ? Pegando os dados com JS Puro para enviar pra API.

Valeu por toda força!

Volteeeeeeeeeeeeeeeeei @fdaciuk hahaha

Viu, no começo do curso, optei por utilizar o semistandard ao inves do standard. E estou passando por alguns cenários.

Exemplo: Ele fala o seguinte no lint:

1º "Value must be omitted for boolean attributes".
O que dá a entender é, meu código está assim: open={true} porém o lint fala que posso deixar assim: open=true, mas se eu deixo assim como ele fala, da erro !

Mesma situação acontece quando usamos !! para transformar em valor booleano, ele fala: "Redundant double negation".

Entre outros.. estou com medo de rodar um semistandard --fix e ele acabar quebrando minha aplicação.

Como devo submeter?

Fala @fdaciuk, cá estou eu novamente. Algumas dúvidas rápidas creio eu, vou colocar em forma de lista.

1. No webpack.config na parte de output em PublicPath, você fala sobre trabalhar com arquivos em memória, e seta um /static/. Mas não entendi muito bem esse esquema, vou realmente poder usar assim? Não vou chamar o bundle.js pela url normal? Como funciona quando trabalho com 2 ambientes (dev/produção) ?

2. Estou na aula 27 ainda. Mas algumas coisas me preocupam. Com essa estrutura do React, onClick (eventos) inline, e outras coisas a mais que vi até o momento (nada aprofundado). É realmente assim? Não consigo me imaginar estruturando uma aplicação toda dessa maneira, com eventos inline, html dentro de arquivos javascript. O React realmente trabalha dessa forma, ou até o momento você está fazendo assim apenas para motivos de aprendizado?

Resumindo, não consigo pensar em uma aplicação estruturada em react, com essa estrutura apresentada até o momento.

Fala @fdaciuk, beleza?

Só uma pequena dúvida de um cenário que eu passei aqui.

Vi no vídeo, quando você instalou o as dependencias para test com o comando: yarn add --dev jest-cli babel-jest chai o yarn foi super eficaz e trabalhou em cima da instalação desses 3 pacotes !
Porém, no meu computador, ele demorou cerca de uns 5~10minutos, pois tive a impressão que ele passou atualizando todas dependências que tenho no package.json. Normal isso? Será que tem a ver com o Sistema Operacional ? Valeu

Faaaala Daciuk, tudo certin?!

Em um ponto da aula 13 temos este código [1]. Neste momento você comenta que para termos uma programação 100% funcional precisamos remover o if. Então chegamos a este outro código [2].

A minha pergunta é: por que em programação funcional não poderiamos ter o if? O ternário faz quase a mesma coisa (ao meu ver), mas ele é permitido e o if não, por quê isso ? .-.

Me ajuda a esclarecer? Abraço!

[1]

'use strict'

const map = (arr = [], func = (item) => item) => {
    const counter = 0;

    return (function mapInternal (arrInternal, counter) {
        if (arrInternal.length === 0)
            return [];

        const [head, ...tail] = arrInternal;
        return [
            func(head, counter, arr), 
            ...mapInternal(tail, counter + 1)
        ];
    })(arr, counter);
}

export default map;

[2]

'use strict'

const map = (arr = [], func = (item) => item) => {
    const counter = 0;

    return (function mapInternal (arrInternal, counter) {
        const [head, ...tail] = arrInternal;
        
        return arrInternal.length === 0 ? [] : [
            func(head, counter, arr), 
            ...mapInternal(tail, counter + 1)
        ];
    })(arr, counter);
}

export default map;

@fdaciuk

Fala @fdaciuk, beleza? Estava pensando em comprar esse curso porém esta dando como ESGOTADO. Já era? Como funciona isso ? Valeu, abraço!

Fala, @fdaciuk ! Eu aqui de novo 😄

Nesta aula você mostra como tratar exceções caso o usuário passe parâmetros diferente do esperado (na implementação imperativa).

Eu adicionei o tratamento na implementação recursiva, porém não consegui substituir os if's por ternário de modo que o código continuasse legível haha.

Qual seria a solução mais elegante pra esse caso?

'use strict'

const map = (arr = [], func = (item) => item) => {
    /* --- Aqui --- */
    if (!Array.isArray(arr))
        throw new TypeError('First parameter must be an array');

    /* --- E aqui --- */
    if (typeof func !== 'function')
        throw new TypeError('Second parameter must be a function');

    const counter = 0;

    return (function mapInternal (arrInternal, counter) {
        const [head, ...tail] = arrInternal;

        return arrInternal.length === 0 ? [] : [
            func(head, counter, arr),
            ...mapInternal(tail, counter + 1)
        ];
    })(arr, counter);
}

export default map;

@fdaciuk

Boa tarde mestre @fdaciuk,

Voltei nessa aula, e acabei tendo uma dúvida.

Qual o principal motivo de criar aquele watch de lint no gulp, sendo que ja temos o watch lint que é mostrado no dashboard ?

@fdaciuk

@fdaciuk seria interessante, após o título de Modulo e EP. colocar o nome da aula. Algo como "M1#A01 - Ementa do Curso".

Parabéns pelo conteúdo.

Ex.

{!!actorsObj && <Actors actorsObj={actorsObj}/>}

Desta forma, eu consigo fazer que, o componente só seja renderizado quando eu preencher este objeto, mas...
E se eu quiser que ele seja renderizado, apenas se todos valores dentro deste objeto estejam preenchidos, como faço?

@fdaciuk

@fdaciuk, estou seguindo os vídeos e reproduzindo os exemplos da forma mais fiel possível. Entretanto, na aula 10 da configuração do Webpack, ao adicionar o standard no preLoader ocorre o erro conforme imagem abaixo. Parece ser algum erro no pacote do Webpack mesmo ou será que fiz algo errado?

O link para o código está aqui.

P.S.: esse Webpack é chato, hein! 😝

Professor, pelo que eu vi o modulo 4 ainda esta pra lançar, queira saber se vai haver um pouco de react fiber e se o modulo 4 vai ser grande como o modulo 2 ? ou vai ser surpresa ? 👍

@fdaciuk

Duvida,

Eu já tenho um webservice rodando.. e quero fazer um CRUD de uma forma simples consumindo-o

O que usar em conjunto com o React? O Redux seria pra isso?

Como fazer pra poder escrever o arquivo webpack.config.js usando ES6. Pra poder usar import ao invés de require.

O correto seria usar tudo import, que é o padrão ES6, certo?

Fala Daciuk!

Estou construindo um script de atualização utilizando o child-process semelhante ao que fizemos na aula 73 do modulo 2, e está me retornando um erro ao executar o comando yarn add, segue:

Error: spawn yarn ENOENT
    at exports._errnoException (util.js:1050:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
    at onErrorNT (internal/child_process.js:367:16)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)
    at Module.runMain (module.js:607:11)
    at run (bootstrap_node.js:423:7)
    at startup (bootstrap_node.js:147:9)
    at bootstrap_node.js:538:3

Sabe o que pode ser?

Obs: Estou usando a versão 7.9.0 do node

Valeu!

@fdaciuk

Em relação a estrutura criada no githubapp, por favor me corrija se eu estiver errado..

Criamos um componente container que é nosso AppContent, o único componente statefull da nossa aplicação, certo?!

Seguindo essa estrutura se eu fosse criar um aplicativo maior eu poderia dividir dessa forma:

src
    app.js
    index.js
    menu1
        components
        AppContainer.js
    menu2
        components
        AppContainer.js

O que eu quis dizer: Em um sistema maior eu vou ter vários containers, cada menu (ou aba) seria um container e todos esses containers ficaram dentro de um container principal que é o que seria renderizado no app.js, dessa forma eu teria o controle centralizado do estado de cada parte do sistema..

Não sei se fui claro, mas é isso ai?

Boa tarde @fdaciuk, beleza?

1 - Como uma forma de testar o bundle de produção que geramos gerado, criei um repositório separado para o github-app no meu GH e gerei uma GitHub Page. Porém, está dando 404.

Será que pode ser algum problema no webpack? Ou é na Github Page mesmo? Não sei o que fiz de errado, porém também não sei se essa é uma forma boa e eficaz de realizar esse teste.

Repositório: https://github.com/gabrielferreiraa/github-app

2 - Colocando isso no webpack:

new htmlPlugin({
    title: 'GitHub App',
    template: path.join(__dirname, 'src', 'html', 'template.html')
})

Ao invés de buscar um index.html na raiz ele busca o que está em src/html ? Não compreendi mt bem essa parte.

3 - Uma outra dúvida que me surgiu após essa aula, com minificação (uglify), e geração de bundle, é como irei utilizar o pré processadores CSS por exemplo. Ou um autoprefixer no gulp, enfim. Uma coisa que faz parte do nosso dia dia, agora com apenas 1 arquivo css/js para toda a aplicação.

Abraço!

Boa tarde cara, beleza ? Faz um tempo que não apareço por aqui rs

Então, estava configurando o ambiente de testes e linter. Funcionou tudo perfeitamente, porém, não sei por qual motivo o yarn test:watch não funciona, o yarn test sem watch funciona normalmente !!
Da uma olhada no package.json, não achei nada de errado :/

https://github.com/gabrielferreiraa/starterKitReact/blob/master/package.json

@fdaciuk

Fala @fdaciuk, tudo certo?
Primeiramente gostaria de te parabenizar pelo conteúdo do curso, ficou muito bom, curti demais! :D

Fiquei com uma dúvida na hora de resolver o exercício.
Criei a seguinte função:

handlePublicReposSearch () {
  const login = this.state.userInfo.login
}

De início tentei chamá-la com:

handlePublicReposSearch={this.handlePublicReposSearch()}

Mas não funcionou, pois assim eu "perco" o this do componente.
Então cheguei em duas saídas:

handlePublicReposSearch={() => this.handlePublicReposSearch()}

Ou

handlePublicReposSearch={this.handlePublicReposSearch.bind(this)}

Por enquanto estou preferindo utilizar arrow function. Você tem alguma recomendação sobre isso? Qual seria a melhor prática?
Valeu! :)

Opa @fdaciuk, beleza?

Algumas perguntas.

Quando vou trabalhar com consumo de API, por exemplo uma tabela (sem nenhuma ação), quando o usuário chama a rota, eu consumo e renderizo a tabela. Posso trabalhar com lifecycle? Fazer o ajax no componentWillMount() e setar o estado por exemplo? Ou tem algum pattern que é bom seguir?

Valeu!

Olá @fdaciuk, tudo bem?

Será que você consegue me ajudar?

Obs.: Estou utilizando SO Windows 8 - 64 bits

Estou com problemas ao executar o Lint. Quando executo o comando: yarn lint:watch, o seguinte erro é exibido:

yarn lint:watch v0.21.3
$ gulp
[08:06:43] Using gulpfile E:\react\cursos\da2k\curso-reactjs-ninja\examples\m02\applications\github-app\gulpfile.js
[08:06:43] Starting 'lint'...
events.js:160
throw er; // Unhandled 'error' event
^

Error: spawn yarn ENOENT
at exports._errnoException (util.js:1022:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
at onErrorNT (internal/child_process.js:359:16)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3
error Command failed with exit code 1.

Boa noite meu querido!
Estou com uma duvida a umas 3 lições já, no meu console está aparecendo um warning de createClass deprecated, segue:

Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class

Fui dar uma olhada mas não estou entendendo muito bem, sou bem leigo em React o que sei estou aprendendo no curso!

Grande abraço

@fdaciuk

Fiz toda a configuração do Hot Loader porém ele não atualiza a página.

No console exibe as mensagens:

[HMR] Waiting for update signal from WDS...
ReactDOM.js:75 Download the React DevTools for a better development experience: https://fb.me/react-devtools
client?843a:37 [WDS] Hot Module Replacement enabled.
2client?843a:37 [WDS] App updated. Recompiling...
client?843a:37 [WDS] App hot update...
2client?843a:37 [WDS] App updated. Recompiling...
client?843a:37 [WDS] App hot update...
2client?843a:37 [WDS] App updated. Recompiling...
client?843a:37 [WDS] App hot update...

Reparei que no vídeo, no seu console são exibidas algumas mensagens a mais, do only-dev-server e do log-apply-result.

Professor ao fazer essa aula eu me deparo com um warning dizendo que createClass do React, vai ser decrepitado a partir da versão 16, posso continuar o curso normalmente ? nas próximas aulas vai ser atualizado essa questão ou não devo me preocupar com isso ?

@fdaciuk