React + Redux boilerplate (documentation in portuguese)

---

Trabalhando com essa estrutura

npm install ou yarn install instala as dependências

Para instalar o yarn no Mac brew install yarn

npm start inicia o projeto na porta 3000

npm run lint to report errors in JS and SCSS code style

npm run build to generate ./dist folder for production

npm test Roda os casos de teste feitos com Mocha, Chai e Sinon

npm run test:watch Roda os testes em modo --watch

---

Padrão de código

• Husky cria githook precommit e prepush para previnir commits ruins
• editorconfig é uma ferramenta para manter o estilo do código consistente entre diferentes editores e IDEs
• ESLint é um linter de JS
  • eslint-config-airbnb Regras padrão do AirBnb
  • eslint-plugin-import suporta linting para a sintaxe do ES6 de módulos import/export
  • eslint-plugin-react regras específicas de ESLint para React
  • eslint-plugin-jsx-a11y regras de acessibilidade para o ESLint
• stylelint é um linter de SCSS
  • stylelint-config-standard Configuração padrão do stylelint
  • stylelint-order plugin de eslint que permite criar regras de ordenação

Dependência Prettier desativada, ainda em estudo:

• prettier Formatador automático de código, seja ele JS, SCSS, entre outros

  • eslint-config-prettier Desabilita as regras do ESLint que podem entrar em conflito com o Prettier
  • eslint-plugin-prettier Plugin do ESLint para formatação do Prettier

• Configurando o Prettier no webstorm

---

Framework

• React React isomórfico (Pode rodar no client e no servidor)

  • react-dom React específico para o DOM do browser

• prop-types adiciona checagem de tipo para props do React

---

Incrementos ao React

• redux é um container de estado para apps em JS

  • react-redux Bindings do React para trabalhar com o Redux
  • redux-immutable-state-invariant Middleware do Redux que detecta mutações entre os dispatches do Redux. Somente para uso no desenvolvimento.

• reselect serve para guardar dados que foram processados através de funções selectors, para que não sejam processados novamente. Com a técnica de memoization.

• react-router v4 O core do React router

  • react-router-dom Pacote do react router que expõe componentes como BrowserRouter, Link e withRouter
  • react-router-redux integra o react-router com o redux

• react-helmet é um administrador do header do documento para React

• react-transition-group permite animações quando um componente entra ou sai do DOM

---

Estilo

node-sass converte o SCSS para CSS usando o compilador libsass autoprefixer analisa o CSS e adiciona prefixos para browsers específicos normalize.css Uma alternativa aos resets de CSS sass-mq simplifica o trabalho com @media queries

---

Teste e cobertura

• Mocha é um framework de teste

• Chai para asserções dentro do Mocha

• Sinon para a criação de spies, stubs e mocks

• react-test-utils é uma helper library que facilita a testagem de componentes React em qualquer framework de teste

• enzyme é uma abstração para o React Test Utils, e usa JSDOM por baixo dos panos

• jsdom DOM virtual em memória

• Istanbul para checar a cobertura de testes

  • NYC é a linha de comando para o instanbul

• redux-mock-store Serve para criar uma Store fake para testagem de criadores de ação assíncronos e middlewares do Redux

• moxios Mock Axios for unit testing

• mock-local-storage LocalStorage fake para rodar testes unitários

Ferramentas em avaliação:

• plato Analisa a complexidade da funções

Regras do teste

O limite mínimo de cobertura de código é 80% nos seguintes aspectos:

• Statements > 80%
• Branches > 80%
• Funções > 80%
• Linhas > 80%

Se a cobertura for menor que isso, o commit e o push serão rejeitados

---

Transpilador e Module Bundler

• Webpack module bundler para usar módulos em JS outras tarefas
  • Webpack Dev Server cria um servidor para rodar o app

Webpack loaders

• babel-loader Permite usar Babel integrado ao Webpack
• css-loader interpreta @import e url() como requires para o Webpack
• dsv-loader possibilita o carregamento de arquivos dsv (e.g. .csv or .tsv)
• eslint-loader é o loader do ESLint para Webpack
• file-loader pode carregar qualquer tipo de arquivo
• html-loader exporta HTML como string. HTML é minificado quando o compilador demanda
• import-glob-loader expande padrões de globbing para imports de SCSS
• imports-loader permite o uso de módulos que dependem de variáveis globais específicas como "jQuery"
• postcss-loader PostCSS loader para processar o CSS com plugins de PostCSS como o autoprefixer
• react-hot-loader Hot reload específico para React
• sass-loader compila Sass para CSS
• sass-resources-loader compartilha variáveis e mixins em todos os arquivos sem ter que fazer @import
• style-loader adiciona CSS ao DOM injetando uma tag <style>
• url-loader funciona como o file loader, mas retorna o arquivo em DataUrl se ele for menor que um limite de bytes definido

Plugins para o Webpack

• html-webpack-plugin Simplifica a criação de arquivos HTML para servir os bundles do Webpack
• extract-text-webpack-plugin Extrai texto de um bundle e transforma em um arquivo, como CSS por exemplo
• copy-webpack-plugin Copia arquivos e diretórios na pasta de output do Webpack
• stylelint-webpack-plugin Plugin para integrar o stylelint com o Webpack

---

Transpilador de JS

• babel-core O compilador core do Babel
• babel-cli Babel na linha de comando
• babel-polyfill série de polyfills para utilizar Promises, Object.assign e outras features com suporte aos browsers modernos *babel-register Permite usar o babel via require('babel-register')

Presets e plugins para o Babel

• babel-preset-env permite definir quais browsers se quer dar suporte para que o babel faça somente o trabalho necessário
• babel-preset-stage-0 Conjunto de regras para dar suporte a sintaxe do JS ainda em estágio 0 de aprovação
• babel-preset-react Conjunto de plugins específicos para React
• babel-eslint permite que todo o código válido do Babel passe no ESLint, é definido no "parser" do arquivo babelrc
• babel-plugin-transform-runtime permite que se evite funções do Babel duplicadas entre múltiplos arquivos
• babel-plugin-istanbul Adiciona o Instanbul para código ES6
• babel-plugin-react-css-modules Transform as props "styleName" para "className" usando a resolução dos CSS módulos em tempo de compilação
• babel-plugin-transform-object-rest-spread Plugin para transformar a notação spread o JS

---

Outras ferramentas

• npm-run-all Uma ferramenta de linha de comando para executar múltiplos scripts npm em paralelo ou de forma sequencial
• axios Faz requests HTTP baseado em Promises, para uso no browser e node.js
• moment analisa, valida, manipula e exibe datas em JS
  • moment-timezone adiciona suporte de timezone ao moment
• lodash biblioteca com um conjunto de helpers para operações rotineiras em JS
• exif-js lê os metadados EXIF de uma imagem