You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README-pt-Br.md
+14-14
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ Ao decorrer deste documento, Eu irei assumir que você já criou uma página web
10
10
11
11
## Por que você deveria me ouvir?
12
12
13
-
Há toneladas de conselhos conflitantes sobre o React por aí; Por que me ouvir?
13
+
Há toneladas de conselhos conflitantes sobre o React por aí. Por que me ouvir?
14
14
15
15
Eu fui um dos membros do time original do Facebook que construiu e disponibilizou o React como open-source. Eu não estou mais no Facebook e agora estou em uma pequena startup, logo eu tenho uma perspectiva diferente do Facebook.
16
16
@@ -30,7 +30,7 @@ Você deveria aprender, nessa ordem, **sem pular etapas ou estudar ao mesmo temp
30
30
**Você não precisa aprender tudo isso para ser produtivo com React**
31
31
Apenas vá para o próximo passo se você tiver algum problema que precisa ser resolvido.
32
32
33
-
Adicionalmente, têm alguns tópicos que são frequentemente mencionados na comunidade do React que são "Era sangrenta". Os tópicos abaixo são interessantes, mas eles são difíceis de entender, são, de longe, menos populares que os tópicos acima e **não são requeridos para a maioria dos apps**.
33
+
Adicionalmente, têm alguns tópicos que são frequentemente mencionados na comunidade do React que são "Era sangrenta". Os tópicos abaixo são interessantes, mas eles são difíceis de entender, e são, de longe, menos populares que os tópicos acima e **não são requeridos para a maioria dos apps**.
34
34
*[Inline styles](#learning-inline-styles)
35
35
*[Server rendering](#learning-server-rendering)
36
36
*[Immutable.js](#learning-immutablejs)
@@ -45,17 +45,17 @@ Eu ainda acho que a forma mais fácil para aprender React é o [tutorial oficial
45
45
46
46
## Aprendendo `npm`
47
47
48
-
`npm` é o gerenciador de pacote Node.js(**N**ode.js **P**ackage **M**anager) e é a forma mais popular que engenheiros, designers e desenvolvedores front-end compartilhar código JavaScript. Isso inclui um sistema modular chamado `CommonJS` e permite você instalar ferramentas em linha de comando escritas em JavaScript. Leia [esse post](http://0fps.net/2013/01/22/commonjs-why-and-how/) para entender por que `CommonJS` é necessário para navegadores (browsers), ou o [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) para mais informações da API do `CommonJS`.
48
+
`npm` é o gerenciador de pacote Node.js(**N**ode.js **P**ackage **M**anager) e é a forma mais popular que engenheiros, designers e desenvolvedores front-end compartilhar código JavaScript. Isso inclui um sistema modular chamado `CommonJS` e permite você instalar ferramentas na linha de comando escritas em JavaScript. Leia [esse post](http://0fps.net/2013/01/22/commonjs-why-and-how/) para entender por que `CommonJS` é necessário para navegadores (browsers), ou o [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) para mais informações da API do `CommonJS`.
49
49
50
50
A Maioria dos componentes reutilizáveis, bibliotecas e ferramentas do ecossistema do React estão dispiníveis como módulos `CommonJS` e são instalados com `npm`.
51
51
52
52
## Aprendendo JavaScript bundlers (empacotadores)
53
53
54
-
Para um número de boas razões técnicas, módulos `CommonJS` (ex: tudo no `npm`) não pode ser usado nativamente no browser. Você precisa de um "empacotador" JavaScript para "empacotar" esses módulos dentro de arquivos `.js` que você pode incluir na sua página web com a tag `<script>`
54
+
Para um bom número de boas razões técnicas, módulos `CommonJS` (ex: tudo no `npm`) não pode ser usado nativamente no browser. Você precisa de um "empacotador" JavaScript para "empacotar" esses módulos dentro de arquivos `.js` que você pode incluir na sua página web com a tag `<script>`
55
55
56
-
Exemplos de empacotadores JavaScript são `webpack` e `browserify`. Ambos são boas escolhar, mas eu prefiro `webpack` pois possue funcionalidades que fazem o desenvolvimento muito mais fácil. Mesmo a documentação sendo confusa, eu tenho um [plug-and-play template para começar](https://github.com/petehunt/react-webpack-template) e eu escrevi um guia webpack [como-fazer](https://github.com/petehunt/webpack-howto) para casos mais complexos.
56
+
Exemplos de empacotadores JavaScript são `webpack` e `browserify`. Ambos são boas escolhas, mas eu prefiro `webpack` pois possue funcionalidades que fazem o desenvolvimento muito mais fácil. Mesmo a documentação sendo confusa, eu tenho um [plug-and-play template para começar](https://github.com/petehunt/react-webpack-template) e eu escrevi um guia webpack [como-fazer](https://github.com/petehunt/webpack-howto) para casos mais complexos.
57
57
58
-
Uma coisa para manter em mente: `CommonJS`usa a função `require()` para importar módulos, então muitas pessoas ficam confusas e pensam que tem algo haver com o projeto chamado `require.js`. Para um número de razões tecnicas, eu gostaria de sugerir que você evitasse `require.js`. Ele também não é muito popular no ecossistema do React.
58
+
Uma coisa para manter em mente: `CommonJS`usa a função `require()` para importar módulos, então muitas pessoas ficam confusas e pensam que tem algo haver com o projeto chamado `require.js`. Para um bom número de razões tecnicas, eu gostaria de sugerir que você evitasse `require.js`. Ele também não é muito popular no ecossistema do React.
59
59
60
60
61
61
## Aprendendo ES6
@@ -68,7 +68,7 @@ Talvez você tenha ouvido que classes ES6 são preferidas para criar componentes
68
68
69
69
## Aprendendo routing (fazer rotas)
70
70
71
-
“Single-page applications” (Aplicações de uma única página) são os objetivos nos dias de hoje. São páginas web que carregam apenas uma vez, e quando o usuário clica em um link ou em um botão, O JavaScript compilando na página atualiza a barra de endereço, mas a página web não é atualizada. O gerenciamento da barra de endereço é feito por algo chamado **router** (roteador).
71
+
“Single-page applications” (Aplicações de uma única página) são os objetivos nos dias de hoje. São páginas web que carregam apenas uma vez, e quando o usuário clica em um link ou em um botão, o JavaScript compila a página e atualiza a barra de endereço, mas a página web não é atualizada. O gerenciamento da barra de endereço é feito por algo chamado **router** (roteador).
72
72
73
73
O roteador mais popular no ecosistema do React é [react-router](https://github.com/rackt/react-router). Se você está construindo uma single-page application, utilize isso a não ser que você tenha uma boa razão para não fazer.
74
74
@@ -78,23 +78,23 @@ O roteador mais popular no ecosistema do React é [react-router](https://github.
78
78
79
79
Você provavelmente já ouviu falar sobre "head" do Flux. Tem uma *tonelada* de mal entendidos sobre Flux por aí.
80
80
81
-
Muita gente começa a cosntruir um app e gostaria de definir seu próprio modelo de dados, e pensam que precisam usar Flux para fazer isso. **Assim é uma forma errada de adotar o Flux. O Flux só deveria ser adicionado quando muitos componentes já foram cosntruídos.**
81
+
Muita gente começa a construir um app e gostaria de definir seu próprio modelo de dados, e pensam que precisam usar Flux para fazer isso. **Assim é uma forma errada de adotar o Flux. O Flux só deveria ser adicionado quando muitos componentes já foram cosntruídos.**
82
82
83
-
Os componentes React são arranjados em hierarquia. A maioria das vezes, seu modelo de dados também segue uma hierarquia. Nessa situação o Flux te adiciona muita coisa. As vezes não há hierarquia no seu modelo de dados. Quando seus componentes React começam a receber `props` (propriedades) que parecem estranhos, ou você possue um pequeno número de componentes começando a ficar muito complexo, talvez você queira dar uma olhada no Flux.
83
+
Os componentes React são arranjados em hierarquia. A maioria das vezes, seu modelo de dados também segue uma hierarquia. Nessa situação o Flux te adiciona muita coisa. As vezes não há hierarquia no seu modelo de dados. Quando seus componentes React começam a receber `props` (propriedades) que parecem estranhas, ou você possue um pequeno número de componentes começando a ficar muito complexo, talvez você queira dar uma olhada no Flux.
84
84
85
-
**Você saberá quando precisará do Flux. Se você não está certo se precis disso, você realmente não precisa disso.**
85
+
**Você saberá quando precisará do Flux. Se você não está certo se precisa disso, você realmente não precisa disso.**
86
86
87
-
Se você decidiu usar Flux, a biblioteca mais popular e melhor documentada é [Redux](http://redux.js.org/). Há *muitas* outras alternativas por aí, e você ficará tentado para avalizar a maioria deles, mas meu conselho é para você ficar apenas no mais popular.
87
+
Se você decidiu usar Flux, a biblioteca mais popular e melhor documentada é [Redux](http://redux.js.org/). Há *muitas* outras alternativas por aí, e você ficará tentado a avalizar a maioria deles, mas meu conselho é para você ficar apenas no mais popular.
88
88
89
89
## Aprendendo inline styles
90
90
91
-
Pre-React, muita gente reutiliza estilos de CSS com complicados processadores de style sheets (folhas de estilo) como SASS. Como React faz escritas de componentes reutilizáveis facilmente, sua folha de estilo pode ser menos complicada. A maioria da comunidade (me incluindo) estão esperimentando se livrar de folhas de estilos altogether (tudo em uma só).
91
+
Antes do React, muita gente reutiliza estilos de CSS com complicados processadores de style sheets (folhas de estilo) como SASS. Como React faz escritas de componentes reutilizáveis facilmente, sua folha de estilo pode ser menos complicada. A maioria da comunidade (me incluindo) estão esperimentando se livrar de folhas de estilos altogether (tudo em uma só).
92
92
93
93
Essa é uma idéia bastante louca por bom número de razões. Faz com que media queries fiquem mais difíceis, e é possível que tenha uma limitação ao usar essa técnica. **Quando começando com React, apenas coloque estilho nas coisas como você geralmente faria.**
94
94
95
-
Uma vez que você tenha idéia de como React funciona, você pode olhar por técnicas alternativas. Uma bem popular é [BEM](https://en.bem.info/). Eu recomendo você descartar seu pré-processador de CSS, já que React disponibiliza uma forma mair poderosa de reusar styles (reutilizando componentes), e o seu empacotador JavaScript pode gerar folhas de estilo mais eficientes pra você (Eu te dou [um exemplo sobre isso no OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Dito isso, React, como toda biblioteca JavaScript, funcionará bem com um pré-processador CSS.
95
+
Uma vez que você já tem idéia de como React funciona, você pode olhar por técnicas alternativas. Uma bem popular é [BEM](https://en.bem.info/). Eu recomendo você descartar seu pré-processador de CSS, já que React disponibiliza uma forma mais poderosa de reusar styles (reutilizando componentes), e o seu empacotador JavaScript pode gerar folhas de estilo mais eficientes pra você (Eu te dou [um exemplo sobre isso no OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Dito isso, React, como toda biblioteca JavaScript, funcionará bem com um pré-processador CSS.
96
96
97
-
Alternativamente, você tabmém pode usar [Módulos CSS](http://glenmaddern.com/articles/css-modules), mais especificamente [react-css-modules](https://github.com/gajus/react-css-modules). Com módulos CSS você ainda escreverá CSS (ou SASS/LESS/Stylus), mas você pode gereciar e cazer seus arquivos CSS como você faria inline styles no React. E você não precisará se preocupar em gerenciar o nomde de classes usando metodologias como BEM, pois isso será cuidado sob os panos quando utilizado o sistema de módulos.
97
+
Alternativamente, você também pode usar [Módulos CSS](http://glenmaddern.com/articles/css-modules), mais especificamente [react-css-modules](https://github.com/gajus/react-css-modules). Com módulos CSS você ainda escreverá CSS (ou SASS/LESS/Stylus), mas você pode gereciar e fazer seus arquivos CSS como você faria inline styles no React. E você não precisará se preocupar em gerenciar o nom de de classes usando metodologias como BEM, pois isso será cuidado sob os panos quando utilizado o sistema de módulos.
98
98
99
99
100
100
## Aprendendo server rendering (renderização de servidor)
0 commit comments