-If any JavaScript project has taken the front end ecosystem by storm in recent years, that would be [React](https://facebook.github.io/react/). React is a library built and open-sourced by the smart people at Facebook. In React, developers write components for their web interface and compose them together.
+Se algum projeto JavaScript adotou o ecossistema de front -end por tempestade nos últimos anos, isso seria [Reagir](https://facebook.github.io/react/). O React é uma biblioteca construída e de origem aberta pelas pessoas inteligentes no Facebook.No React, os desenvolvedores escrevem componentes para sua interface da web e os compõem.
-React brings about many radical ideas and encourages developers to [rethink best practices](https://www.youtube.com/watch?v=DgVS-zXgMTk). For many years, web developers were taught that it was a good practice to write HTML, JavaScript and CSS separately. React does the exact opposite, and encourages that you write your HTML and [CSS in your JavaScript](https://speakerdeck.com/vjeux/react-css-in-js) instead. This sounds like a crazy idea at first, but after trying it out, it actually isn't as weird as it sounds initially. Reason being the front end development scene is shifting towards a paradigm of component-based development. The features of React:
+React traz muitas idéias radicais e incentiva os desenvolvedores a [Repensar as melhores práticas](https://www.youtube.com/watch?v=DgVS-zXgMTk). Por muitos anos, os desenvolvedores da Web foram ensinados que era uma boa prática escrever HTML, JavaScript e CSS separadamente.React faz exatamente o oposto e incentiva que você escreve seu HTML e [CSS em seu JavaScript](https://speakerdeck.com/vjeux/react-css-in-js) em vez de.Parece uma ideia louca no começo, mas depois de experimentá -la, na verdade não é tão estranho quanto parece inicialmente.A razão é a cena do desenvolvimento do front end está mudando para um paradigma de desenvolvimento baseado em componentes.As características do React:
-- **Declarative** - You describe what you want to see in your view and not how to achieve it. In the jQuery days, developers would have to come up with a series of steps to manipulate the DOM to get from one app state to the next. In React, you simply change the state within the component and the view will update itself according to the state. It is also easy to determine how the component will look like just by looking at the markup in the `render()` method.
+- **Declarativa** - Você descreve o que deseja ver em sua opinião e não como alcançá -lo.Nos dias de jQuery, os desenvolvedores teriam que apresentar uma série de etapas para manipular o DOM para obter de um estado de aplicativo para o outro.No React, você simplesmente altera o estado dentro do componente e a visualização se atualizará de acordo com o estado.Também é fácil determinar como o componente ficará apenas olhando para a marcação no `render()` método.
-- **Functional** - The view is a pure function of `props` and `state`. In most cases, a React component is defined by `props` (external parameters) and `state` (internal data). For the same `props` and `state`, the same view is produced. Pure functions are easy to test, and the same goes for functional components. Testing in React is made easy because a component's interfaces are well-defined and you can test the component by supplying different `props` and `state` to it and comparing the rendered output.
+- **Funcional** - A visão é uma função pura de `props` e `state`. Na maioria dos casos, um componente de reação é definido por `props` (parâmetros externos) e `state` (ISSO INTERNOa). Para o mesmo `props` e `state`, A mesma visão é produzida.Funções puras são fáceis de testar e o mesmo vale para componentes funcionais.Os testes no React são facilitados porque as interfaces de um componente são bem definidas e você pode testar o componente fornecendo diferentes `props` and `state` para ele e comparar a saída renderizada.
-- **Maintainable** - Writing your view in a component-based fashion encourages reusability. We find that defining a component's `propTypes` make React code self-documenting as the reader can know clearly what is needed to use that component. Lastly, your view and logic is self-contained within the component, and should not be affected nor affect other components. That makes it easy to shift components around during large-scale refactoring, as long as the same `props` are supplied to the component.
+- **Manutenção** - Escrever sua visão de maneira baseada em componentes incentiva a reutilização.Descobrimos que definir o de um componente`propTypes` Faça o código React Auto-documentação, pois o leitor pode saber claramente o que é necessário para usar esse componente.Por fim, sua visão e lógica são independentes no componente e não devem ser afetadas nem afetar outros componentes.Isso facilita a mudança dos componentes durante a refatoração em larga escala, desde que o mesmo `props` são fornecidos ao componente.
-- **High Performance** - You might have heard that React uses a virtual DOM (not to be confused with [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)) and it re-renders everything when there is a change in state. Why is there a need for a virtual DOM? While modern JavaScript engines are fast, reading from and writing to the DOM is slow. React keeps a lightweight virtual representation of the DOM in memory. Re-rendering everything is a misleading term. In React it actually refers to re-rendering the in-memory representation of the DOM, not the actual DOM itself. When there's a change in the underlying data of the component, a new virtual representation is created, and compared against the previous representation. The difference (minimal set of changes required) is then patched to the real browser DOM.
+- **Alta performance** - Você deve ter ouvido dizer que o React usa um DOM virtual (não deve ser confundido com [Shadow Dom](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)) E renderiza tudo quando há uma mudança no estado.Por que há necessidade de um DOM virtual?Enquanto os motores javascript modernos são rápidos, ler e escrever para o DOM é lento.O React mantém uma representação virtual leve do DOM na memória.Reestringir tudo é um termo enganoso.Na reação, ele realmente se refere a renderizar a representação na memória do DOM, não o próprio DOM.Quando há uma alteração nos dados subjacentes do componente, uma nova representação virtual é criada e comparada com a representação anterior.A diferença (conjunto mínimo de alterações necessárias) é então corrigido no navegador real DOM.
-- **Ease of Learning** - Learning React is pretty simple. The React API surface is relatively small compared to [this](https://angular.io/docs/ts/latest/api/); there are only a few APIs to learn and they do not change often. The React community is one of the largest, and along with that comes a vibrant ecosystem of tools, open-sourced UI components, and a ton of great resources online to get you started on learning React.
+- **Facilidade de aprender** - Aprender o React é bem simples.A superfície da API do React é relativamente pequena em comparação com [isto](https://angular.io/docs/ts/latest/api/); Existem apenas algumas APIs para aprender e elas não mudam com frequência.A comunidade React é uma das maiores, e junto com isso vem um vibrante ecossistema de ferramentas, componentes da interface do usuário de código aberto e uma tonelada de ótimos recursos on-line para começar a aprender a reagir.
-- **Developer Experience** - There are a number of tools that improves the development experience with React. [React Developer Tools](https://github.com/facebook/react-devtools) is a browser extension that allows you to inspect your component, view and manipulate its `props` and `state`. [Hot reloading](https://github.com/gaearon/react-hot-loader) with webpack allows you to view changes to your code in your browser, without you having to refresh the browser. Front end development involves a lot of tweaking code, saving and then refreshing the browser. Hot reloading helps you by eliminating the last step. When there are library updates, Facebook provides [codemod scripts](https://github.com/reactjs/react-codemod) to help you migrate your code to the new APIs. This makes the upgrading process relatively pain-free. Kudos to the Facebook team for their dedication in making the development experience with React great. 
-As your app grows bigger, you may find that the app structure becomes a little messy. Components throughout the app may have to share and display common data but there is no elegant way to handle that in React. After all, React is just the view layer, it does not dictate how you structure the other layers of your app, such as the model and the controller, in traditional MVC paradigms. In an effort to solve this, Facebook invented Flux, an app architecture that complements React's composable view components by utilizing a unidirectional data flow. Read more about how Flux works [here](https://facebook.github.io/flux/docs/in-depth-overview.html). In summary, the Flux pattern has the following characteristics:
-
-- **Unidirectional data flow** - Makes the app more predictable as updates can be tracked easily.
-- **Separation of concerns** - Each part in the Flux architecture has clear responsibilities and are highly decoupled.
-- **Works well with declarative programming** - The store can send updates to the view without specifying how to transition views between states.
+À medida que seu aplicativo aumenta, você pode achar que a estrutura do aplicativo se torna um pouco confusa.Os componentes em todo o aplicativo podem ter que compartilhar e exibir dados comuns, mas não há uma maneira elegante de lidar com isso no React.Afinal, o React é apenas a camada de visualização, não dita como você estrutura as outras camadas do seu aplicativo, como o modelo e o controlador, nos paradigmas tradicionais do MVC.Em um esforço para resolver isso, o Facebook inventou o Flux, uma arquitetura de aplicativos que complementa os componentes de visualização composível da React, utilizando um fluxo de dados unidirecional.Leia mais sobre como o flux funciona [aqui](https://facebook.github.io/flux/docs/in-depth-overview.html). Em resumo, o padrão de flux tem as seguintes características:
-As Flux is not a framework per se, developers have tried to come up with many implementations of the Flux pattern. Eventually, a clear winner emerged, which was [Redux](http://redux.js.org/). Redux combines the ideas from Flux, [Command pattern](https://www.wikiwand.com/en/Command_pattern) and [Elm architecture](https://guide.elm-lang.org/architecture/) and is the de facto state management library developers use with React these days. Its core concepts are:
+- **Fluxo de dados unidirecionais** - Torna o aplicativo mais previsível, pois as atualizações podem ser rastreadas facilmente.
+- **Separação de preocupações** - Cada parte da arquitetura de fluxo tem responsabilidades claras e é altamente dissociada.
+- **Funciona bem com programação declarativa** - A loja pode enviar atualizações para a visualização sem especificar como visualizações de transição entre os estados.
-- App **state** is described by a single plain old JavaScript object (POJO).
-- Dispatch an **action** (also a POJO) to modify the state.
-- **Reducer** is a pure function that takes in current state and action to produce a new state.
+Como o Flux não é uma estrutura em si, os desenvolvedores tentaram criar muitas implementações do padrão de fluxo.Eventualmente, surgiu um vencedor claro, o que foi [Redux](http://redux.js.org/). Redux combina as idéias de Flux, [Padrão de comando](https://www.wikiwand.com/en/Command_pattern) e [Arquitetura de Elm](https://guide.elm-lang.org/architecture/) e é o de fato que os desenvolvedores da Biblioteca de Gerenciamento Estadual usam com o React atualmente.Seus conceitos principais são:
-The concepts sound simple, but they are really powerful as they enable apps to:
+- Aplicativa **Estado** é descrito por um único objeto JavaScript antigo e simples (POJO).
+- Despacho um **ação** (também um pojo) para modificar o estado.
+- **Redutor** é uma função pura que adota o estado atual e a ação para produzir um novo estado.
+Os conceitos parecem simples, mas são realmente poderosos, pois permitem que os aplicativos:
-- Have their state rendered on the server, booted up on the client.
-- Trace, log and backtrack changes in the whole app.
-- Implement undo/redo functionality easily.
+- Tenha seu estado renderizado no servidor, inicializado com o cliente.
+- Alterações de rastreamento, log e backtrack em todo o aplicativo.
+- Implementar a funcionalidade Desfazer/refazer facilmente.
+O criador do Redux, [Dan Abramov](https://github.com/gaearon), teve muito cuidado ao escrever uma documentação detalhada para o Redux, além de criar tutoriais em vídeo abrangentes para aprender [básica](https://egghead.io/courses/getting-started-with-redux) e [avançada](https://egghead.io/courses/building-react-applications-with-idiomatic-redux) Restaurado.Eles são recursos extremamente úteis para aprender redux.
-The creator of Redux, [Dan Abramov](https://github.com/gaearon), has taken great care in writing up detailed documentation for Redux, along with creating comprehensive video tutorials for learning [basic](https://egghead.io/courses/getting-started-with-redux) and [advanced](https://egghead.io/courses/building-react-applications-with-idiomatic-redux) Redux. They are extremely helpful resources for learning Redux.
+**Combinando visão e estado**
-**Combining View and State**
+Embora o Redux não precise necessariamente ser usado com o React, é altamente recomendado, pois eles jogam muito bem um com o outro.React e Redux têm muitas idéias e características em comum:
-While Redux does not necessarily have to be used with React, it is highly recommended as they play very well with each other. React and Redux have a lot of ideas and traits in common:
+- **Paradigma de composição funcional** - O REACT compõe visualizações (funções puras) enquanto o Redux compõe redutores puros (também funções puras). A saída é previsível, dado o mesmo conjunto de entrada.
+- **Fácil de raciocinar sobre** - Você pode ter ouvido esse termo muitas vezes, mas o que realmente significa? Nós o interpretamos como tendo controle e entendimento sobre o nosso código - nosso código se comporta de maneiras que esperamos e, quando há problemas, podemos encontrá -los com facilidade. Através de nossa experiência, o React e o Redux sim a depuração mais simples. Como o fluxo de dados é unidirecional, rastrear o fluxo de dados (respostas ao servidor, eventos de entrada do usuário) é mais fácil e é simples determinar em qual camada o problema ocorre.
+- **Estrutura em camadas** - Cada camada na arquitetura App / Flux é uma função pura e tem responsabilidades claras. É relativamente fácil escrever testes para funções puras. Você precisa centralizar as alterações no seu aplicativo dentro do redutor e a única maneira de desencadear uma alteração é despachar uma ação.
+- **Experiência de desenvolvimento** - Muito esforço foi feito para criar ferramentas para ajudar na depuração e inspeção do aplicativo durante o desenvolvimento, como [Redux DevTools](https://github.com/gaearon/redux-devtools). 
-CSS (Cascading Style Sheets) are rules to describe how your HTML elements look. Writing good CSS is hard. It usually takes many years of experience and frustration of shooting yourself in the foot before one is able to write maintainable and scalable CSS. CSS, having a global namespace, is fundamentally designed for web documents, and not really for web apps that favor a components architecture. Hence, experienced front end developers have designed methodologies to guide people on how to write organized CSS for complex projects, such as using [SMACSS](https://smacss.com/), [BEM](http://getbem.com/), [SUIT CSS](http://suitcss.github.io/), etc.
+CSS (folhas de estilo em cascata) são regras para descrever como seus elementos HTML parecem.Escrever um bom CSS é difícil.Geralmente, é preciso muitos anos de experiência e frustração de se atirar no pé antes que alguém seja capaz de escrever CSS sustentável e escalável.O CSS, com um espaço de nome global, é fundamentalmente projetado para documentos da Web, e não para aplicativos da Web que favorecem uma arquitetura de componentes.Portanto, desenvolvedores de front -end experientes projetaram metodologias para orientar as pessoas sobre como escrever CSs organizados para projetos complexos, como o uso [SMACSS](https://smacss.com/), [BEM](http://getbem.com/), [SUIT CSS](http://suitcss.github.io/), etc.
-However, the encapsulation of styles that these methodologies bring about are artificially enforced by conventions and guidelines. They break the moment developers do not follow them.
+No entanto, o encapsulamento de estilos que essas metodologias provocam são artificialmente aplicados por convenções e diretrizes.Eles quebram o momento em que os desenvolvedores não os seguem.
-As you might have realized by now, the front end ecosystem is saturated with tools, and unsurprisingly, tools have been invented to [partially solve some of the problems](https://speakerdeck.com/vjeux/react-css-in-js) with writing CSS at scale. "At scale" means that many developers are working on the same large project and touching the same stylesheets. There is no community-agreed approach on writing [CSS in JS](https://github.com/MicheleBertoli/css-in-js) at the moment, and we are hoping that one day a winner would emerge, just like Redux did, among all the Flux implementations. For now, we are banking on [CSS Modules](https://github.com/css-modules/css-modules). CSS modules is an improvement over existing CSS that aims to fix the problem of global namespace in CSS; it enables you to write styles that are local by default and encapsulated to your component. This feature is achieved via tooling. With CSS modules, large teams can write modular and reusable CSS without fear of conflict or overriding other parts of the app. However, at the end of the day, CSS modules are still being compiled into normal globally-namespaced CSS that browsers recognize, and it is still important to learn and understand how raw CSS works.
+Como você já deve ter percebido, o ecossistema de front -end está saturado com ferramentas e, sem surpresa, as ferramentas foram inventadas para [Resolva parcialmente alguns dos problemas](https://speakerdeck.com/vjeux/react-css-in-js) com a escrita de CSS em escala."Em escala" significa que muitos desenvolvedores estão trabalhando no mesmo projeto grande e tocando nas mesmas folhas de estilo.Não há abordagem de acordos comunitários para escrever [CSS no JS](https://github.com/MicheleBertoli/css-in-js) No momento, e esperamos que um dia um vencedor surja, assim como o Redux, entre todas as implementações de fluxo.Por enquanto, estamos apostando [Módulos CSS](https://github.com/css-modules/css-modules). Os módulos CSS são uma melhoria em relação ao CSS existente que visa corrigir o problema do espaço para nome global no CSS;Ele permite que você escreva estilos locais por padrão e encapsulados ao seu componente.Esse recurso é alcançado por meio de ferramentas.Com os módulos CSS, equipes grandes podem escrever CSs modulares e reutilizáveis sem medo de conflito ou substituir outras partes do aplicativo.No entanto, no final do dia, os módulos CSS ainda estão sendo compilados em CSS normais de names globalmente que os navegadores reconhecem, e ainda é importante aprender e entender como o CSS bruto funciona.
-If you are a total beginner to CSS, Codecademy's [HTML & CSS course](https://www.codecademy.com/learn/learn-html-css) will be a good introduction to you. Next, read up on the [Sass preprocessor](http://sass-lang.com/), an extension of the CSS language which adds syntactic improvements and encourages style reusability. Study the CSS methodologies mentioned above, and lastly, CSS modules.
+Se você é um iniciante total do CSS, codecademy's [Curso HTML & CSS](https://www.codecademy.com/learn/learn-html-css) Será uma boa introdução a você.Em seguida, leia no [Pré -processador SASS](http://sass-lang.com/), Uma extensão da linguagem CSS que adiciona melhorias sintáticas e incentiva a reutilização de estilo.Estude as metodologias CSS mencionadas acima e, finalmente, os módulos CSS.
-**Estimated Duration: 3-4 days.** Try styling up your app using the SMACSS/BEM approach and/or CSS modules.
+**Duração estimada: 3-4 dias.** Experimente o seu aplicativo usando a abordagem SMACSS/BEM e/ou módulos CSS.
-#### Study Links
+#### Links de estudo
-- [Learn HTML & CSS course on Codecademy](https://www.codecademy.com/learn/learn-html-css)
-- [Intro to HTML/CSS on Khan Academy](https://www.khanacademy.org/computing/computer-programming/html-css)
+- [Aprenda o curso HTML & CSS no Codecademy](https://www.codecademy.com/learn/learn-html-css)
+- [Introdução ao HTML/CSS na Khan Academy](https://www.khanacademy.org/computing/computer-programming/html-css)
- [SMACSS](https://smacss.com/)
- [BEM](http://getbem.com/introduction/)
- [SUIT CSS](http://suitcss.github.io/)
-- [CSS Modules Specification](https://github.com/css-modules/css-modules)
-- [Sass Homepage](http://sass-lang.com/)
-- [Answers to Front End Job Interview Questions — HTML](https://github.com/yangshun/tech-interview-handbook/blob/master/front-end/interview-questions.md#html-questions)
-- [Answers to Front End Job Interview Questions — CSS](https://github.com/yangshun/tech-interview-handbook/blob/master/front-end/interview-questions.md#css-questions)
+- [Especificação de módulos CSS](https://github.com/css-modules/css-modules)
+- [Página inicial sass](http://sass-lang.com/)
+- [Respostas às perguntas da entrevista de emprego no front -end - HTML](https://github.com/yangshun/tech-interview-handbook/blob/master/front-end/interview-questions.md#html-questions)
+- [Respostas às perguntas da entrevista de emprego no front -end - CSS](https://github.com/yangshun/tech-interview-handbook/blob/master/front-end/interview-questions.md#css-questions)
-#### Alternatives
+#### Alternativas
- [JSS](https://github.com/cssinjs/jss)
-- [Styled Components](https://github.com/styled-components/styled-components)
+- [Componentes com estilo](https://github.com/styled-components/styled-components)
-## Maintainability
+## Manutenção
-Code is read more frequently than it is written. This is especially true at Grab, where the team size is large and we have multiple engineers working across multiple projects. We highly value readability, maintainability and stability of the code and there are a few ways to achieve that: "Extensive testing", "Consistent coding style" and "Typechecking". Also when you are in a team, sharing same practices becomes really important. Check out these [JavaScript Project Guidelines](https://github.com/wearehive/project-guidelines) for instance.
+O código é lido com mais frequência do que está escrito.Isso é especialmente verdadeiro no Grab, onde o tamanho da equipe é grande e temos vários engenheiros trabalhando em vários projetos.Valorizamos muito a legibilidade, a manutenção e a estabilidade do código e existem algumas maneiras de conseguir isso: "testes extensos", "estilo de codificação consistente" e "TypeCecking".Além disso, quando você está em uma equipe, compartilhar as mesmas práticas se torna realmente importante.Confira isso [Diretrizes do projeto JavaScript](https://github.com/wearehive/project-guidelines) por exemplo.
-## Testing - Jest + Enzyme
+## Testando - Jest + Enzyme
-[Jest](http://facebook.github.io/jest/) is a testing library by Facebook that aims to make the process of testing pain-free. As with Facebook projects, it provides a great development experience out of the box. Tests can be run in parallel resulting in shorter duration. During watch mode, by default, only the tests for the changed files are run. One particular feature we like is "Snapshot Testing". Jest can save the generated output of your React component and Redux state and save it as serialized files, so you wouldn't have to manually come up with the expected output yourself. Jest also comes with built-in mocking, assertion and test coverage. One library to rule them all!
+[Jest](http://facebook.github.io/jest/) é uma biblioteca de testes do Facebook que visa tornar o processo de teste sem dor.Como nos projetos do Facebook, ele oferece uma ótima experiência de desenvolvimento pronta para uso.Os testes podem ser executados em paralelo, resultando em menor duração.Durante o modo de relógio, por padrão, apenas os testes para os arquivos alterados são executados.Um recurso específico que gostamos é "Teste de instantâneo".O JEST pode salvar a saída gerada do seu componente React e Redux State e salvá -lo como arquivos serializados, para que você não precise criar manualmente a saída esperada.O JEST também vem com mancais embutidos, afirmação e cobertura de teste.Uma biblioteca para governar todos eles!
-React comes with some testing utilities, but [Enzyme](http://airbnb.io/enzyme/) by Airbnb makes it easier to generate, assert, manipulate and traverse your React components' output with a jQuery-like API. It is recommended that Enzyme be used to test React components.
+O React vem com alguns utilitários de teste, mas [Enzyme](http://airbnb.io/enzyme/) O Airbnb facilita a geração, a reivindicação, a manipulação e a interrupção da saída dos componentes do seu React com uma API do tipo jQuery.Recomenda -se que a enzima seja usada para testar os componentes do React.
-Jest and Enzyme makes writing front end tests fun and easy. When writing tests becomes enjoyable, developers write more tests. It also helps that React components and Redux actions/reducers are relatively easy to test because of clearly defined responsibilities and interfaces. For React components, we can test that given some `props`, the desired DOM is rendered, and that callbacks are fired upon certain simulated user interactions. For Redux reducers, we can test that given a prior state and an action, a resulting state is produced.
+Jest e Enzyme tornam os testes de front -end da escrita divertidos e fáceis.Ao escrever testes, os desenvolvedores escrevem mais testes.Também ajuda a reagir componentes e ações/redutores reduxantes são relativamente fáceis de testar devido a responsabilidades e interfaces claramente definidas.Para os componentes do React, podemos testar isso com alguns `props`,O DOM desejado é renderizado e que os retornos de chamada são disparados sobre certas interações simuladas do usuário.Para redutores Redux, podemos testar que, dado um estado anterior e uma ação, um estado resultante é produzido.
-The documentation for Jest and Enzyme are pretty concise, and it should be sufficient to learn them by reading it.
+A documentação para Jest e Enzyme é bastante concisa e deve ser suficiente aprendê -los lendo -a.
-**Estimated Duration: 2-3 days.** Try writing Jest + Enzyme tests for your React + Redux app!
+**Duração estimada: 2-3 dias.** Tente escrever testes de jest + enzimas para o seu aplicativo REACT + Redux!
-#### Study Links
+#### Links de estudo
-- [Jest Homepage](http://facebook.github.io/jest/)
-- [Testing React Applications with Jest](https://auth0.com/blog/testing-react-applications-with-jest/)
-- [Enzyme Homepage](http://airbnb.io/enzyme/)
-- [Enzyme: JavaScript Testing utilities for React](https://medium.com/airbnb-engineering/enzyme-javascript-testing-utilities-for-react-a417e5e5090f)
+- [Jest Pagina inicial](http://facebook.github.io/jest/)
+- [Testando aplicativos de reação com JEST](https://auth0.com/blog/testing-react-applications-with-jest/)
+- [Enzyme Pagina inicial](http://airbnb.io/enzyme/)
+- [Enzyme: Utilitários de teste de javascript para reagir](https://medium.com/airbnb-engineering/enzyme-javascript-testing-utilities-for-react-a417e5e5090f)
-#### Alternatives
+#### Alternativas
- [AVA](https://github.com/avajs/ava)
- [Karma](https://karma-runner.github.io/)
-## Linting JavaScript - ESLint
+## JavaScript - Eslint
-A linter is a tool to statically analyze code and finds problems with them, potentially preventing bugs/runtime errors and at the same time, enforcing a coding style. Time is saved during pull request reviews when reviewers do not have to leave nitpicky comments on coding style. [ESLint](http://eslint.org/) is a tool for linting JavaScript code that is highly extensible and customizable. Teams can write their own lint rules to enforce their custom styles. At Grab, we use Airbnb's [`eslint-config-airbnb`](https://www.npmjs.com/package/eslint-config-airbnb) preset, that has already been configured with the common good coding style in the [Airbnb JavaScript style guide](https://github.com/airbnb/javascript).
+Um Linter é uma ferramenta para analisar estaticamente o código e encontra problemas com eles, potencialmente impedindo erros de bugs/tempo de execução e, ao mesmo tempo, aplicando um estilo de codificação.O tempo é salvo durante as críticas de solicitação de tração quando os revisores não precisam deixar comentários nitpicky sobre o estilo de codificação. [ESLint](http://eslint.org/) é uma ferramenta para revestir o código JavaScript que é altamente extensível e personalizável.As equipes podem escrever suas próprias regras de lint para fazer cumprir seus estilos personalizados. No Grab, usamos o Airbnb's [`eslint-config-airbnb`](https://www.npmjs.com/package/eslint-config-airbnb) predefinido, que já foi configurado com o estilo de codificação comum de bom [Guia de estilo JavaScript do Airbnb](https://github.com/airbnb/javascript).
-For the most part, using ESLint is as simple as tweaking a configuration file in your project folder. There's nothing much to learn about ESLint if you're not writing new rules for it. Just be aware of the errors when they surface and Google it to find out the recommended style.
+Na maioria das vezes, o uso de ESLint é tão simples quanto ajustar um arquivo de configuração na pasta do projeto.Não há muito o que aprender sobre Eslint se você não estiver escrevendo novas regras para isso.Esteja ciente dos erros quando eles aparecem e pesquisam no Google para descobrir o estilo recomendado.
-**Estimated Duration: 1/2 day.** Nothing much to learn here. Add ESLint to your project and fix the linting errors!
+**Duração estimada: 1/2 dia.** Nada muito para aprender aqui.Adicione Eslint ao seu projeto e corrija os erros de linha!
-#### Study Links
+#### Links de estudo
-- [ESLint Homepage](http://eslint.org/)
-- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
+- [ESLint Pagina inicial](http://eslint.org/)
+- [Guia de estilo JavaScript do Airbnb](https://github.com/airbnb/javascript)
-#### Alternatives
+#### Alternativas
-- [Standard](https://github.com/standard/standard)
+- [Padrão](https://github.com/standard/standard)
- [JSHint](http://jshint.com/)
- [XO](https://github.com/xojs/xo)
-## Linting CSS - stylelint
+## CSS de linha - Stylelint
-As mentioned earlier, good CSS is notoriously hard to write. Usage of static analysis tools on CSS can help to maintain our CSS code quality and coding style. For linting CSS, we use stylelint. Like ESLint, stylelint is designed in a very modular fashion, allowing developers to turn rules on/off and write custom plugins for it. Besides CSS, stylelint is able to parse SCSS and has experimental support for Less, which lowers the barrier for most existing code bases to adopt it.
+Como mencionado anteriormente, o Good CSS é notoriamente difícil de escrever.O uso de ferramentas de análise estática no CSS pode ajudar a manter nossa qualidade de código CSS e estilo de codificação.Para o LING CSS, usamos o Stylelint.Como o Eslint, o Stylelint foi projetado de maneira muito modular, permitindo que os desenvolvedores ativem as regras e escreva plugins personalizados.Além do CSS, o Stylelint é capaz de analisar o SCSS e possui suporte experimental para menos, o que reduz a barreira para a maioria das bases de código existentes adotá -lo.
-Once you have learnt ESLint, learning stylelint would be effortless considering their similarities. stylelint is currently being used by big companies like [Facebook](https://code.facebook.com/posts/879890885467584/improving-css-quality-at-facebook-and-beyond/), [Github](https://github.com/primer/stylelint-config-primer) and [Wordpress](https://github.com/WordPress-Coding-Standards/stylelint-config-wordpress).
+Depois de aprender Eslint, o aprendizado de Stylelint seria fácil, considerando suas semelhanças.Stylelint está atualmente sendo usado por grandes empresas como [Facebook](https://code.facebook.com/posts/879890885467584/improving-css-quality-at-facebook-and-beyond/), [Github](https://github.com/primer/stylelint-config-primer) e [Wordpress](https://github.com/WordPress-Coding-Standards/stylelint-config-wordpress).
-One downside of stylelint is that the autofix feature is not fully mature yet, and is only able to fix for a limited number of rules. However, this issue should improve with time.
+Uma desvantagem do Stylelint é que o recurso Autofix ainda não está totalmente maduro e só pode corrigir um número limitado de regras.No entanto, esse problema deve melhorar com o tempo.
-**Estimated Duration: 1/2 day.** Nothing much to learn here. Add stylelint to your project and fix the linting errors!
+**Duração estimada: 1/2 dia.** Nada muito para aprender aqui.Adicione o Stylelint ao seu projeto e corrija os erros de linha!
-#### Study Links
+#### Links de estudo
-- [stylelint Homepage](https://stylelint.io/)
-- [Lint your CSS with stylelint](https://css-tricks.com/stylelint/)
+- [stylelint Pagina inicial](https://stylelint.io/)
+- [Lint seu CSS com Stylelint](https://css-tricks.com/stylelint/)
-#### Alternatives
+#### Alternativas
- [Sass Lint](https://github.com/sasstools/sass-lint)
- [CSS Lint](http://csslint.net/)
-## Formatting Code - Prettier
+## Código de formatação - mais bonito
-Another tool for enforcing consistent coding style for JavaScript and CSS is [Prettier](https://github.com/prettier/prettier).
+Outra ferramenta para impor estilo de codificação consistente para JavaScript e CSS é [Prettier](https://github.com/prettier/prettier).
-In most cases, it is recommended to setup Prettier on top of ESLint and stylelint and integrate it into the workflow. This allows the code to be formatted into consistent style automatically via commit hooks, so that developers do not need to spend time formatting the coding style manually.
+Na maioria dos casos, é recomendável configurar Prettier no topo de ESLint e Stylelint, integrem -o ao fluxo de trabalho.Isso permite que o código seja formatado em estilo consistente automaticamente por meio de ganchos de comprometimento, para que os desenvolvedores não precisem gastar tempo formatando o estilo de codificação manualmente.
-Note that Prettier only enforces coding style, but does not check for logic errors in the code. Hence it is not a replacement for linters.
+Observe que o Prettier aplica apenas o estilo de codificação, mas não verifica erros lógicos no código.Portanto, não é um substituto para os liners.
-**Estimated Duration: 1/2 day.** Nothing much to learn here. Add Prettier to your project and add hooks to enforce the coding style!
+**Duração estimada: 1/2 dia.** Nada muito para aprender aqui. Adicione Prettier ao seu projeto e adicione ganchos para aplicar o estilo de codificação!
-#### Study Links
+#### Links de estudo
-- [Prettier Homepage](https://prettier.io/)
-- [Prettier GitHub repo](https://github.com/prettier/prettier)
-- [Comparison between tools that allow you to use ESLint and Prettier together](https://gist.github.com/yangshun/318102f525ec68033bf37ac4a010eb0c)
+- [Prettier Pagina inicial](https://prettier.io/)
+- [Prettier GitHub repositório](https://github.com/prettier/prettier)
+- [Comparação entre ferramentas que permitem usar ESLint e Prettier juntas](https://gist.github.com/yangshun/318102f525ec68033bf37ac4a010eb0c)
-## Types - Flow
+## Tipos - Flow
-Static typing brings about many benefits when writing apps. They can catch common bugs and errors in your code early. Types also serve as a form of documentation for your code and improves the readability of your code. As a code base grows larger, we see the importance of types as they gives us greater confidence when we do refactoring. It is also easier to onboard new members of the team to the project when it is clear what kind of values each object holds and what each function expects.
+A digitação estática traz muitos benefícios ao escrever aplicativos.Eles podem capturar bugs e erros comuns em seu código mais cedo.Os tipos também servem como uma forma de documentação para o seu código e melhora a legibilidade do seu código.À medida que uma base de código aumenta, vemos a importância dos tipos, pois eles nos dão maior confiança quando refatoramos.Também é mais fácil a bordo de novos membros da equipe para o projeto quando fica claro que tipo de valores cada objeto mantém e o que cada função espera.
-Adding types to your code comes with the trade-off of increased verbosity and a learning curve of the syntax. But this learning cost is paid upfront and amortized over time. In complex projects where the maintainability of the code matters and the people working on it change over time, adding types to the code brings about more benefits than disadvantages.
+A adição de tipos ao seu código vem com a troca de aumento da verbosidade e uma curva de aprendizado da sintaxe.Mas esse custo de aprendizado é pago antecipadamente e amortizado ao longo do tempo.Em projetos complexos em que a manutenção dos assuntos do código e das pessoas que trabalham nele mudam com o tempo, a adição de tipos ao código traz mais benefícios do que as desvantagens.
-Recently, I had to fix a bug in a code base that I haven’t touched in months. It was thanks to types that I could easily refresh myself on what the code was doing, and gave me confidence in the fix I made.
+Recentemente, tive que consertar um bug em uma base de código que não toquei há meses.Foi graças aos tipos que eu poderia me refrescar facilmente sobre o que o código estava fazendo e me deu confiança na correção que fiz.
-The two biggest contenders in adding static types to JavaScript are [Flow](https://flow.org/) (by Facebook) and [TypeScript](https://www.typescriptlang.org/) (by Microsoft). As of date, there is no clear winner in the battle. For now, we have made the choice of using Flow. We find that Flow has a lower learning curve as compared to TypeScript and it requires relatively less effort to migrate an existing code base to Flow. Being built by Facebook, Flow has better integration with the React ecosystem out of the box. [James Kyle](https://twitter.com/thejameskyle), one of the authors of Flow, has [written](http://thejameskyle.com/adopting-flow-and-typescript.html) on a comparison between adopting Flow and TypeScript.
+Os dois maiores candidatos ao adicionar tipos estáticos ao JavaScript são [Flow](https://flow.org/) (por Facebook) and [TypeScript](https://www.typescriptlang.org/) (por Microsoft). A partir de agora, não há vencedor claro na batalha.Por enquanto, fizemos a opção de usar Flow. Nós encontramos isso Flow tem uma curva de aprendizado mais baixa em comparação com o datilografado e requer relativamente menos esforço para migrar uma base de código existente para Flow. Sendo construído pelo Facebook,Flow tem melhor integração com o ecossistema React. [James Kyle](https://twitter.com/thejameskyle), um dos autores deFlow, tem [escrita](http://thejameskyle.com/adopting-flow-and-typescript.html) em uma comparação entre adotar Flow e TypeScript.
-Anyway, it is not extremely difficult to move from Flow to TypeScript as the syntax and semantics are quite similar, and we will re-evaluate the situation in time to come. After all, using one is better than not using any at all.
+Enfim, não é extremamente difícil passar de Flow O TypeScript como sintaxe e semântica são bastante semelhantes, e reavaliaremos a situação a tempo que está por vir.Afinal, usar um é melhor do que não usar nenhum.
-Flow recently revamped their homepage and it's pretty neat now!
+O Flow recentemente renovou sua página inicial e está muito legal agora!
-**Estimated Duration: 1 day.** Flow is pretty simple to learn as the type annotations feel like a natural extension of the JavaScript language. Add Flow annotations to your project and embrace the power of type systems.
+**Duração estimada: 1 dia.** O Flow é bastante simples de aprender, pois as anotações de tipo parecem uma extensão natural da linguagem JavaScript.Adicione as anotações de fluxo ao seu projeto e adote o poder dos sistemas de tipo.
-#### Study Links
+#### Links de estudo
-- [Flow Homepage](https://flow.org/)
+- [Flow Pagina inicial](https://flow.org/)
- [TypeScript vs Flow](https://github.com/niieani/typescript-vs-flowtype)
-#### Alternatives
+#### Alternativas
- [TypeScript](https://www.typescriptlang.org/)
-## Build System - webpack
+## Sistema de construção - webpack
-This part will be kept short as setting up webpack can be a tedious process and might be a turn-off to developers who are already overwhelmed by the barrage of new things they have to learn for front end development. In a nutshell, [webpack](https://webpack.js.org/) is a module bundler that compiles a front end project and its dependencies into a final bundle to be served to users. Usually, projects will already have the webpack configuration set up and developers rarely have to change it. Having an understanding of webpack is still a good to have in the long run. It is due to webpack that features like hot reloading and CSS modules are made possible.
+Essa parte será mantida curta, pois a configuração do WebPack pode ser um processo tedioso e pode ser um desvio para os desenvolvedores que já estão impressionados com a enxurrada de coisas novas que eles têm para aprender para o desenvolvimento do front end.Em poucas palavras, [webpack](https://webpack.js.org/) é um pacote de módulo que compila um projeto de front -end e suas dependências em um pacote final a ser servido aos usuários.Geralmente, os projetos já têm a configuração do WebPack e os desenvolvedores raramente precisam alterá -la.Ter um entendimento do Webpack ainda é bom ter a longo prazo.É devido aos webpack que recursos como recarregamento a quente e módulos CSS são possíveis.
-We have found the [webpack walkthrough](https://survivejs.com/webpack/foreword/) by SurviveJS to be the best resource on learning webpack. It is a good complement to the official documentation and we recommend following the walkthrough first and referring to the documentation later when the need for further customization arises.
+Nós encontramos o [webpack walkthrough](https://survivejs.com/webpack/foreword/) por surviveJs ser o melhor recurso para aprender webpack. É um bom complemento para a documentação oficial e recomendamos seguir o passo a passo primeiro e se referir à documentação posteriormente, quando surgir a necessidade de maior personalização.
-**Estimated Duration: 2 days (Optional).**
+**Duração estimada: 2 dias (Opcional).**
-#### Study Links
+#### Links de estudo
-- [webpack Homepage](https://webpack.js.org/)
-- [SurviveJS - Webpack: From apprentice to master](https://survivejs.com/webpack/foreword/)
+- [webpack Pagina inicial](https://webpack.js.org/)
+- [SurviveJS - Webpack: Do aprendiz ao mestre](https://survivejs.com/webpack/foreword/)
-#### Alternatives
+#### Alternativas
- [Rollup](https://rollupjs.org/)
- [Browserify](http://browserify.org/)
- [Parcel](https://parceljs.org/)
-## Package Management - Yarn
+## Gerenciamento de pacotes - Yarn
-If you take a peek into your `node_modules` directory, you will be appalled by the number of directories that are contained in it. Each babel plugin, lodash function, is a package on its own. When you have multiple projects, these packages are duplicated across each project and they are largely similar. Each time you run `npm install` in a new project, these packages are downloaded over and over again even though they already exist in some other project in your computer.
+Se você dar uma olhada em seu `node_modules` Diretório, você ficará chocado com o número de diretórios que estão contidos nele.Cada plug -in Babel, função do Lodash, é um pacote por conta própria.Quando você tem vários projetos, esses pacotes são duplicados em cada projeto e são amplamente semelhantes.Cada vez que você executa `npm install` em um novo projeto, esses pacotes são baixados repetidamente, mesmo que já existam em algum outro projeto no seu computador.
-There was also the problem of non-determinism in the installed packages via `npm install`. Some of our CI builds fail because at the point of time when the CI server installs the dependencies, it pulled in minor updates to some packages that contained breaking changes. This would not have happened if library authors respected [semver](http://semver.org/) and engineers did not assume that API contracts would be respected all the time.
+Havia também o problema do não determinismo nos pacotes instalados via `npm install`. Algumas de nossas compilações de IC falham porque, no momento em que o servidor CI instala as dependências, ele puxou atualizações menores para alguns pacotes que continham mudanças de ruptura.Isso não teria acontecido se os autores da biblioteca respeitassem [semver](http://semver.org/) E os engenheiros não assumiram que os contratos da API seriam respeitados o tempo todo.
-[Yarn](https://yarnpkg.com/) solves these problems. The issue of non-determinism of installed packages is handled via a `yarn.lock` file, which ensures that every install results in the exact same file structure in `node_modules` across all machines. Yarn utilizes a global cache directory within your machine, and packages that have been downloaded before do not have to be downloaded again. This also enables offline installation of dependencies!
+[Yarn](https://yarnpkg.com/) resolve esses problemas.A questão do não determinismo dos pacotes instalados é tratada por meio de um`yarn.lock` arquivo, que garante que cada instalação resulte na mesma estrutura de arquivo em `node_modules` em todas as máquinas.O YARN utiliza um diretório de cache global em sua máquina e pacotes que foram baixados antes não precisam ser baixados novamente.Isso também permite a instalação offline de dependências!
-The most common Yarn commands can be found [here](https://yarnpkg.com/en/docs/usage). Most other yarn commands are similar to the `npm` equivalents and it is fine to use the `npm` versions instead. One of our favorite commands is `yarn upgrade-interactive` which makes updating dependencies a breeze especially when the modern JavaScript project requires so many dependencies these days. Do check it out!
+Os comandos de fios mais comuns podem ser encontrados [aqui](https://yarnpkg.com/en/docs/usage). A maioria dos outros comandos de fios são semelhantes aos `npm` equivalentes e é bom usar o `npm` versões em vez disso.Um dos nossos comandos favoritos é `yarn upgrade-interactive` O que torna a atualização de dependências é uma brisa, especialmente quando o moderno projeto JavaScript requer tantas dependências atualmente.Confira!
-npm@5.0.0 was [released in May 2017](https://github.com/npm/npm/releases/tag/v5.0.0) and it seems to address many of the issues that Yarn aims to solve. Do keep an eye on it!
+npm@5.0.0 was [Lançado em maio de 2017](https://github.com/npm/npm/releases/tag/v5.0.0) E parece abordar muitos dos problemas que o YARN pretende resolver.Fique de olho nisso!
-**Estimated Duration: 2 hours.**
+**Duração estimada: 2 horas.**
-#### Study Links
+#### Links de estudo
-- [Yarn Homepage](https://yarnpkg.com/)
-- [Yarn: A new package manager for JavaScript](https://code.facebook.com/posts/1840075619545360)
+- [Yarn Pagina inicial](https://yarnpkg.com/)
+- [Yarn: Um novo gerente de pacotes para JavaScript](https://code.facebook.com/posts/1840075619545360)
-#### Alternatives
+#### Alternativas
-- [Good old npm](https://github.com/npm/npm/releases/tag/v5.0.0)
+- [Bom e velho NPM](https://github.com/npm/npm/releases/tag/v5.0.0)
-## Continuous Integration
+## Integração contínua
-We used [Travis CI](https://travis-ci.com/) for our continuous integration (CI) pipeline. Travis is a highly popular CI on Github and its [build matrix](https://docs.travis-ci.com/user/customizing-the-build#Build-Matrix) feature is useful for repositories which contain multiple projects like Grab's. We configured Travis to do the following:
+Nós costumavamos [Travis CI](https://travis-ci.com/) para nosso pipeline de integração contínua (IC).Travis é um IC altamente popular no Github e seu [construir matriz](https://docs.travis-ci.com/user/customizing-the-build#Build-Matrix) o recurso é útil para repositórios que contêm vários projetos como o Grab's.Configuramos Travis para fazer o seguinte:
-- Run linting for the project.
-- Run unit tests for the project.
-- If the tests pass:
- - Test coverage generated by Jest is uploaded to [Codecov](https://codecov.io/).
- - Generate a production bundle with webpack into a `build` directory.
- - `tar` the `build` directory as `1. This can be solved via webpack code splitting. ↩
+1. Isso pode ser resolvido via Webpack Code Sclitting. ↩
-2. Universal JS to the rescue! ↩
+2. Universal JS para o resgate! ↩