From d2db4b969c645b1fbcb0299c3028c352e1022f6d Mon Sep 17 00:00:00 2001 From: Renan Porto Date: Wed, 17 Apr 2019 21:32:01 -0300 Subject: [PATCH 01/11] Initial translation of blog post: 2016-09-28-our-first-50000-stars --- .../blog/2016-09-28-our-first-50000-stars.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/content/blog/2016-09-28-our-first-50000-stars.md b/content/blog/2016-09-28-our-first-50000-stars.md index de9f9c822..3467b6b6b 100644 --- a/content/blog/2016-09-28-our-first-50000-stars.md +++ b/content/blog/2016-09-28-our-first-50000-stars.md @@ -1,24 +1,24 @@ --- -title: "Our First 50,000 Stars" +title: "Nossas primeiras 50,000 stars no GitHub" author: [vjeux] --- -Just three and a half years ago we open sourced a little JavaScript library called React. The journey since that day has been incredibly exciting. +Apenas três anos e meio após nós criarmos uma pequena biblioteca Javascript chamada React. A jornada desde aquele dia tem sido incrivelmente excitante. -## Commemorative T-Shirt {#commemorative-t-shirt} +## Camiseta Comemorativa {#commemorative-t-shirt} -In order to celebrate 50,000 GitHub stars, [Maggie Appleton](http://www.maggieappleton.com/) from [egghead.io](http://egghead.io/) has designed us a special T-shirt, which will be available for purchase from Teespring **only for a week** through Thursday, October 6. Maggie also wrote [a blog post](https://www.behance.net/gallery/43269677/Reacts-50000-Stars-Shirt) showing all the different concepts she came up with before settling on the final design. +Para comemorar as 50,000 stars no GitHub, [Maggie Appleton](http://www.maggieappleton.com/) do [egghead.io](http://egghead.io/) desenhou para nós uma camiseta espcial, que está disponível para compra no Teespring **somente por uma semana** até quinta feira, 06 de Outubro. Maggie também escreveu [um post](https://www.behance.net/gallery/43269677/Reacts-50000-Stars-Shirt) mostrando todos os diferentes conceitos que ela criou antes de escolher como seria o design final. React 50k Tshirt -The T-shirts are super soft using American Apparel's tri-blend fabric; we also have kids and toddler T-shirts and baby onesies available. +As camisetas são super macias usando o tecido tri-blend da American Apparel's; nós também temos para crianças, camisetas infantis e macacões para bêbês disponíveis. -* [Adult T-shirts (straight-cut and fitted)](https://teespring.com/react-50000-stars) -* [Kids T-shirts](https://teespring.com/react-50000-stars-kids) -* [Toddler T-Shirts](https://teespring.com/react-50000-stars-toddler) -* [Baby Onesies](https://teespring.com/react-50000-stars-baby) +* [Camisetas para Adultos (corte reto e ajustadas)](https://teespring.com/react-50000-stars) +* [Camisetas para crianças](https://teespring.com/react-50000-stars-kids) +* [Camisetas Infantis](https://teespring.com/react-50000-stars-toddler) +* [Camisetas para bêbês](https://teespring.com/react-50000-stars-baby) -Proceeds from the shirts will be donated to [CODE2040](http://www.code2040.org/), a nonprofit that creates access, awareness, and opportunities in technology for underrepresented minorities with a specific focus on Black and Latinx talent. +Todos os ganhos das camisetas serão doados para o [CODE2040](http://www.code2040.org/), uma organização sem fins lucrativos que cria acesso, conscientização e oportunidades em tecnologia para minorias não representadas com um foco especifico em talentos afrodescendente e latinos. ## Archeology {#archeology} From 17833e4f6d61f131ab91b32231ebeee1822090f9 Mon Sep 17 00:00:00 2001 From: Renan Porto Date: Mon, 22 Apr 2019 11:54:51 -0300 Subject: [PATCH 02/11] Translation of the topic Archeology of blog post: 2016-09-28-our-first-50000-stars --- content/blog/2016-09-28-our-first-50000-stars.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/blog/2016-09-28-our-first-50000-stars.md b/content/blog/2016-09-28-our-first-50000-stars.md index 3467b6b6b..412fc73c0 100644 --- a/content/blog/2016-09-28-our-first-50000-stars.md +++ b/content/blog/2016-09-28-our-first-50000-stars.md @@ -20,11 +20,11 @@ As camisetas são super macias usando o tecido tri-blend da American Apparel's; Todos os ganhos das camisetas serão doados para o [CODE2040](http://www.code2040.org/), uma organização sem fins lucrativos que cria acesso, conscientização e oportunidades em tecnologia para minorias não representadas com um foco especifico em talentos afrodescendente e latinos. -## Archeology {#archeology} +## Arqueologia {#archeology} -We've spent a lot of time trying to explain the concepts behind React and the problems it attempts to solve, but we haven't talked much about how React evolved before being open sourced. This milestone seemed like as good a time as any to dig through the earliest commits and share some of the more important moments and fun facts. +Nós gastamos muito tempo tentando explicar conceitos que existem atras do React e problemas que ele busca resolve, mas nós não temos falamos muito sobre como o React evoluiu antes de se tornar um projeto de código aberto. Este momento parece bom para lembrarmos os primeiros commits e compartilharmos algums dos momentos importantes e fatos engraçados. -The story begins in our ads org, where we were building incredibly sophisticated client side web apps using an internal MVC framework called [BoltJS](http://web.archive.org/web/20130608154901/http://shaneosullivan.github.io/boltjs/intro.html). Here's a sample of what some Bolt code looked like: +A história inicia com nossa organização de anuncios, onde nós estavávamos construindo aplicativos web do lado do cliente incrivelmente sofisticados utilizando um framework MVC interno chamado [BoltJS](http://web.archive.org/web/20130608154901/http://shaneosullivan.github.io/boltjs/intro.html). Aqui está um exemplo de como era um código do framework Bolt: ```js var CarView = require('javelin/core').createClass({ From f3f2f01b4f2aefbe8077949cc5edb58372cf96bf Mon Sep 17 00:00:00 2001 From: Renan Porto Date: Wed, 24 Apr 2019 11:54:26 -0300 Subject: [PATCH 03/11] Finish of the translation of the topic Archeology of blog post: 2016-09-28-our-first-50000-stars --- content/blog/2016-09-28-our-first-50000-stars.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/blog/2016-09-28-our-first-50000-stars.md b/content/blog/2016-09-28-our-first-50000-stars.md index 412fc73c0..deff51575 100644 --- a/content/blog/2016-09-28-our-first-50000-stars.md +++ b/content/blog/2016-09-28-our-first-50000-stars.md @@ -60,9 +60,9 @@ car.placeIn(document.body); // ``` -Bolt introduced a number of APIs and features that would eventually make their way into React including `render`, `createClass`, and `refs`. Bolt introduced the concept of `refs` as a way to create references to nodes that can be used imperatively. This was relevant for legacy interoperability and incremental adoption, and while React would eventually strive to be a lot more functional, `refs` proved to be a very useful way to break out of the functional paradigm when the need arose. +Boltz introduziu um número de APIs e recursos que acabariam eventualmente entrando no React, incluindo o método `render`, `createClass`, e `refs`. Bolt introduziu o conceito de `refs` como uma forma de criar referencias para nós que podem ser utilizados imperativamente. Está maneira foi relevante para a interoperabilidade herdada e a adoção incremental, e enquanto o React o React se esforça para ser tornar muito mais funcional, `refs` provou ser uma forma útil de sair do paradigma funcional quando surgir a necessidade. -But as our applications grew more and more sophisticated, our Bolt codebases got pretty complicated. Recognizing some of the framework's shortcomings, [Jordan Walke](https://twitter.com/jordwalke) started experimenting with a side-project called [FaxJS](https://github.com/jordwalke/FaxJs). His goal was to solve many of the same problems as Bolt, but in a very different way. This is actually where most of React's fundamentals were born, including props, state, re-evaluating large portions of the tree to “diff” the UI, server-side rendering, and a basic concept of components. +Porém como nossas aplicações cresceram mais e ficaram mais sofisticadas, nossas base de códigos do Bolt se tornaram complicadas. Reconhecendo algumas deficiências da estrutura, [Jordan Walke](https://twitter.com/jordwalke) iniciou experimentos em um projeto paralelo chamado [FaxJS](https://github.com/jordwalke/FaxJs). Seu objetivo foi resolver muitos dos problemas existentes no Bolt, mas de uma forma diferente. Este é o lugar onde a maioria dos fundamentos do React nasceu, incluindo `props`, `state`, reavaliando grandes partes da árvore para "diferenciar" a interface do usuário, a renderização do lado do servidor e conceitos básicos de componente. ```js TestProject.PersonDisplayer = { From a6d0f142eed6b22cfc7e9b1bf7436eb1202f3a74 Mon Sep 17 00:00:00 2001 From: Renan Porto Date: Wed, 8 May 2019 21:10:13 -0300 Subject: [PATCH 04/11] Translation of the topic Fbolt is Born of blog post: 2016-09-28-our-first-50000-stars --- content/blog/2016-09-28-our-first-50000-stars.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/content/blog/2016-09-28-our-first-50000-stars.md b/content/blog/2016-09-28-our-first-50000-stars.md index deff51575..bd823a2f9 100644 --- a/content/blog/2016-09-28-our-first-50000-stars.md +++ b/content/blog/2016-09-28-our-first-50000-stars.md @@ -81,20 +81,18 @@ TestProject.PersonDisplayer = { }; ``` -## FBolt is Born {#fbolt-is-born} +## Nasce o FBolt {#fbolt-is-born} -Through his FaxJS experiment, Jordan became convinced that functional APIs — which discouraged mutation — offered a better, more scalable way to build user interfaces. He imported his library into Facebook's codebase in March of 2012 and renamed it “FBolt”, signifying an extension of Bolt where components are written in a functional programming style. Or maybe “FBolt” was a nod to FaxJS – he didn't tell us! ;) +Através do seu experimento FaxJS, Jordan se convence que as APIs funcionais - que desencoraja a mutação - oferece uma melhor, mais escalável forma de construir interfaces de usuários. Ele importou sua biblioteca na base de códigos do Facebook em Março de 2012 e renomeou a biblioteca para "FBolt", significando uma extensão do Bolt odne os componentes são escritos em um estilo de programação funcional. Ou talvez "Fbolt" foi uma prévia do FaxJS - ele não nos contou! ;) -The interoperability between FBolt and Bolt allowed us to experiment with replacing just one component at a time with more functional component APIs. We could test the waters of this new functional paradigm, without having to go all in. We started with the components that were clearly best expressed functionally and then we would later continue to push the boundaries of what we could express as functions. - -Realizing that FBolt wouldn't be a great name for the library when used on its own, Jordan Walke and [Tom Occhino](https://twitter.com/tomocchino) decided on a new name: “React.” After Tom sent out the diff to rename everything to React, Jordan commented: +A interoperabilidade entre FBolt e Bolt permitiu a nós experimentar a substituição de apenas um componente por vez com APIs de componentes mais funcionais. Nós poderíamos visitar as águas desse novo paradigma funcional, sem ter que entrar totalmente nele. Nós iniciamos com os componentes que estavam claramente melhor expressos funcionalmente e então continuamos depois com os demais componentes que poderíamos expressar como funções. +Percebendo que o FBolt não seria um ótimo nome para a biblioteca quando usada sozinha, Jordan Walke e [Tom Occhino](https://twitter.com/tomocchino) decidiram por um novo nome: "React." Depois de Tom ter renomeado a biblioteca inteira, Jordan comentou: > Jordan Walke: -I might add for the sake of discussion, that many systems advertise some kind of reactivity, but they usually require that you set up some kind of point-to-point listeners and won't work on structured data. This API reacts to any state or property changes, and works with data of any form (as deeply structured as the graph itself) so I think the name is fitting. - +Eu poderia acrescentar, que por uma questão de discussão, que muitos sistemas demostram algum tipo de reatividade, mas geralmente exigem que você defina algum tipo de ouvinte (listeners) ponto a ponto e não funcionará com dados estruturados. Essa API reage a qualquer alteração de estado ou propriedade, e trabalha com dados de qualquer forma (tão profundamente quanto o próprio gráfico), então acho que o nome é adequado. -Most of Tom's other commits at the time were on the first version of [GraphiQL](https://github.com/graphql/graphiql), a project which was recently open sourced. +A maioria dos outros commits de Tom na época estavam na primeira versão do [GraphiQL](https://github.com/graphql/graphiql), um projeto que recentemente teve seu código aberto. ## Adding JSX {#adding-jsx} From 4e3637bc109ec7f4cf775136834d46c2ddd80ef8 Mon Sep 17 00:00:00 2001 From: Renan Porto Date: Thu, 9 May 2019 13:45:55 -0300 Subject: [PATCH 05/11] Translation of the topic Adding JSX is Born of blog post: 2016-09-28-our-first-50000-stars --- content/blog/2016-09-28-our-first-50000-stars.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/content/blog/2016-09-28-our-first-50000-stars.md b/content/blog/2016-09-28-our-first-50000-stars.md index bd823a2f9..bf089f5d8 100644 --- a/content/blog/2016-09-28-our-first-50000-stars.md +++ b/content/blog/2016-09-28-our-first-50000-stars.md @@ -94,9 +94,9 @@ Eu poderia acrescentar, que por uma questão de discussão, que muitos sistemas A maioria dos outros commits de Tom na época estavam na primeira versão do [GraphiQL](https://github.com/graphql/graphiql), um projeto que recentemente teve seu código aberto. -## Adding JSX {#adding-jsx} +## Adicionando JSX {#adding-jsx} -Since about 2010 Facebook has been using an extension of PHP called [XHP](https://www.facebook.com/notes/facebook-engineering/xhp-a-new-way-to-write-php/294003943919/), which enables engineers to create UIs using XML literals right inside their PHP code. It was first introduced to help prevent XSS holes but ended up being an excellent way to structure applications with custom components. +Desde 2010 o Facebook está utilizando uma extensão do PHP chamada [XHP](https://www.facebook.com/notes/facebook-engineering/xhp-a-new-way-to-write-php/294003943919/), que permite engenheiros criar interfaces de usuário utilizando XML dentro de seu código PHP. Ele foi introduzido pela primeira vez para ajudar a evitar falhas XSS, porém acabou sendo uma excelente maneira para estruturas aplicações com componentes personalizados. ```js final class :a:post extends :x:element { @@ -117,7 +117,7 @@ final class :a:post extends :x:element { } ``` -Before Jordan's work had even made its way into the Facebook codebase, Adam Hupp implemented an XHP-like concept for JavaScript, written in Haskell. This system enabled you to write the following inside a JavaScript file: +Antes do trabalho de Jordan ter ser entrado na base de código do Facebook, Adam Hupp implementou um conceito semelhante ao XHP para Javascript, escrito em Haskell. Este sistema permitiu que você escrevesse o seguinte dentro de um arquivo Javascript: ```js function :example:hello(attrib, children) { @@ -130,7 +130,7 @@ function :example:hello(attrib, children) { } ``` -It would compile the above into the following normal ES3-compatible JavaScript: +Isso compilaria para um código ES3 Javascript compativel: ```js function jsx_example_hello(attrib, children) { @@ -143,8 +143,7 @@ function jsx_example_hello(attrib, children) { } ``` -In this prototype, `S.create` would immediately create and return a DOM node. Most of the conversations on this prototype revolved around the performance characteristics of `innerHTML` versus creating DOM nodes directly. At the time, it would have been less than ideal to push developers universally in the direction of creating DOM nodes directly since it did not perform as well, especially in Firefox and IE. Facebook's then-CTO [Bret Taylor](https://twitter.com/btaylor) chimed in on the discussion at the time in favor of `innerHTML` over `document.createElement`: - +Neste protótipo, `S.create` criaria e retornaria imediatamente um nó DOM. Muitas A maioria das conversas sobre este protótipo girou em torno das características de desempenho do `innerHTML` contra criar nós no DOM diretamente. Ná epoca, seria menos ideal colocar desenvolvedores universalmente na direção da criação de nós DOM diretamente, uma vez que ele não funciona tão bem, especialmente no navegador Firefox e Internet Explorer. O CTO do Facebook, [Bret Taylor](https://twitter.com/btaylor) entrou na discussão no momento em favor do `innerHTML` ao invés do `document.createElement`. > Bret Taylor: If you are not convinced about innerHTML, here is a small microbenchmark. It is about the same in Chrome. innerHTML is about 30% faster in the latest version of Firefox (much more in previous versions), and about 90% faster in IE8. From ddeafd41d83bb4cfb97f37d328b3b96bc1e740c0 Mon Sep 17 00:00:00 2001 From: Renan Porto Date: Fri, 14 Jun 2019 17:58:00 -0300 Subject: [PATCH 06/11] Finish of the translation of the topic Adding JSX of blog post: 2016-09-28-our-first-50000-stars --- .../blog/2016-09-28-our-first-50000-stars.md | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/content/blog/2016-09-28-our-first-50000-stars.md b/content/blog/2016-09-28-our-first-50000-stars.md index bf089f5d8..579dcd363 100644 --- a/content/blog/2016-09-28-our-first-50000-stars.md +++ b/content/blog/2016-09-28-our-first-50000-stars.md @@ -146,36 +146,32 @@ function jsx_example_hello(attrib, children) { Neste protótipo, `S.create` criaria e retornaria imediatamente um nó DOM. Muitas A maioria das conversas sobre este protótipo girou em torno das características de desempenho do `innerHTML` contra criar nós no DOM diretamente. Ná epoca, seria menos ideal colocar desenvolvedores universalmente na direção da criação de nós DOM diretamente, uma vez que ele não funciona tão bem, especialmente no navegador Firefox e Internet Explorer. O CTO do Facebook, [Bret Taylor](https://twitter.com/btaylor) entrou na discussão no momento em favor do `innerHTML` ao invés do `document.createElement`. > Bret Taylor: -If you are not convinced about innerHTML, here is a small microbenchmark. It is about the same in Chrome. innerHTML is about 30% faster in the latest version of Firefox (much more in previous versions), and about 90% faster in IE8. - - -This work was eventually abandoned but was revived after React made its way into the codebase. Jordan sidelined the previous performance discussions by introducing the concept of a “Virtual DOM,” though its eventual name didn't exist yet. +Se você não está convencido sobre o innerHTML, aqui está um pequeno comparativo. Isso não mudou no Chrome. innerHTML esta 30% mais rápido na última versão do Firefox (e muito mais do que nas versões anteriores), e 90% mais rápido no IE8. +Este projeto foi eventualmente abandonado, mas foi revivido depois que o React entrou na base de código. Jordan ignorou as discussões anteriores sobre performance introduzindo o conceito de “Virtual DOM,” embora este nome ainda não existisse. > Jordan Walke: -> For the first step, I propose that we do the easiest, yet most general transformation possible. My suggestion is to simply map xml expressions to function call expressions. +> Para a primeira etapa, eu proponho que nós façamos o mais fácil e mais genérico possível. Minha sugestão é simplesmente mapear expressões xml para funções de chamada. > > - `` becomes `x( )` > - `` becomes `x( {height:12} )` > - ` ` becomes `x({ childList: [y( )] })` > -> At this point, JSX doesn't need to know about React - it's just a convenient way to write function calls. Coincidentally, React's primary abstraction is the function. Okay maybe it's not so coincidental ;) - - -Adam made a very insightful comment, which is now the default way we write lists in React with JSX. +> Neste ponto, o JSX não precisa conhecer o React - isso é apenas uma forma conveniente de escrever chamadas de função. Coincidentemente, a abstração primária do React é a função. Ok, talvez isso não seja uma coincidência ;) +Adam fez um comentário muito perspizar, no qual agora é a forma padrão que nós escrevemos listas no React com JSX. > Adam Hupp: -> I think we should just treat arrays of elements as a frag. This is useful for constructs like: +> Eu penso que nós deveriamos tratar matrizes de elementos como um frag. Isso é muito útil para construções como: > > ```js >
    {foo.map(function(i) { return
  • {i.data}
    • ; })}
> ``` > -> In this case the ul(..) will get a childList with a single child, which is itself a list. +> Neste caso, ul(...) irá receber um childList com um único filho, que é uma lista. -React didn't end up using Adam's implementation directly. Instead, we created JSX by forking [js-xml-literal](https://github.com/laverdet/js-xml-literal), a side project by XHP creator Marcel Laverdet. JSX took its name from js-xml-literal, which Jordan modified to just be syntactic sugar for deeply nested function calls. +React não utilizou a implementação de Adam diretamente. Ao invés, nós criamos JSX fazendo o fork do projeto [js-xml-literal](https://github.com/laverdet/js-xml-literal), um projeto paralelo do criado do XHP, Marcel Laverdet. O JSX tomou o nome de js-xml-literal, que Jordan modificou para ser apenas um acréscimo sintático para chamadas de funções profundamente aninhadas. ## API Churn {#api-churn} From efcf0e757b2ddd63c62431aad6108a7702e6895f Mon Sep 17 00:00:00 2001 From: Renan Porto Date: Tue, 25 Jun 2019 18:39:22 -0300 Subject: [PATCH 07/11] Finish of the translation of the topic API Churn of blog post: 2016-09-28-our-first-50000-stars --- .../blog/2016-09-28-our-first-50000-stars.md | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/content/blog/2016-09-28-our-first-50000-stars.md b/content/blog/2016-09-28-our-first-50000-stars.md index 579dcd363..55849f2f4 100644 --- a/content/blog/2016-09-28-our-first-50000-stars.md +++ b/content/blog/2016-09-28-our-first-50000-stars.md @@ -175,34 +175,34 @@ React não utilizou a implementação de Adam diretamente. Ao invés, nós criam ## API Churn {#api-churn} -During the first year of React, internal adoption was growing quickly but there was quite a lot of churn in the component APIs and naming conventions: - -* `project` was renamed to `declare` then to `structure` and finally to `render`. -* `Componentize` was renamed to `createComponent` and finally to `createClass`. - -As the project was about to be open sourced, [Lee Byron](https://twitter.com/leeb) sat down with Jordan Walke, Tom Occhino and Sebastian Markbåge in order to refactor, reimplement, and rename one of React's most beloved features – the lifecycle API. Lee [came up with a well-designed API](https://gist.github.com/vjeux/f2b015d230cc1ab18ed1df30550495ed) that is still in place today. - -* Concepts - * component - a ReactComponent instance - * state - internal state to a component - * props - external state to a component - * markup - the stringy HTML-ish stuff components generate - * DOM - the document and elements within the document -* Actions - * mount - to put a component into a DOM - * initialize - to prepare a component for rendering - * update - a transition of state (and props) resulting a render. - * render - a side-effect-free process to get the representation (markup) of a component. - * validate - make assertions about something created and provided - * destroy - opposite of initialize -* Operands - * create - make a new thing - * get - get an existing thing - * set - merge into existing - * replace - replace existing - * receive - respond to new data - * force - skip checks to do action -* Notifications +Durante o primeiro ano do React, as adoções internas estavam crescendo, mas havia muita rotatividade nas APIs dos componentes e nas convenções de nomenclatura: + +* `project` foi renomeado para `declare`, depois para `structure` e finalmente para `render`. +* `Componentize` foi renomeado para `createComponent` e finalmente `createClass`. + +Como o projeto estava prestes a se tornar aberto, [Lee Byron](https://twitter.com/leeb) sentou-se com Jordan Walke, Tom Occhino e Sebastian Markbåge com o objetivo de refatorar, reimplementar e renomear, um dos recursos mais amado do React - o ciclo de vida da API. Lee [criou uma API bem projetada](https://gist.github.com/vjeux/f2b015d230cc1ab18ed1df30550495ed) que ainda está sendo utilizada hoje em dia. + +* Conceitos + * component - Uma instância de ReactComponent + * state - Estado interno de um componente + * props - Estado externo de um componente + * markup - A string/coisas HTML que o componente gera + * DOM - O documento e elementos dentro do documento +* Ações + * mount - Colocar um componente em um DOM + * initialize - Preparar um componente para renderização + * update - Uma transiçaõ de um estado (e propriedades) resultando em renderização. + * render - Um processo sem efeitos colaterais buscando ter uma representação (markup) de um componente. + * validate - Fazer validações sobre algo criado e fornecido + * destroy - Oposto de initialize +* Operações + * create - Fazer uma coisa nova + * get - Pegar uma coisa existente + * set - Fundir-se com a existente + * replace - Substituir + * receive - Responder a novos dados + * force - Ignorar checagens para fazer uma ação +* Notificações * shouldObjectAction * objectWillAction * objectDidAction From d4e240e784b9e59bd19194ea235787ca28ae970b Mon Sep 17 00:00:00 2001 From: Renan Porto Date: Tue, 25 Jun 2019 19:07:36 -0300 Subject: [PATCH 08/11] Finish of the translation of the Instagram of blog post: 2016-09-28-our-first-50000-stars --- content/blog/2016-09-28-our-first-50000-stars.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/blog/2016-09-28-our-first-50000-stars.md b/content/blog/2016-09-28-our-first-50000-stars.md index 55849f2f4..d2522a508 100644 --- a/content/blog/2016-09-28-our-first-50000-stars.md +++ b/content/blog/2016-09-28-our-first-50000-stars.md @@ -209,14 +209,14 @@ Como o projeto estava prestes a se tornar aberto, [Lee Byron](https://twitter.co ## Instagram {#instagram} -In 2012, Instagram got acquired by Facebook. [Pete Hunt](https://twitter.com/floydophone), who was working on Facebook photos and videos at the time, joined their newly formed web team. He wanted to build their website completely in React, which was in stark contrast with the incremental adoption model that had been used at Facebook. +Em 2012, o Instagram foi adquirido pelo Facebook. [Pete Hunt](https://twitter.com/floydophone), quem estava trabalhando em fotos e vídeos no Facebook no momento, juntou-se a sua nova equipe web recém-formada. Ele queria construir seu website completamente em React, que estava em contraste com o modelo de adoção incremental que havia sido usado no Facebook. -To make this happen, React had to be decoupled from Facebook's infrastructure, since Instagram didn't use any of it. This project acted as a forcing function to do the work needed to open source React. In the process, Pete also discovered and promoted a little project called webpack. He also implemented the `renderToString` primitive which was needed to do server-side rendering. +Para fazer isso acontecer, o React precisou ser desacoplado da insfraestrutura do Facebook, já que o Instagram não utilizava nada disso. Este projeto teve uma atuação importante para a futura decisão de abrir o código do React. Neste projeto, Pete também descobriu e promoveu um pequeno projeto chamado webpack. Ele também implementou a primitira `renderToString`, que era necessária para fazer a renderização no lado do servidor. -As we started to prepare for the open source launch, [Maykel Loomans](https://twitter.com/miekd), a designer on Instagram, made a mock of what the website could look like. The header ended up defining the visual identity of React: its logo and the electric blue color! +Quando iniciamos a nos preparar para abrir o código do React, [Maykel Loomans](https://twitter.com/miekd), um designer do Instagram, fez uma simulação do que o site poderia ser. O cabeçalho acabou definindo a identidade visual do React: seu logo e a cor azul elétrica!
React website mock
-In its earliest days, React benefited tremendously from feedback, ideas, and technical contributions of early adopters and collaborators all over the company. While it might look like an overnight success in hindsight, the story of React is actually a great example of how new ideas often need to go through several rounds of refinement, iteration, and course correction over a long period of time before reaching their full potential. +Em seus primeiros dias, React se beneficiou enormemente dos feedbacks, ideias e contribuições técnicas dos primeiros usuários e colaboradores em toda a empresa. Embora possa parecer um sucesso da noite para o dia, a história do React é atualmente um ótimo exemplo de como novas idéias frequentemente precisam passar por várias etapas de refinamento, interações e correções de curso, durante um longo período de tempo antes de alcançar o seu potencial máximo. -React's approach to building user interfaces with functional programming principles has changed the way we do things in just a few short years. It goes without saying, but React would be nothing without the amazing open source community that's built up around it! +A abordagem do React para construir interfaces de usuário com príncipios de programação funcional mudou a forma para nós fazemos as coisas em poucos anos. Não é preciso dizer, mas o React não seria nada sem a incrível comunidade de código aberto que é construída em torno dele! From 3834657aae7b1a370046c448069065e011241084 Mon Sep 17 00:00:00 2001 From: Renan Porto Date: Tue, 25 Jun 2019 20:06:51 -0300 Subject: [PATCH 09/11] Finish of the translation of blog post (some spell correction): 2016-09-28-our-first-50000-stars --- .../blog/2016-09-28-our-first-50000-stars.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/content/blog/2016-09-28-our-first-50000-stars.md b/content/blog/2016-09-28-our-first-50000-stars.md index d2522a508..886565ab4 100644 --- a/content/blog/2016-09-28-our-first-50000-stars.md +++ b/content/blog/2016-09-28-our-first-50000-stars.md @@ -7,11 +7,11 @@ Apenas três anos e meio após nós criarmos uma pequena biblioteca Javascript c ## Camiseta Comemorativa {#commemorative-t-shirt} -Para comemorar as 50,000 stars no GitHub, [Maggie Appleton](http://www.maggieappleton.com/) do [egghead.io](http://egghead.io/) desenhou para nós uma camiseta espcial, que está disponível para compra no Teespring **somente por uma semana** até quinta feira, 06 de Outubro. Maggie também escreveu [um post](https://www.behance.net/gallery/43269677/Reacts-50000-Stars-Shirt) mostrando todos os diferentes conceitos que ela criou antes de escolher como seria o design final. +Para comemorar as 50,000 stars no GitHub, [Maggie Appleton](http://www.maggieappleton.com/) do [egghead.io](http://egghead.io/) desenhou para nós uma camiseta especial, que está disponível para compra no Teespring **somente por uma semana** até quinta feira, 06 de Outubro. Maggie também escreveu [um post](https://www.behance.net/gallery/43269677/Reacts-50000-Stars-Shirt) mostrando todos os diferentes conceitos que ela criou antes de escolher como seria o design final. React 50k Tshirt -As camisetas são super macias usando o tecido tri-blend da American Apparel's; nós também temos para crianças, camisetas infantis e macacões para bêbês disponíveis. +As camisetas são super macias usando o tecido tri-blend da American Apparel's. Nós também temos para crianças, camisetas infantis e macacões para bebês disponíveis. * [Camisetas para Adultos (corte reto e ajustadas)](https://teespring.com/react-50000-stars) * [Camisetas para crianças](https://teespring.com/react-50000-stars-kids) @@ -22,9 +22,9 @@ Todos os ganhos das camisetas serão doados para o [CODE2040](http://www.code204 ## Arqueologia {#archeology} -Nós gastamos muito tempo tentando explicar conceitos que existem atras do React e problemas que ele busca resolve, mas nós não temos falamos muito sobre como o React evoluiu antes de se tornar um projeto de código aberto. Este momento parece bom para lembrarmos os primeiros commits e compartilharmos algums dos momentos importantes e fatos engraçados. +Nós gastamos muito tempo tentando explicar conceitos que existem atras do React e problemas que ele busca resolver, mas nós não temos falamos muito sobre como o React evoluiu antes de se tornar um projeto de código aberto. Este momento parece bom para lembrarmos os primeiros commits e compartilharmos alguns dos momentos importantes e fatos engraçados. -A história inicia com nossa organização de anuncios, onde nós estavávamos construindo aplicativos web do lado do cliente incrivelmente sofisticados utilizando um framework MVC interno chamado [BoltJS](http://web.archive.org/web/20130608154901/http://shaneosullivan.github.io/boltjs/intro.html). Aqui está um exemplo de como era um código do framework Bolt: +A história inicia com nossa organização de anúncios, onde nós estávamos construindo aplicativos web do lado do cliente incrivelmente sofisticados utilizando um framework MVC interno chamado [BoltJS](http://web.archive.org/web/20130608154901/http://shaneosullivan.github.io/boltjs/intro.html). Aqui está um exemplo de como era um código do framework Bolt: ```js var CarView = require('javelin/core').createClass({ @@ -60,7 +60,7 @@ car.placeIn(document.body); // ``` -Boltz introduziu um número de APIs e recursos que acabariam eventualmente entrando no React, incluindo o método `render`, `createClass`, e `refs`. Bolt introduziu o conceito de `refs` como uma forma de criar referencias para nós que podem ser utilizados imperativamente. Está maneira foi relevante para a interoperabilidade herdada e a adoção incremental, e enquanto o React o React se esforça para ser tornar muito mais funcional, `refs` provou ser uma forma útil de sair do paradigma funcional quando surgir a necessidade. +Boltz introduziu um número de APIs e recursos que acabariam eventualmente entrando no React, incluindo o método `render`, `createClass`, e `refs`. Bolt introduziu o conceito de `refs` como uma forma de criar referências para nós que podem ser utilizados imperativamente. Está maneira foi relevante para a interoperabilidade herdada e a adoção incremental, e enquanto o React o React se esforça para ser tornar muito mais funcional, `refs` provou ser uma forma útil de sair do paradigma funcional quando surgir a necessidade. Porém como nossas aplicações cresceram mais e ficaram mais sofisticadas, nossas base de códigos do Bolt se tornaram complicadas. Reconhecendo algumas deficiências da estrutura, [Jordan Walke](https://twitter.com/jordwalke) iniciou experimentos em um projeto paralelo chamado [FaxJS](https://github.com/jordwalke/FaxJs). Seu objetivo foi resolver muitos dos problemas existentes no Bolt, mas de uma forma diferente. Este é o lugar onde a maioria dos fundamentos do React nasceu, incluindo `props`, `state`, reavaliando grandes partes da árvore para "diferenciar" a interface do usuário, a renderização do lado do servidor e conceitos básicos de componente. @@ -90,7 +90,7 @@ A interoperabilidade entre FBolt e Bolt permitiu a nós experimentar a substitu Percebendo que o FBolt não seria um ótimo nome para a biblioteca quando usada sozinha, Jordan Walke e [Tom Occhino](https://twitter.com/tomocchino) decidiram por um novo nome: "React." Depois de Tom ter renomeado a biblioteca inteira, Jordan comentou: > Jordan Walke: -Eu poderia acrescentar, que por uma questão de discussão, que muitos sistemas demostram algum tipo de reatividade, mas geralmente exigem que você defina algum tipo de ouvinte (listeners) ponto a ponto e não funcionará com dados estruturados. Essa API reage a qualquer alteração de estado ou propriedade, e trabalha com dados de qualquer forma (tão profundamente quanto o próprio gráfico), então acho que o nome é adequado. +Eu poderia acrescentar, que por uma questão de discussão, que muitos sistemas demonstram algum tipo de reatividade, mas geralmente exigem que você defina algum tipo de ouvinte (listeners) ponto a ponto e não funcionará com dados estruturados. Essa API reage a qualquer alteração de estado ou propriedade, e trabalha com dados de qualquer forma (tão profundamente quanto o próprio gráfico), então acho que o nome é adequado. A maioria dos outros commits de Tom na época estavam na primeira versão do [GraphiQL](https://github.com/graphql/graphiql), um projeto que recentemente teve seu código aberto. @@ -143,7 +143,7 @@ function jsx_example_hello(attrib, children) { } ``` -Neste protótipo, `S.create` criaria e retornaria imediatamente um nó DOM. Muitas A maioria das conversas sobre este protótipo girou em torno das características de desempenho do `innerHTML` contra criar nós no DOM diretamente. Ná epoca, seria menos ideal colocar desenvolvedores universalmente na direção da criação de nós DOM diretamente, uma vez que ele não funciona tão bem, especialmente no navegador Firefox e Internet Explorer. O CTO do Facebook, [Bret Taylor](https://twitter.com/btaylor) entrou na discussão no momento em favor do `innerHTML` ao invés do `document.createElement`. +Neste protótipo, `S.create` criaria e retornaria imediatamente um nó DOM. A maioria das conversas sobre este protótipo girou em torno das características de desempenho do `innerHTML` contra criar nós no DOM diretamente. Na época, seria menos ideal colocar desenvolvedores universalmente na direção da criação de nós DOM diretamente, uma vez que ele não funciona tão bem, especialmente no navegador Firefox e Internet Explorer. O CTO do Facebook, [Bret Taylor](https://twitter.com/btaylor) entrou na discussão no momento em favor do `innerHTML` ao invés do `document.createElement`. > Bret Taylor: Se você não está convencido sobre o innerHTML, aqui está um pequeno comparativo. Isso não mudou no Chrome. innerHTML esta 30% mais rápido na última versão do Firefox (e muito mais do que nas versões anteriores), e 90% mais rápido no IE8. @@ -159,10 +159,10 @@ Este projeto foi eventualmente abandonado, mas foi revivido depois que o React e > > Neste ponto, o JSX não precisa conhecer o React - isso é apenas uma forma conveniente de escrever chamadas de função. Coincidentemente, a abstração primária do React é a função. Ok, talvez isso não seja uma coincidência ;) -Adam fez um comentário muito perspizar, no qual agora é a forma padrão que nós escrevemos listas no React com JSX. +Adam fez um comentário muito perspicaz, no qual agora é a forma padrão que nós escrevemos listas no React com JSX. > Adam Hupp: -> Eu penso que nós deveriamos tratar matrizes de elementos como um frag. Isso é muito útil para construções como: +> Eu penso que nós deveríamos tratar matrizes de elementos como um frag. Isso é muito útil para construções como: > > ```js >
    {foo.map(function(i) { return
  • {i.data}
    • ; })}
@@ -191,7 +191,7 @@ Como o projeto estava prestes a se tornar aberto, [Lee Byron](https://twitter.co * Ações * mount - Colocar um componente em um DOM * initialize - Preparar um componente para renderização - * update - Uma transiçaõ de um estado (e propriedades) resultando em renderização. + * update - Uma transiçaõ de um estado (e propriedades) resultando em renderização * render - Um processo sem efeitos colaterais buscando ter uma representação (markup) de um componente. * validate - Fazer validações sobre algo criado e fornecido * destroy - Oposto de initialize @@ -211,12 +211,12 @@ Como o projeto estava prestes a se tornar aberto, [Lee Byron](https://twitter.co Em 2012, o Instagram foi adquirido pelo Facebook. [Pete Hunt](https://twitter.com/floydophone), quem estava trabalhando em fotos e vídeos no Facebook no momento, juntou-se a sua nova equipe web recém-formada. Ele queria construir seu website completamente em React, que estava em contraste com o modelo de adoção incremental que havia sido usado no Facebook. -Para fazer isso acontecer, o React precisou ser desacoplado da insfraestrutura do Facebook, já que o Instagram não utilizava nada disso. Este projeto teve uma atuação importante para a futura decisão de abrir o código do React. Neste projeto, Pete também descobriu e promoveu um pequeno projeto chamado webpack. Ele também implementou a primitira `renderToString`, que era necessária para fazer a renderização no lado do servidor. +Para fazer isso acontecer, o React precisou ser desacoplado da infraestrutura do Facebook, já que o Instagram não utilizava nada disso. Este projeto teve uma atuação importante para a futura decisão de abrir o código do React. Neste projeto, Pete também descobriu e promoveu um pequeno projeto chamado webpack. Ele também implementou a primitiva `renderToString`, que era necessária para fazer a renderização no lado do servidor. Quando iniciamos a nos preparar para abrir o código do React, [Maykel Loomans](https://twitter.com/miekd), um designer do Instagram, fez uma simulação do que o site poderia ser. O cabeçalho acabou definindo a identidade visual do React: seu logo e a cor azul elétrica!
React website mock
-Em seus primeiros dias, React se beneficiou enormemente dos feedbacks, ideias e contribuições técnicas dos primeiros usuários e colaboradores em toda a empresa. Embora possa parecer um sucesso da noite para o dia, a história do React é atualmente um ótimo exemplo de como novas idéias frequentemente precisam passar por várias etapas de refinamento, interações e correções de curso, durante um longo período de tempo antes de alcançar o seu potencial máximo. +Em seus primeiros dias, React se beneficiou enormemente dos feedbacks, idéias e contribuições técnicas dos primeiros usuários e colaboradores em toda a empresa. Embora possa parecer um sucesso da noite para o dia, a história do React é atualmente um ótimo exemplo de como novas idéias frequentemente precisam passar por várias etapas de refinamento, interações e correções de curso, durante um longo período de tempo antes de alcançar o seu potencial máximo. -A abordagem do React para construir interfaces de usuário com príncipios de programação funcional mudou a forma para nós fazemos as coisas em poucos anos. Não é preciso dizer, mas o React não seria nada sem a incrível comunidade de código aberto que é construída em torno dele! +A abordagem do React para construir interfaces de usuário com princípios de programação funcional mudou a forma para nós fazemos as coisas em poucos anos. Não é preciso dizer, mas o React não seria nada sem a incrível comunidade de código aberto que é construída em torno dele! From 2d56801337b3ac9debcb44bf49c73e684d4cbabb Mon Sep 17 00:00:00 2001 From: Renan Porto Date: Fri, 2 Aug 2019 16:20:24 -0300 Subject: [PATCH 10/11] translation of blog post: 2016-09-28-our-first-50000-stars - Fix Review issues --- content/blog/2016-09-28-our-first-50000-stars.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/content/blog/2016-09-28-our-first-50000-stars.md b/content/blog/2016-09-28-our-first-50000-stars.md index 886565ab4..b61f0835c 100644 --- a/content/blog/2016-09-28-our-first-50000-stars.md +++ b/content/blog/2016-09-28-our-first-50000-stars.md @@ -22,7 +22,7 @@ Todos os ganhos das camisetas serão doados para o [CODE2040](http://www.code204 ## Arqueologia {#archeology} -Nós gastamos muito tempo tentando explicar conceitos que existem atras do React e problemas que ele busca resolver, mas nós não temos falamos muito sobre como o React evoluiu antes de se tornar um projeto de código aberto. Este momento parece bom para lembrarmos os primeiros commits e compartilharmos alguns dos momentos importantes e fatos engraçados. +Gastamos muito tempo tentando explicar conceitos que existem atrás do React e problemas que ele busca resolver, mas não falamos muito sobre como o React evoluiu antes de se tornar um projeto de código aberto. Este momento parece bom para lembrarmos os primeiros commits e compartilharmos alguns dos momentos importantes e fatos engraçados. A história inicia com nossa organização de anúncios, onde nós estávamos construindo aplicativos web do lado do cliente incrivelmente sofisticados utilizando um framework MVC interno chamado [BoltJS](http://web.archive.org/web/20130608154901/http://shaneosullivan.github.io/boltjs/intro.html). Aqui está um exemplo de como era um código do framework Bolt: @@ -59,8 +59,7 @@ car.placeIn(document.body); //
wheels
// ``` - -Boltz introduziu um número de APIs e recursos que acabariam eventualmente entrando no React, incluindo o método `render`, `createClass`, e `refs`. Bolt introduziu o conceito de `refs` como uma forma de criar referências para nós que podem ser utilizados imperativamente. Está maneira foi relevante para a interoperabilidade herdada e a adoção incremental, e enquanto o React o React se esforça para ser tornar muito mais funcional, `refs` provou ser uma forma útil de sair do paradigma funcional quando surgir a necessidade. +Bolt introduziu um número de APIs e recursos que acabariam eventualmente entrando no React, incluindo o método `render`, `createClass`, e `refs`. Bolt introduziu o conceito de `refs` como uma forma de criar referências para nós que podem ser utilizados imperativamente. Está maneira foi relevante para a interoperabilidade herdada e a adoção incremental, e enquanto o React se esforçaria para ser muito mais funcional, `refs` provou ser uma forma útil de sair do paradigma funcional quando surgir a necessidade. Porém como nossas aplicações cresceram mais e ficaram mais sofisticadas, nossas base de códigos do Bolt se tornaram complicadas. Reconhecendo algumas deficiências da estrutura, [Jordan Walke](https://twitter.com/jordwalke) iniciou experimentos em um projeto paralelo chamado [FaxJS](https://github.com/jordwalke/FaxJs). Seu objetivo foi resolver muitos dos problemas existentes no Bolt, mas de uma forma diferente. Este é o lugar onde a maioria dos fundamentos do React nasceu, incluindo `props`, `state`, reavaliando grandes partes da árvore para "diferenciar" a interface do usuário, a renderização do lado do servidor e conceitos básicos de componente. @@ -83,9 +82,9 @@ TestProject.PersonDisplayer = { ## Nasce o FBolt {#fbolt-is-born} -Através do seu experimento FaxJS, Jordan se convence que as APIs funcionais - que desencoraja a mutação - oferece uma melhor, mais escalável forma de construir interfaces de usuários. Ele importou sua biblioteca na base de códigos do Facebook em Março de 2012 e renomeou a biblioteca para "FBolt", significando uma extensão do Bolt odne os componentes são escritos em um estilo de programação funcional. Ou talvez "Fbolt" foi uma prévia do FaxJS - ele não nos contou! ;) +Através do seu experimento FaxJS, Jordan se convence que as APIs funcionais - que desencoraja a mutação - oferece uma melhor, mais escalável forma de construir interfaces de usuários. Ele importou sua biblioteca na base de códigos do Facebook em Março de 2012 e renomeou a biblioteca para "FBolt", significando uma extensão do Bolt onde os componentes são escritos em um estilo de programação funcional. Ou talvez "Fbolt" foi uma prévia do FaxJS - ele não nos contou! ;) -A interoperabilidade entre FBolt e Bolt permitiu a nós experimentar a substituição de apenas um componente por vez com APIs de componentes mais funcionais. Nós poderíamos visitar as águas desse novo paradigma funcional, sem ter que entrar totalmente nele. Nós iniciamos com os componentes que estavam claramente melhor expressos funcionalmente e então continuamos depois com os demais componentes que poderíamos expressar como funções. +A interoperabilidade entre FBolt e Bolt permitiu experimentarmos a substituição de apenas um componente por vez com APIs de componentes mais funcionais. Poderíamos visitar as águas desse novo paradigma funcional, sem ter que entrar totalmente nele. Iniciamos com os componentes que estavam claramente melhor expressos funcionalmente e então continuamos depois com os demais componentes que poderíamos expressar como funções. Percebendo que o FBolt não seria um ótimo nome para a biblioteca quando usada sozinha, Jordan Walke e [Tom Occhino](https://twitter.com/tomocchino) decidiram por um novo nome: "React." Depois de Tom ter renomeado a biblioteca inteira, Jordan comentou: @@ -170,8 +169,7 @@ Adam fez um comentário muito perspicaz, no qual agora é a forma padrão que n > > Neste caso, ul(...) irá receber um childList com um único filho, que é uma lista. - -React não utilizou a implementação de Adam diretamente. Ao invés, nós criamos JSX fazendo o fork do projeto [js-xml-literal](https://github.com/laverdet/js-xml-literal), um projeto paralelo do criado do XHP, Marcel Laverdet. O JSX tomou o nome de js-xml-literal, que Jordan modificou para ser apenas um acréscimo sintático para chamadas de funções profundamente aninhadas. +React não utilizou a implementação de Adam diretamente. Ao invés, nós criamos JSX fazendo o fork do projeto [js-xml-literal](https://github.com/laverdet/js-xml-literal), um projeto paralelo do criador do XHP, Marcel Laverdet. O JSX tomou o nome de js-xml-literal, que Jordan modificou para ser apenas um acréscimo sintático para chamadas de funções profundamente aninhadas. ## API Churn {#api-churn} @@ -191,7 +189,7 @@ Como o projeto estava prestes a se tornar aberto, [Lee Byron](https://twitter.co * Ações * mount - Colocar um componente em um DOM * initialize - Preparar um componente para renderização - * update - Uma transiçaõ de um estado (e propriedades) resultando em renderização + * update - Uma transição de um estado (e propriedades) resultando em renderização * render - Um processo sem efeitos colaterais buscando ter uma representação (markup) de um componente. * validate - Fazer validações sobre algo criado e fornecido * destroy - Oposto de initialize From 52208a69cb25466ef8c4b753e2a98eec5aec92e0 Mon Sep 17 00:00:00 2001 From: Renan Porto Date: Tue, 17 Sep 2019 19:07:01 -0300 Subject: [PATCH 11/11] Code Review corrections of blog post: 2016-09-28-our-first-50000-stars --- .../blog/2016-09-28-our-first-50000-stars.md | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/content/blog/2016-09-28-our-first-50000-stars.md b/content/blog/2016-09-28-our-first-50000-stars.md index b61f0835c..647faa965 100644 --- a/content/blog/2016-09-28-our-first-50000-stars.md +++ b/content/blog/2016-09-28-our-first-50000-stars.md @@ -1,22 +1,22 @@ --- -title: "Nossas primeiras 50,000 stars no GitHub" +title: "Nossas primeiras 50.000 estrelas no GitHub" author: [vjeux] --- -Apenas três anos e meio após nós criarmos uma pequena biblioteca Javascript chamada React. A jornada desde aquele dia tem sido incrivelmente excitante. +Há apenas três anos e meio nós abrimos o código de uma pequena biblioteca chamada React. A jornada desde aquele dia tem sido incrivelmente excitante. ## Camiseta Comemorativa {#commemorative-t-shirt} -Para comemorar as 50,000 stars no GitHub, [Maggie Appleton](http://www.maggieappleton.com/) do [egghead.io](http://egghead.io/) desenhou para nós uma camiseta especial, que está disponível para compra no Teespring **somente por uma semana** até quinta feira, 06 de Outubro. Maggie também escreveu [um post](https://www.behance.net/gallery/43269677/Reacts-50000-Stars-Shirt) mostrando todos os diferentes conceitos que ela criou antes de escolher como seria o design final. +Para comemorar as 50.000 estrelas no GitHub, [Maggie Appleton](http://www.maggieappleton.com/) do [egghead.io](http://egghead.io/) desenhou para nós uma camiseta especial, que está disponível para compra no Teespring **somente por uma semana** até quinta feira, 06 de Outubro. Maggie também escreveu [um post](https://www.behance.net/gallery/43269677/Reacts-50000-Stars-Shirt) mostrando todos os diferentes conceitos que ela criou antes de escolher como seria o design final. React 50k Tshirt -As camisetas são super macias usando o tecido tri-blend da American Apparel's. Nós também temos para crianças, camisetas infantis e macacões para bebês disponíveis. +As camisetas são bem macias usando o tecido tri-blend da American Apparel's. Nós também temos camisetas para crianças e macacões para bebês disponíveis. * [Camisetas para Adultos (corte reto e ajustadas)](https://teespring.com/react-50000-stars) * [Camisetas para crianças](https://teespring.com/react-50000-stars-kids) * [Camisetas Infantis](https://teespring.com/react-50000-stars-toddler) -* [Camisetas para bêbês](https://teespring.com/react-50000-stars-baby) +* [Onesies para bêbês](https://teespring.com/react-50000-stars-baby) Todos os ganhos das camisetas serão doados para o [CODE2040](http://www.code2040.org/), uma organização sem fins lucrativos que cria acesso, conscientização e oportunidades em tecnologia para minorias não representadas com um foco especifico em talentos afrodescendente e latinos. @@ -59,7 +59,8 @@ car.placeIn(document.body); //
wheels
// ``` -Bolt introduziu um número de APIs e recursos que acabariam eventualmente entrando no React, incluindo o método `render`, `createClass`, e `refs`. Bolt introduziu o conceito de `refs` como uma forma de criar referências para nós que podem ser utilizados imperativamente. Está maneira foi relevante para a interoperabilidade herdada e a adoção incremental, e enquanto o React se esforçaria para ser muito mais funcional, `refs` provou ser uma forma útil de sair do paradigma funcional quando surgir a necessidade. + +Bolt introduziu um número de APIs e recursos que acabariam eventualmente entrando no React, incluindo o método `render`, `createClass`, e `refs`. Bolt introduziu o conceito de `refs` como uma forma de criar referências para nós que podem ser utilizados imperativamente. Esta maneira foi relevante para a interoperabilidade herdada e a adoção incremental, e enquanto o React se esforçaria para ser muito mais funcional, `refs` provou ser uma forma útil de sair do paradigma funcional quando surgir a necessidade. Porém como nossas aplicações cresceram mais e ficaram mais sofisticadas, nossas base de códigos do Bolt se tornaram complicadas. Reconhecendo algumas deficiências da estrutura, [Jordan Walke](https://twitter.com/jordwalke) iniciou experimentos em um projeto paralelo chamado [FaxJS](https://github.com/jordwalke/FaxJs). Seu objetivo foi resolver muitos dos problemas existentes no Bolt, mas de uma forma diferente. Este é o lugar onde a maioria dos fundamentos do React nasceu, incluindo `props`, `state`, reavaliando grandes partes da árvore para "diferenciar" a interface do usuário, a renderização do lado do servidor e conceitos básicos de componente. @@ -82,14 +83,16 @@ TestProject.PersonDisplayer = { ## Nasce o FBolt {#fbolt-is-born} -Através do seu experimento FaxJS, Jordan se convence que as APIs funcionais - que desencoraja a mutação - oferece uma melhor, mais escalável forma de construir interfaces de usuários. Ele importou sua biblioteca na base de códigos do Facebook em Março de 2012 e renomeou a biblioteca para "FBolt", significando uma extensão do Bolt onde os componentes são escritos em um estilo de programação funcional. Ou talvez "Fbolt" foi uma prévia do FaxJS - ele não nos contou! ;) +Através do seu experimento FaxJS, Jordan se convence de que as APIs funcionais - que desencorajam a mutação - oferecem uma melhor, mais escalável forma de construir interfaces de usuários. Ele importou sua biblioteca na base de códigos do Facebook em Março de 2012 e renomeou a biblioteca para "FBolt", significando uma extensão do Bolt onde os componentes são escritos em um estilo de programação funcional. Ou talvez "Fbolt" foi uma prévia do FaxJS - ele não nos contou! ;) A interoperabilidade entre FBolt e Bolt permitiu experimentarmos a substituição de apenas um componente por vez com APIs de componentes mais funcionais. Poderíamos visitar as águas desse novo paradigma funcional, sem ter que entrar totalmente nele. Iniciamos com os componentes que estavam claramente melhor expressos funcionalmente e então continuamos depois com os demais componentes que poderíamos expressar como funções. Percebendo que o FBolt não seria um ótimo nome para a biblioteca quando usada sozinha, Jordan Walke e [Tom Occhino](https://twitter.com/tomocchino) decidiram por um novo nome: "React." Depois de Tom ter renomeado a biblioteca inteira, Jordan comentou: + > Jordan Walke: -Eu poderia acrescentar, que por uma questão de discussão, que muitos sistemas demonstram algum tipo de reatividade, mas geralmente exigem que você defina algum tipo de ouvinte (listeners) ponto a ponto e não funcionará com dados estruturados. Essa API reage a qualquer alteração de estado ou propriedade, e trabalha com dados de qualquer forma (tão profundamente quanto o próprio gráfico), então acho que o nome é adequado. +Eu poderia acrescentar, que por uma questão de discussão, que muitos sistemas demonstram algum tipo de reatividade, mas geralmente exigem que você defina algum tipo de ouvinte (listeners) ponto a ponto e não funcionará com dados estruturados. Essa API reage a qualquer alteração de estado ou propriedade e trabalha com dados de qualquer forma (tão profundamente quanto o próprio gráfico), então acho que o nome é adequado. + A maioria dos outros commits de Tom na época estavam na primeira versão do [GraphiQL](https://github.com/graphql/graphiql), um projeto que recentemente teve seu código aberto. @@ -144,11 +147,14 @@ function jsx_example_hello(attrib, children) { Neste protótipo, `S.create` criaria e retornaria imediatamente um nó DOM. A maioria das conversas sobre este protótipo girou em torno das características de desempenho do `innerHTML` contra criar nós no DOM diretamente. Na época, seria menos ideal colocar desenvolvedores universalmente na direção da criação de nós DOM diretamente, uma vez que ele não funciona tão bem, especialmente no navegador Firefox e Internet Explorer. O CTO do Facebook, [Bret Taylor](https://twitter.com/btaylor) entrou na discussão no momento em favor do `innerHTML` ao invés do `document.createElement`. + > Bret Taylor: Se você não está convencido sobre o innerHTML, aqui está um pequeno comparativo. Isso não mudou no Chrome. innerHTML esta 30% mais rápido na última versão do Firefox (e muito mais do que nas versões anteriores), e 90% mais rápido no IE8. + Este projeto foi eventualmente abandonado, mas foi revivido depois que o React entrou na base de código. Jordan ignorou as discussões anteriores sobre performance introduzindo o conceito de “Virtual DOM,” embora este nome ainda não existisse. + > Jordan Walke: > Para a primeira etapa, eu proponho que nós façamos o mais fácil e mais genérico possível. Minha sugestão é simplesmente mapear expressões xml para funções de chamada. > @@ -158,8 +164,10 @@ Este projeto foi eventualmente abandonado, mas foi revivido depois que o React e > > Neste ponto, o JSX não precisa conhecer o React - isso é apenas uma forma conveniente de escrever chamadas de função. Coincidentemente, a abstração primária do React é a função. Ok, talvez isso não seja uma coincidência ;) + Adam fez um comentário muito perspicaz, no qual agora é a forma padrão que nós escrevemos listas no React com JSX. + > Adam Hupp: > Eu penso que nós deveríamos tratar matrizes de elementos como um frag. Isso é muito útil para construções como: > @@ -169,6 +177,7 @@ Adam fez um comentário muito perspicaz, no qual agora é a forma padrão que n > > Neste caso, ul(...) irá receber um childList com um único filho, que é uma lista. + React não utilizou a implementação de Adam diretamente. Ao invés, nós criamos JSX fazendo o fork do projeto [js-xml-literal](https://github.com/laverdet/js-xml-literal), um projeto paralelo do criador do XHP, Marcel Laverdet. O JSX tomou o nome de js-xml-literal, que Jordan modificou para ser apenas um acréscimo sintático para chamadas de funções profundamente aninhadas. ## API Churn {#api-churn}