Drupal 8 e ReactJS - DrupalCamp Campinas 2016

Notas do Editor

• #87: - Jest e Enzyme para os testes: - Jest feito pelo Facebook - Facilita o teste unitário dos componentes. (exemplo de teste) http://codeheaven.io/testing-react-components-with-enzyme/ - Mock everything!!! - Testes assíncronos. - Utiliza Jasmine que é bem conhecido pela comunidade. - Pode ser utilizado com vários expects como chai ou mocha. - Enzyme feito pelo AirBnB - Exemplo de código antes e depois. http://codeheaven.io/testing-react-components-with-enzyme/ - Conceito de shallow que permite testar o primeiro nível do componente. - Renderização do DOM sem precisar de browser permitindo a simulação de eventos como click ou change. - Seletores para procurar elementos/componentes dentro de um componente. - API super fácil por exemplo para acessar propriedades e o estado do componente.
• #88: - Jest e Enzyme para os testes: - Jest feito pelo Facebook - Facilita o teste unitário dos componentes. (exemplo de teste) http://codeheaven.io/testing-react-components-with-enzyme/ - Mock everything!!! - Testes assíncronos. - Utiliza Jasmine que é bem conhecido pela comunidade. - Pode ser utilizado com vários expects como chai ou mocha. - Enzyme feito pelo AirBnB - Exemplo de código antes e depois. http://codeheaven.io/testing-react-components-with-enzyme/ - Conceito de shallow que permite testar o primeiro nível do componente. - Renderização do DOM sem precisar de browser permitindo a simulação de eventos como click ou change. - Seletores para procurar elementos/componentes dentro de um componente. - API super fácil por exemplo para acessar propriedades e o estado do componente.
• #94: - React Router como sistema de rotas da WebApp: - Sistema de roteamento reativo e de fácil implementação. - Bem conhecido na comunidade de React, e escolhido como way to go! - Mostrar código de exemplo. - Cada mudança de rota é uma mudança no estado do Redux. - Muda a url sem realizar refresh graças a compatibilidade com html5.
• #95: - React Router como sistema de rotas da WebApp: - Sistema de roteamento reativo e de fácil implementação. - Bem conhecido na comunidade de React, e escolhido como way to go! - Mostrar código de exemplo. - Cada mudança de rota é uma mudança no estado do Redux. - Muda a url sem realizar refresh graças a compatibilidade com html5.
• #97: - CSS Modules com PostCSS: - Possibilita interoperabilidade dos componentes, parecido ao BEM. - Extend vs. Compose. - Estilo local por default, não mais regras globais! - Funciona muito bem com Webpack e React. - CSS que escala. - Syntaxe parecida ao Sass.
• #98: - Webpack como bundler. (exemplo do arquivo de config) - Diferença entre Browserify. - Remove a necessidade de utilizar Gulp ou Grunt. - Remove a necessidade de usar Bower, usamos npm para tudo.- Babel para usar ES6. (exemplo de código) - Podemos usar features que possibilitam uma fácil programação funcional. - Async / Await. - Decorators. - Reduz código verboso - Reduz a necessidade de se preocupar com Polyfills como a API de Promesas. - Quase todo tutorial de React usa Babel em vez de TypeScript.
• #99: - Webpack como bundler. (exemplo do arquivo de config) - Diferença entre Browserify. - Remove a necessidade de utilizar Gulp ou Grunt. - Remove a necessidade de usar Bower, usamos npm para tudo.- Babel para usar ES6. (exemplo de código) - Podemos usar features que possibilitam uma fácil programação funcional. - Async / Await. - Decorators. - Reduz código verboso - Reduz a necessidade de se preocupar com Polyfills como a API de Promesas. - Quase todo tutorial de React usa Babel em vez de TypeScript.