henriquejensen

Projeto StarWars 🌌🔫

⚠️ ATENÇÃO: Esse checklist é apenas um template. Para replicar realize o fork deste gist! ⚠️

1. O que preciso saber para fazer o projeto? 🤔

Você vai desenvolver uma lista com filtros de planetas do universo de Star Wars usando Context API e Hooks para controlar os estados globais.

Segue o link do deploy de um modelo do projeto: http://trybe-starwars-exemplo.surge.sh/

2. Que conteúdos revisar? 📚

henriquejensen

Checklist do Redux

Antes de começar

• pensar como será o formato do seu estado global
• pensar quais actions serão necessárias na sua aplicação

Instalação

• npx create-react-app my-app-redux;
• npm install --save redux react-redux;
• npm install --save @redux-devtools/extension

henriquejensen

We couldn’t find that file to show.

henriquejensen

Boas práticas para Code Review

• os testes estão passando
• não existem erros de lint
• commits estão divididos (não existe o commit bomba), e eles possuem uma boa mensagem
• variáveis possuem nomes que fazem sentido (evitar nomes simples como const a, const minhaVar, etc.)
• Os nomes dos componentes e das funções são coerentes (traduzem o que aquele componente e aquela função se pretendem a cumprir).
• a lógica esta entendível (código é feito para um humano)
• esta usando os métodos do javascript para array (map, filter, reduce) ao invés de for e while
• Se tiver comentários, eles são pontuais e em partes relevantes

henriquejensen

{
  "response": [
    {
      "text": "RT @PostGradProblem: In preparation for the NFL lockout, I will be spending twice as much time analyzing my fantasy baseball team during ...",
      "truncated": true,
      "in_reply_to_user_id": null,
      "in_reply_to_status_id": null,
      "favorited": false,
      "source": "<a href=\"http://twitter.com/\" rel=\"nofollow\">Twitter for iPhone</a>",
      "in_reply_to_screen_name": null,

henriquejensen

• [actions] //Pasta com todas as actions
• [reducers] //Pasta com todas os reducers
• [constants] //Pasta com todas as constantes
• [containers] //Pasta com todas os containers
• [components] //Pasta com todas os componentes
• [styles] //Pasta dos stilos gerais

henriquejensen

import React, {Component} from "react"
import * as actionsLogin from "../../login/actions/actionsLogin"
import HomeControllerView from "./HomeControllerView"

class HomeController extends Component {
  constructor() {
    super()
    this.state = {}
  }
  

henriquejensen

• [src]
  • [modules] //Pasta com todos os modulos da app
    • [module name] //Pasta de um modulo
      • [actions] //Pasta das actions do modulo
        • actionName.js
      • [reducers] //Pasta dos reducers do modulo
        • reducerName.js
      • [constants] //Pasta das constantes do modulo
      • [styles] //Pasta dos stilos gerais do modulo

• [components] //Pasta dos componentes do modulo

henriquejensen

#Terminal
node -> 8.4.0 //Ambiente para rodar o JS no servidor
npm -> 5.3.0 //Gerenciador de pacotes do node
yarn -> 0.27.5 //Gerenciador de pacotes do node com cache de pacotes
eslint -> 4.5.0 //Identificador de padroes de codigo
http-server -> 0.10.0 //Simples servidor de paginas estaticas
json-loader -> 0.12.0 //Mock de servidor REST API

#Editor VS Code
#snippets

henriquejensen

{
    "presets": [
        "es2015",
        "react",
        "stage-1"
    ]
}