/treinamento-locaweb

Parte do material utilizado no treinamento ministrado por Halan promovido pela Locaweb (em Setembro de 2016).

Primary LanguageJavaScript

Dia 1

  • Instalação do NPM
  • npm init partindo de uma pasta vazia
  • npm install webpack webpack-dev-server --save-dev
  • Criar webpack.config.js com apenas duas chaves: entry e output (esse arquivo é .js e precisa adicionar module.exports = {}) (aqui)
    • Na chave entry: app: "./src/index.js"
    • Na chave output: path: "./dist/" e filename: "[name].js"
  • Adiciona HTML simples em ./dist/index.html chamando app.js (aqui)
  • Adiciona scripts no package.json, start e build (aqui)
    • O start com o comando: webpack-dev-server -d --hot --inline --content-base "./dist/"
    • O build com o comando: webpack --optimize-minimize
  • npm install babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 babel-preset-react
  • Adiciona arquivo de configuração do babel na pasta raiz com o nome .babelrc (não é js, é json puro)
    • Com o conteúdo: { presets: ['es2015', 'stage-0', 'react'] } (aqui)
  • Adiciona chave module na configuração do webpack (aqui)
    • Esta chave contem uma chave loaders com o seguinte conteúdo: [ { test: /.js$/, loader: 'babel' } ]

Errata

O -d no webpack-dev-server não é de development e sim de debug. Ele é um atalho para outros parâmetros, vide o help do webpack abaixo:

  -d                                    shortcut for --debug --devtool sourcemap --output-pathinfo
  -p                                    shortcut for --optimize-minimize

O --optimize-minimize que foi sugerido pode ser trocado pelo seu atalho: -p. Muito mais fácil de decorar pra usar.

UPDATE

Para instalar o npm atualizado no Ubuntu 16.04 basta instalar os pacotes oficiais do ubuntu nodejs e npm. Feito isso, basta instalar como global o pacote n: sudo npm install -g n. Tendo o n instalado e pronto, basta rodar: n latest.

Dia 2

  • Organiza os componentes em uma pasta própria
  • Separa os dados dos componentes e transforma em propriedades
  • Leva essas propriedades para o componente raiz App
  • Extrai todos os dados para dentro de um objeto único contendo todas as propriedades
  • Define data.js contendo duas collections podcasts e episodes
    • podcasts deve ter id
    • episodes deve ter id e podcastId
  • Define um objeto simples contendo o id do podcast selecionado e o id do episódio selecionado
  • Dado o episódio e o podcast selecionado, e as collections definidas em data.js é criado funções simples para selecionar os dados corretos

Material extra 🍻💍