├── README-zh.md
├── README-cs.md
├── README.md
├── README-ru.md
├── README-vi.md
└── README-es.md


/README-zh.md:
--------------------------------------------------------------------------------
  1 | # 如何学习React
  2 | 
  3 | 如果你是一个 React (或者前端) 新手, 出于以下的原因, 你可能会对这个生态圈感到困惑:
  4 | 
  5 | * React 的目标群体历来是喜欢尝试新事物的开发者和前端专家.
  6 | * Facebook 开源的内容是应用在他们的实际应用中, 因此他们没有关注那些比 Facebook 小的工程需求.
  7 | * 现有的 React 指引水平参差不齐.
  8 | 
  9 | 在本文中, 我会假设你已有使用 HTML, CSS 和 JavaScript 开发网页的基础.
 10 | 
 11 | ## 为什么要听我的?
 12 | 
 13 | 关于 React, 现在已经有大量的相互冲突的建议了, 为什么要听我的?
 14 | 
 15 | 因为我是在 Facebook 构建并开源 React 的最初成员之一. 现在我离开了 Facebook 并加入了一家初创公司, 所以我也不会站在 Facebook 的立场上来表态.
 16 | 
 17 | ## 如何踏入 React 生态圈
 18 | 
 19 | 所有的软件都是建立在某个技术栈之上的, 你需要对整个技术栈有足够深入的理解, 才能建造你的应用. 为什么 React 生态圈的工具似乎总让人感觉压力山大呢, 因为它总是以错误的顺序被解释:
 20 | 
 21 | 你应该按照以下的顺序进行学习, **而不是跳着学或者同时学习**:
 22 | 
 23 | * [React](#user-content-学习-react-本身)
 24 | * [`npm`](#user-content-学习-npm)
 25 | * [JavaScript “打包工具”](#user-content-学习-javascript-打包工具)
 26 | * [ES6](#user-content-学习-es6)
 27 | * [Routing](#user-content-学习路由-routing)
 28 | * [Flux](#user-content-学习-flux)
 29 | 
 30 | 
 31 | **你不需要把这些都学完才去使用 React.** 只需要在你遇到问题需要解决的时候, 才进入下一步的学习.
 32 | 
 33 | 另外, 在 React 社区中, 有一些前沿主题是经常被提及到的, 以下的这些主题很有意思, 但也很难弄懂, 所以它们远没有上面的主题流行, **大多数应用也不需要用到这些.**
 34 | 
 35 | * [内联样式](#user-content-学习内联样式)
 36 | * [服务器端渲染](#user-content-学习服务器端渲染)
 37 | * [Immutable.js](#user-content-学习-immutablejs)
 38 | * [Relay, Falcor 等](#user-content-学习-relay-falcor-等)
 39 | 
 40 | ## 学习 React 本身
 41 | 
 42 | 有一种常见的误解是: 你需要花费大量时间在配置工具上, 然后才开始学习 React. 在官方文档里, 你可以找到 [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm). 只需要保存为 `.html` 文件, 你就可以马上开始学习了. **这个步骤不需要任何工具, 你也无需额外学习工具使用, 直到你能熟练掌握 React 基础.**
 43 | 
 44 | 我依然觉得, 学习 React 最简单的方法是通过官方教程 [the official tutorial](https://facebook.github.io/react/docs/tutorial.html).
 45 | 
 46 | ## 学习 `npm`
 47 | 
 48 | `npm` 是 Node.js 包管理工具, 也是前端工程师和设计师分享 JavaScript 代码最流行的方式. 它包含了名为 `CommonJS` 的模块系统, 让你可以安装 JavaScript 写的命令行工具. 作为背景知识, 可以阅读 [这篇文章](http://0fps.net/2013/01/22/commonjs-why-and-how/) 了解 `CommonJS` 对于浏览器的重要性, 阅读  [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) 了解关于 `CommonJS` API 的更多内容
 49 | 
 50 | 在 React 生态圈中, 大部分可重用的组件、库和工具遵循 `CommonJS` 模块规范, 可通过 `npm` 来安装.
 51 | 
 52 | ## 学习 JavaScript 打包工具
 53 | 
 54 | 出于若干技术原因, `CommonJS` 模块 (也就是 `npm` 里的所有内容) 不能直接用到浏览器. 你需要一个 JavaScript “打包工具(bundler)” 来把这些模块打包成 `.js` 文件, 使你可以在网页中通过 `<script>` 标签引入它们.
 55 | 
 56 | JavaScript 打包工具包括 `webpack` 和 `browserify`. 它们都是好的选择, 但我个人更喜欢 `webpack` , 因为它有许多功能简化大型应用开发. 鉴于 webpack 文档可能令人感到困惑, 我也写了两篇文章: [plug-and-play template for getting started](https://github.com/petehunt/react-webpack-template) 和针对更复杂用例的 [how-to guide for webpack](https://github.com/petehunt/webpack-howto).
 57 | 
 58 | 要记住的一点: `CommonJS` 使用了 `require()` 函数来引入模块, 因此许多人对此感到疑惑, 并认为需要导入 `require.js` 到工程里. 出于若干技术原因, 我建议你避免使用 `require.js`. 它在 React 生态圈并不流行.
 59 | 
 60 | ## 学习 ES6
 61 | 
 62 | 在 JSX (你会在 React tutorial 中学习到) 以外, 你可能会注意到 React 例子中一些有趣的语法. 这被称为 ECMAScript6, 是 JavaScript 的最新版本. 由于 ES6 很新, 你可能还没学习到, 浏览器也可能尚未兼容, 但别担心, 通过合适的配置, 你的打包工具会为你自动转换成兼容代码.
 63 | 
 64 | 如果你只想要使用 React 来把事情做完, **你可以跳过 ES6 的学习,** 或者留到以后再学习.
 65 | 
 66 | 你可能会看到一些讨论说更适合用 ES6 的 class 来创建 React 组件. 这并不是真的, 大多数人 (包括 Facebook) 用的还是 `React.createClass()`.
 67 | 
 68 | ## 学习路由 (routing)
 69 | 
 70 | “单页面应用” 是时下的技术热点. 当网页加载完成, 用户点击链接或者按钮的时候, JavaScript 会更新页面和改变地址栏, 但网页不会刷新. 地址栏的管理就是通过 **路由(router)** 来完成的.
 71 | 
 72 | 目前 React 生态圈最受欢迎的路由解决方案是 [react-router](https://github.com/rackt/react-router). 如果你正在创建一个单页面应用, 有什么理由不去使用它呢?
 73 | 
 74 | **如果你创建的并非单页面应用, 请不要使用路由.** 无论如何, 大部分项目都是从大型应用中的小组件开始的.
 75 | 
 76 | ## 学习内联样式
 77 | 
 78 | 在 React 出现之前, 很多人通过像 SASS 这样的预处理器来重用复杂的 CSS 样式表. 鉴于 React 使开发可重用组件变得容易, 你的样式表可以变得没那么复杂了. 社区中许多人 (包括我) 正尝试完全抛弃样式表.
 79 | 
 80 | 由于一些原因, 其实这是个相当疯狂的主意. 这让媒体查询 (media quries) 更加困难了, 而且这种技术可能有性能上的局限性. **当你开始用 React 的时候, 只要用你平常使用的方法去写就好了.**
 81 | 
 82 | 一旦你找到了用 React 开发的感觉, 你就可以关注那些可作为替代的技术了. 其中一种流行技术是 [BEM](https://en.bem.info/). 我建议你逐渐停用 CSS 预处理器, 因为 React 给了你一种更强大的方式去重用样式 (通过重用组件), 并且 JavaScript 打包工具可以为你生成更高效的样式表 (我曾经[在 OSCON 上发表过关于这个的演讲](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). 说了这么多, 总之 React 就像其他 JavaScript 库一样, 可以和 CSS 预处理器很好地配合工作.
 83 | 
 84 | 另一种可选项是 [CSS 模块](http://glenmaddern.com/articles/css-modules), 更具体地说, 是 [react-css-modules](https://github.com/gajus/react-css-modules). 虽然有了这些 CSS 模块, 你还是写 CSS (或者是 SASS/LESS/Stylus), 但你可以像处理 React 中的内联样式那样管理和组织 CSS 文件. 你也不需要担心用到 BEM 那样的方法学去管理类名, 因为模块系统在底层已经帮你处理好了.
 85 | 
 86 | ## 学习服务器端渲染
 87 | 
 88 | 服务器端渲染经常被称为 "通用应用" 或 "同构应用". 这意味着你可以用 React 组件在服务器端渲染出静态 HTML. 这样做可以提高初始化加载的性能, 因为用户不用等到 JS 下载完才看到初始界面, 并且 React 可以重用服务器端渲染出的 HTML, 无需客户端重新生成.
 89 | 
 90 | 如果你发现首屏渲染速度过慢, 或者想提高网站在搜索引擎的排行, 你就需要服务器端渲染了. 尽管 Google 现在也会索引客户端渲染的内容, 但截至 2016 年 1 月, 这样做仍被证实会对排行有负面影响, 这可能是由于客户端渲染的性能问题所造成的.
 91 | 
 92 | 服务器端渲染还需要许多工具的辅助, 因为显然 React 组件不是在考虑服务器端渲染的情况下写出来的, 你应该先构建你的应用, 之后再关心服务器端渲染的问题. 不用担心, 你不需要重写所有组件去支持它.
 93 | 
 94 | ## 学习 Flux
 95 | 
 96 | 你可能听过 Flux, 不过关于 Flux 有大量的错误资讯.
 97 | 
 98 | 许多人一坐下来刚开始构建应用, 就认为需要用 Flux 来定义他们的数据模型. **这样采用 Flux 是不对的, Flux 应该在大量组件被建立完成以后才被引入.**
 99 | 
100 | React 组件之间存在层级关系. 在很多时候, 你的数据模型也跟随这种层级. 这种情况下, Flux 不会给你很大帮助. 但有些时候, 你的数据模型没有层次, 当你的 React 组件开始接受没有关联的 `props` 的时候, 或者当小部分组件开始变得复杂的时候, 你才可能需要看看 Flux.
101 | 
102 | **你会知道什么时候需要用 Flux. 如果你不确定是否需要用它, 你就不需要它.**
103 | 
104 | 如果你决定使用 Flux, 现在最流行的、文档最全的 Flux 库是 [Redux](http://redux.js.org/). 当然也有许多其他选择, 你或者会有兴趣尝试使用它们, 但我的建议是只需要用最流行的 Redux 就足够了.
105 | 
106 | ## 学习 Immutable.js
107 | 
108 | [Immutable.js](https://facebook.github.io/immutable-js/) 提供了一系列的数据结构, 以帮助解决构造 React 应用时的某些性能问题. 这是一个很棒的库, 你可能会在应用发展的过程里大量用到它, 但直到你在意识到性能问题以前, 它是完全不必要的.
109 | 
110 | ## 学习 Relay, Falcor 等
111 | 
112 | 这些技术可以帮你减少 AJAX 请求数, 它们仍然是非常前沿的, 所以如果你没有遇到过多 AJAX 请求的问题, 就不需要用到 Relay 或者 Falcor.
113 | 


--------------------------------------------------------------------------------
/README-cs.md:
--------------------------------------------------------------------------------
  1 | # react-howto
  2 | 
  3 | Pokud jste se rozhodli začít s Reactem (nebo frontendem obecně), lehce se můžete v celém ekosystému nástrojů a technik ztratit. Co je příčinou?
  4 | 
  5 | * React byl od počátku cílen na experty a ty, kteří rádi zkoušejí nové technologie
  6 | * Facebook opensourcuje pouze věci, které sám používá a přirozeně je necílí na menší projekty
  7 | * Na internetu je spousta zavádějících React návodů
  8 | 
  9 | Tento návod předpokládá, že jste už někdy vytvořili stránku s HTML, CSS a JavaScriptem.
 10 | 
 11 | ## Proč byste měli poslouchat mě?
 12 | 
 13 | Existuje spousta protichůdných rad ohledně Reactu. Proč byste měli dát zrovna na ty mé?
 14 | 
 15 | Jsem jeden z původních členů Facebook týmu, který React vytvořil a opensourcoval. Před časem jsem však Facebook opustil a začal pracovat v menším startupu. Mám tak k dispozici i pohled z druhé strany barikády.
 16 | 
 17 | 
 18 | ## Jak se neztratit v React ekosystému
 19 | 
 20 | Každý software je postaven na několika vrstvách různých technologií. Abyste mohli vytvořit vaši aplikaci, musíte každé této vrstvě alespoň částečně rozumět. React ekosystém vypadá komplikovaně, protože je vždy představován ve špatném pořadí.
 21 | 
 22 | Měli byste se držet tohoto pořadí, **bez přeskakování nebo učení se více věcí naráz**:
 23 | 
 24 | * [Samotný React](#user-content-naučte-se-samotný-react)
 25 | * [`npm`](#user-content-naučte-se-npm)
 26 | * [JavaScript “bundlers”](#user-content-naučte-se-javascript-bundlery)
 27 | * [ES6](#user-content-naučte-se-es6)
 28 | * [Routing](#user-content-naučte-se-routing)
 29 | * [Flux](#user-content-naučte-se-flux)
 30 | 
 31 | **Nemusíte znát všechno, abyste byli s Reactem produktivní.** Přejděte k dalšímu kroku pouze tehdy, pokud máte zásadní problém, který s ním můžete vyřešit.
 32 | 
 33 | Můžete narazit i na několik dalších témat, která se v souvislosti s Reactem skloňují. Jde převážně o nejnovější "výstřelky". Jsou zajímavé, ale také poměrně složité k pochopení a daleko méně populární než ty, které jsem již zmínil výše. **K většině aplikací je nepotřebujete**.
 34 | 
 35 | * [Inline styly](#user-content-naučte-se-inline-styly)
 36 | * [Server rendering](#user-content-naučte-se-server-rendering)
 37 | * [Immutable.js](#user-content-naučte-se-immutablejs)
 38 | * [Relay, Falcor, atd](#user-content-naučte-se-relay-falcor-atd)
 39 | 
 40 | ## Naučte se samotný React
 41 | 
 42 | Často se setkáte s tvrzením, že musíte strávit hodně času s nastavováním různých nástrojů, abyste se mohli naučit React. V oficiální dokumentaci naleznete [copy&paste HTML šablonu](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm), kterou můžete uložit jako `.html` soubor a ihned si tak začít s Reactem hrát. **V tomto kroku nepotřebujete žádné nástroje a nemusíte se tak trápit s jejich dokumentací ještě před tím, než se seznámíte se základy Reactu.**
 43 | 
 44 | Za nejsnažší cestu k naučení Reactu stále pokládám [oficiální tutoriál](https://facebook.github.io/react/docs/tutorial.html).
 45 | 
 46 | ## Naučte se `npm`
 47 | 
 48 | `npm` je balíčkovací systém pro Node.js a zdaleka nejpopulárnější kanál, kterým si frontend vývojáři sdílí svůj kód. Je postaven na modulárním systému `CommonJS` a nechá vás instalovat CLI  nástroje psané v JavaScriptu. Přečtěte si [tento článek](http://0fps.net/2013/01/22/commonjs-why-and-how/), pokud vás zajímá, proč je `CommonJS` nezbytný pro prohlížeče nebo [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction), pokud se chcete rovnou ponořit do `CommonJS` API.
 49 | 
 50 | Většina znovupoužitelných komponent, knihoven a nástrojů v React ekosystému je k dispozici jako `CommonJS` modul, který se dá nainstalovat pomocí `npm`.
 51 | 
 52 | ## Naučte se JavaScript bundlery
 53 | 
 54 | Hned z několika dobrých technických důvodů nemůžou `CommonJS` moduly (vše v `npm`) nativně běžet v prohlížeči. Potřebujete JavaScript bundler, který vám tyto moduly převede do `.js` souborů. Ty pak můžete vložit na svoji stránku pomocí tagu `<script>`.
 55 | 
 56 | Příkladem JS bundlerů je `webpack` a `browserify`. Oba jsou dobrou volbou, ale osobně preferuji `webpack`, protože nabízí více funkcí, které dělají vývoj velkých aplikací jednodušší. Protože je jeho dokumentace občas matoucí, mám připravenou [univerzální šablonu](https://github.com/petehunt/react-webpack-template). Napsal jsem také [Webpack návod](https://github.com/petehunt/webpack-howto) pro složitější případy.
 57 | 
 58 | Důležitá poznámka: `CommonJS` používá `require()` funkci k importování modulů a tak si ho hodně lidí plete s projektem nazvaným `require.js`. Z mnoha vážných důvodů vám doporučuji se `require.js` vyhnout. V React ekosystému navíc není moc populární.
 59 | 
 60 | 
 61 | ## Naučte se ES6
 62 | 
 63 | Kromě JSX (který jste se naučili v React tutoriálu), můžete narazit v React příkladech ještě na další prapodivnou syntax. Jedná se o ES6, což je nejnovější verze JavaScriptu a může se tak stát, že jí vidíte poprvé. Protože je natolik nová, nemá ještě moc velkou podporu v prohlížečích. Avšak správně nastavený bundler ji může přeložit do starší verze, tak aby ve všech prohlížečích fungovala.
 64 | 
 65 | Pokud chcete jednoduše začít vyvíjet v Reactu, **můžete učení se ES6 syntaxe přeskočit** nebo jí prostě přibrat po cestě.
 66 | 
 67 | Můžete narazit na názory, že ES6 třídy jsou preferovaná cesta pro vytváření React komponent. Toto není pravda. Většina lidí (včetně Facebooku) používá `React.createClass()`.
 68 | 
 69 | 
 70 | ## Naučte se routing
 71 | 
 72 | Všichni dnes mluví o “single-page aplikacích”. Tyto aplikace se načtou naráz. JavaScript v pozadí pak mění URL adresu, když uživatel klikne na odkaz či tlačítko, ale samotná stránka se znova už nenačítá. Správa adresního řádku je řízena tzv. **routerem**.
 73 | 
 74 | Nejpopulárnějším routerem v React ekosystému je [react-router](https://github.com/rackt/react-router). Pokud vytváříte single-page aplikaci, použijte ho, pakliže nemáte dobrý důvod proč ne.
 75 | 
 76 | **Nepoužívejte router, pokud nevytváříte single-page aplikaci**. Většina projektů beztak začíná pouze jako soubor několika menších komponent v rámci větší aplikace.
 77 | 
 78 | ## Naučte se Flux
 79 | 
 80 | Pravděpodobně jste slyšeli o Fluxu. Existuje *ohromné množství* bludů o Fluxu.
 81 | 
 82 | Spousta lidí začne vyvíjet aplikaci tak, že si sedne a začne přemýšlet o datovém modelu. Myslí si, že se nelze bez Fluxu obejít. **Tohle je ovšem špatná cesta, jak s Fluxem začít. Flux by měl být nasazen až když už máte několik různých komponent.**
 83 | 
 84 | React komponenty jsou organizované v hierarchii, kterou datový model většinou následuje. V takových případech vám Flux moc nepomůže. Občas však váš datový model má strukturu jinou. Jakmile si musíte předávat v React komponentách nadměrné množství `props` nebo některé komponenty začnou být příliš komplexní, až tehdy se vyplatí začít o Fluxu přemýšlet.
 85 | 
 86 | **Bezpečně poznáte chvíli, kdy budete Flux potřebovat. Pokud si nejste jisti, tak ho nepotřebujete.**
 87 | 
 88 | Pokud jste se rozhodli použít Flux, mrkněte na nejpopulárnější a dobře zdokumentovanou Flux knihovnu [Redux](http://redux.js.org/). Existuje spousta alternativ a může být těžké odolat pokušení je všechny prozkoumat. Moje rada však je, abyste použili tu nejpopulárnější.
 89 | 
 90 | ## Naučte se inline styly
 91 | 
 92 | Před érou Reactu hodně lidí používalo pro lepší správu CSS stylů komplikované preprocesory jako SASS. React zjednodušil psaní znovupoužitelných komponent, avšak i vaše styly mohou být méně komplikované. Mnoho lidí v naší komunitě (včetně mě) experimentuje s úplným odstraněním kaskádových stylů.
 93 | 
 94 | Jde o trochu šílenou myšlenku z mnoha důvodů. Komplikuje to media queries a může to představovat i výkonnostní problém. **Pokud začínáte s Reactem, použijte styly tak jak je normálně znáte**.
 95 | 
 96 | Jakmile se s Reactem více seznámíte, můžete vyzkoušet některé alternativní techniky. Jednou z populárních je [BEM](https://en.bem.info/). Doporučuji, abyste se postupně zbavovali CSS preprocesoru, protože React vám dává daleko mocnější cestu, jak styly znovu používat (znovu používáním komponent) a váš JavaScript bundler může vygenerovat více efektivní styly za vás. (Měl jsem o tomto [přednášku na OSCONu](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Na druhou stranu, pokud trváte na svém, React bude fungovat s preprocesorem stejně dobře jako jakákoliv jiná JS knihovna.
 97 | 
 98 | ## Naučte se server rendering
 99 | 
100 | Server rendering je často označován jako "univerzální" nebo "isomorfní" JavaScript. Znamená to, že můžete vzít na serveru vaši React komponentu a vyrendrovat ji do statického HTML, které pak pošlete do prohlížeče. To zlepší prvotní načtení stránky, protože uživatel nemusí čekat na stažení JS před tím, než se cokoliv zobrazí. React navíc umí použít předrendrované HTML ze serveru, takže se už nemusí v prohlížeči nic přepočítávat.
101 | 
102 | Server rendering se může hodit, pokud se vaše stránka načítá příliš pomalu nebo pokud chcete zlepšit indexaci ve vyhledávačích. Je sice pravda, že Google už umí indexovat i stránky generované JS v prohlížeči, avšak dle měření z ledna 2016 plyne, že to má vždy negativní efekt na výsledné umístění stránky. Pravděpodobně kvůli delší odezvě.
103 | 
104 | Server rendering navíc vyžaduje spoustu dalších nástrojů. React komponenty mohou být vyrendrované na serveru bez jakýchkoliv dalších úprav. Můžete tudíž nejdříve vytvořit celou aplikaci a o server rendering se starat až později. Nemusíte přepsat všechny své komponenty, aby fungoval.
105 | 
106 | ## Naučte se Immutable.js
107 | 
108 | [Immutable.js](https://facebook.github.io/immutable-js/) poskytuje sadu datových struktur, která vám může pomoci vyřešit jisté výkonnostní problémy při vývoji React aplikací. Je to skvělá knihovna a pravděpodobně ji použijete časem ve spoustě svých aplikací. Avšak lze se zcela obejít i bez ní. Minimálně do chvíle, než vám bude připadat vaše aplikace pomalá.
109 | 
110 | ## Naučte se Relay, Falcor atd
111 | 
112 | Tyto technologie vám mohou pomoci zredukovat počet AJAX požadavků. Jsou však pořád velmi experimentální. Pokud nemáte problém s nadměrným množstvím AJAX požadavků, nepotřebujete Relay ani Falcor.
113 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-howto
  2 | 
  3 | If you’re new to React (or frontend in general) you may find the ecosystem confusing. There are a few reasons for this.
  4 | 
  5 | * React has historically been targeted at early-adopters and experts
  6 | * Facebook only open-sources what it actually uses, so it doesn’t focus on tooling for smaller-than-Facebook projects
  7 | * There’s a lot of bad marketing masquerading as React guides
  8 | 
  9 | Throughout this document, I’ll assume you’ve built a web page with HTML, CSS and JavaScript.
 10 | 
 11 | ## Why should you listen to me?
 12 | 
 13 | There’s a ton of conflicting advice about React out there; why listen to me?
 14 | 
 15 | I was one of the original members of the Facebook team that built and open-sourced React. I’m no longer at Facebook and I’m now at a small startup, so I have a non-Facebook perspective as well.
 16 | 
 17 | ## How to tackle the React ecosystem
 18 | 
 19 | All software is built on a stack of technologies, and you need to understand enough of that stack to build your app. The reason why the React ecosystem of tooling seems overwhelming is because it’s always explained in the wrong order.
 20 | 
 21 | You should learn, in this order, **without skipping ahead or learning concurrently**:
 22 | 
 23 | * [React itself](#learning-react-itself)
 24 | * [`npm`](#learning-npm)
 25 | * [JavaScript “bundlers”](#learning-javascript-bundlers)
 26 | * [ES6](#learning-es6)
 27 | * [Routing](#learning-routing)
 28 | * [Flux](#learning-flux)
 29 | 
 30 | **You don't need to learn all of these to be productive with React.** Only move to the next step if you have a problem that needs to be solved.
 31 | 
 32 | Additionally, there are a few topics that are often mentioned in the React community that are "bleeding edge". The topics below are interesting, but they're difficult to understand, are far less popular than the above topics and **aren't required for most apps**.
 33 | * [Inline styles](#learning-inline-styles)
 34 | * [Server rendering](#learning-server-rendering)
 35 | * [Immutable.js](#learning-immutablejs)
 36 | * [Relay, Falcor, etc](#learning-relay-falcor-etc)
 37 | 
 38 | ## Learning React itself
 39 | 
 40 | It’s a common misconception that you need to waste a lot of time setting up tooling to start to learn React. In the official documentation you’ll find a [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) that you can save in an `.html` file and get started right away. **No tooling is required for this step, and don’t start learning extra tooling until you’re comfortable with React basics.**
 41 | 
 42 | I still think the easiest way to learn React is [the official tutorial](https://facebook.github.io/react/docs/tutorial.html).
 43 | 
 44 | ## Learning `npm`
 45 | 
 46 | `npm` is the Node.js package manager and is the most popular way front-end engineers and designers share JavaScript code. It includes a module system called `CommonJS` and lets you install command-line tools written in JavaScript. Read [this post](http://0fps.net/2013/01/22/commonjs-why-and-how/) for background on why `CommonJS` is necessary for browsers, or the [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) for more on the `CommonJS` API.
 47 | 
 48 | Most reusable components, libraries and tools in the React ecosystem are available as `CommonJS` modules and are installed with `npm`.
 49 | 
 50 | ## Learning JavaScript bundlers
 51 | 
 52 | For a number of good technical reasons `CommonJS` modules (i.e. everything in `npm`) cannot be used natively in the browser. You need a JavaScript “bundler” to “bundle” these modules into `.js` files that you can include in your web page with a `<script>` tag.
 53 | 
 54 | Examples of JavaScript bundlers include `webpack` and `browserify`. Both are good choices, but I prefer `webpack` since it has a lot of features that make development of large apps easier. Since its documentation can be confusing, I have a [plug-and-play template for getting started](https://github.com/petehunt/react-webpack-template) and I wrote a [how-to guide for webpack](https://github.com/petehunt/webpack-howto) for more complex use cases.
 55 | 
 56 | One thing to keep in mind: `CommonJS` uses the `require()` function to import modules, so a lot of people get confused and think that it has something to do with a project called `require.js`. For a number of technical reasons, I would suggest that you avoid `require.js`. It’s also not very popular in the React ecosystem.
 57 | 
 58 | ## Learning ES6
 59 | 
 60 | Outside of JSX (which you learned in the React tutorial), you may see some funny syntax in React examples. This is called ES6, and it’s the latest version of JavaScript so you may not have learned it yet. Since it’s so new, it’s not supported in browsers yet, but your bundler can translate it for you with the proper configuration.
 61 | 
 62 | If you just want to get things done with React, **you can skip learning ES6**, or try to pick it up along the way.
 63 | 
 64 | You may see some talk about ES6 classes being the preferred way to create React components. This is untrue. Most people (including Facebook) are using `React.createClass()`.
 65 | 
 66 | ## Learning routing
 67 | 
 68 | “Single-page applications” are all the rage these days. These are web pages that load once, and when the user clicks on a link or a button, JavaScript running on the page updates the address bar, but the web page is not refreshed. Management of the address bar is done by something called a **router**.
 69 | 
 70 | The most popular router in the React ecosystem is [react-router](https://github.com/rackt/react-router). If you’re building a single-page application, use it unless you have a good reason not to.
 71 | 
 72 | **Don’t use a router if you aren’t building a single-page application**. Most projects start out as smaller components inside of a larger application anyway.
 73 | 
 74 | ## Learning Flux
 75 | 
 76 | You’ve probably heard of Flux. There’s a *ton* of misinformation about Flux out there.
 77 | 
 78 | A lot of people sit down to build an app and want to define their data model, and they think they need to use Flux to do it. **This is the wrong way to adopt Flux. Flux should only be added once many components have already been built.**
 79 | 
 80 | React components are arranged in a hierarchy. Most of the time, your data model also follows a hierarchy. In these situations Flux doesn’t buy you much. Sometimes, however, your data model is not hierarchical. When your React components start to receive `props` that feel extraneous, or you have a small number of components starting to get very complex, then you might want to look into Flux.
 81 | 
 82 | **You’ll know when you need Flux. If you aren’t sure if you need it, you don’t need it.**
 83 | 
 84 | If you have decided to use Flux, the most popular and well-documented Flux library is [Redux](http://redux.js.org/). There are *a lot* of alternatives out there, and you’ll be tempted to evaluate lots of them, but my advice is to just stick with the most popular one.
 85 | 
 86 | ## Learning inline styles
 87 | 
 88 | Pre-React, a lot of people reused CSS styles with complicated style sheets built by preprocessors like SASS. Since React makes writing reusable components easy, your stylesheets can be less complicated. Many in the community (including myself) are experimenting with getting rid of stylesheets altogether.
 89 | 
 90 | This is a fairly crazy idea for a number of reasons. It makes media queries more difficult, and it's possible that there are  performance limitations using this technique. **When starting out with React, just style things the way you normally would.**
 91 | 
 92 | Once you've got a feel for how React works, you can look at alternate techniques. One popular one is [BEM](https://en.bem.info/). I recommend phasing out your CSS preprocessor, since React gives you a more powerful way to reuse styles (by reusing components) and your JavaScript bundler can generate more efficient stylesheets for you (I gave [a talk about this at OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). With that said, React, like any other JavaScript library, will work just fine with a CSS preprocessor.
 93 | 
 94 | Alternatively, you can also use [CSS Modules](http://glenmaddern.com/articles/css-modules), more specifically [react-css-modules](https://github.com/gajus/react-css-modules). With CSS Modules you'll still write CSS (or SASS/LESS/Stylus), but you can manage and compose your CSS files like you'd do with inline styles in React. And you don't need to worry about managing your class names using methodologies like BEM, as this will be handled for you under the hood by the module system.
 95 | 
 96 | ## Learning server rendering
 97 | 
 98 | Server rendering is often called "universal" or "isomorphic" JS. It means that you can take your React components and render them to static HTML on the server. This improves initial startup performance because the user does not need to wait for JS to download in order to see the initial UI, and React can re-use the server-rendered HTML so it doesn't need to generate it client-side.
 99 | 
100 | You need server rendering if you notice that your initial render is too slow or if you want to improve your search engine ranking. While it's true that Google now indexes client-rendered content, as of January 2016 every time it's been measured it's been shown to negatively affect ranking, potentially because of the performance penalty of client-side rendering.
101 | 
102 | Server rendering still requires a lot of tooling to get right. Since it transparently supports React components written without server rendering in mind, you should build your app first and worry about server rendering later. You won't need to rewrite all of your components to support it.
103 | 
104 | ## Learning Immutable.js
105 | 
106 | [Immutable.js](https://facebook.github.io/immutable-js/) provides a set of data structures that can help to solve certain performance issues when building React apps. It's a great library, and you'll probably use it a lot in your apps moving forward, but it's completely unnecessary until you have an appreciation of the performance implications. 
107 | 
108 | ## Learning Relay, Falcor etc
109 | 
110 | These are technologies that help you reduce the number of AJAX requests. They’re still very cutting-edge, so if you don’t have a problem with too many AJAX requests, you don’t need Relay or Falcor.
111 | 


--------------------------------------------------------------------------------
/README-ru.md:
--------------------------------------------------------------------------------
  1 | # react-howto
  2 | 
  3 | Для новичка, экосистема вокруг React (как и фронтэнда в целом) может показаться запутанной. Этому есть несколько причин.
  4 | 
  5 | * Изначально, React был нацелен на экспертов и ранних последователей
  6 | * Facebook открывает исходный код только тех продуктов, которые использует сам, т. е. не нацеленные на проекты-меньше-чем-Facebook
  7 | * Огромное количество гайдов по React совершенно разной сложности
  8 | 
  9 | Здесь и далее, я предполагаю, что вы уже знакомы с HTML, CSS и JavaScript.
 10 | 
 11 | ## Зачем меня слушать?
 12 | 
 13 | Существует множество противоречивых советов по React. Зачем слушать меня?
 14 | 
 15 | Я работал в команде Facebook, которая разработала и опубликовала React. Теперь я работаю не в Facebook, а в небольшом стартапе, поэтому могу говорить с точки зрения своей текущей позиции, а не Facebook.
 16 | 
 17 | ## Как подойти к экосистеме React
 18 | 
 19 | Все программное обеспечение строится на определенном стеке технологий, и вам нужно понимать этот стек, чтобы создать приложение. Основная причина того, почему экосистема React'а кажется непреодолимой, это потому что она постоянно объясняется в неправильном порядке.
 20 | 
 21 | Вы должны учиться в этом порядке, **ничего не пропуская и не изучая две вещи параллельно**:
 22 | 
 23 | * [React](#user-content-Изучение-самого-react)
 24 | * [`npm`](#user-content-Изучение-npm)
 25 | * [JavaScript “bundlers” (сборщики)](#user-content-Изучение-javascript-сборщиков)
 26 | * [ES6](#user-content-Изучение-es6)
 27 | * [Routing](#user-content-Изучение-роутинга)
 28 | * [Flux](#user-content-Изучение-flux)
 29 | 
 30 | **Вам не нужно это все, чтобы быть продуктивным с React.** Приступайте к следующему шагу, если у вас есть проблема, которую он решает.
 31 | 
 32 | Также, в React-сообществе есть несколько тем, которые являются "супер-современными практиками" ("bleeding edge"). Эти темы интересны, но разбираться в них сложно, они менее популярны, чем темы выше, и **не нужны для разработки большей части приложений**.
 33 | 
 34 | * [Инлайновые стили](#user-content-Изучение-инлайновых-стилей)
 35 | * [Рендер на стороне сервера](#user-content-Изучение-рендера-на-стороне-сервера)
 36 | * [Immutable.js](#user-content-Изучение-immutablejs)
 37 | * [Relay, Falcor, и т. д.](#user-content-Изучение-relay-falcor-и-т-п)
 38 | 
 39 | ## Изучение самого React
 40 | 
 41 | Существует заблуждение, что чтобы начать работу с React, нужен огромный инструментарий. Но это не так. В официальной документации вы найдете [copy-paste HTML шаблон](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm), который достаточно сохранить в `.html` файле и сразу же начать работать. **Для этого шага не нужен никакой инструментарий, и не стоит приниматься за него, пока вы не будете чувствовать себя комфортно с основами React.**
 42 | 
 43 | Я также считаю, что самый простой способ выучить React, это [официальный туториал](https://facebook.github.io/react/docs/tutorial.html).
 44 | 
 45 | ## Изучение `npm`
 46 | 
 47 | `npm` это менеджер пакетов Node.js и самый популярный способ для front-end разработчиков и дизайнеров делиться JavaScript кодом. Он включает модульную систему `CommonJS` и позволяет устанавливать инструменты командной строки, написанные JavaScript. Прочитайте [эту статью](http://0fps.net/2013/01/22/commonjs-why-and-how/), чтобы понять, почему и как используется `CommonJS`, или [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) для большей информации о `CommonJS` API.
 48 | 
 49 | Большая часть компонентов, библиотек и инструментария в экосистеме React доступны как `CommonJS` модули и устанавливаются с помощью `npm`.
 50 | 
 51 | ## Изучение JavaScript сборщиков
 52 | 
 53 | По определенному количеству технических причин, использование `CommonJS` модулей (то есть всего в `npm`) невозможно нативно в браузере. Вам понадобится JavaScript “bundler” для сборки этих модулей в `.js` файлы, которые затем можно будет включить в страницу тегом `<script>`.
 54 | 
 55 | Примерами JavaScript сборщиков являются `webpack` и `browserify`. Они оба являются хорошим выбором, но я предпочитаю `webpack`, так как он имеет определенный набор фич, упрощающих разработку крупных приложений. Так как документация может показаться запутанной, у меня есть [шаблон для быстрого старта](https://github.com/petehunt/react-webpack-template), и я написал [how-to гайд по webpack](https://github.com/petehunt/webpack-howto) для более сложных кейсов.
 56 | 
 57 | Стоит запомнить: `CommonJS` использует функцию `require()` для импорта модулей, из-за чего некоторые пользователи начинают думать, что это нечто связанное с библиотекой `require.js`. По определенному количеству технических причин, я советую избегать `require.js`. Этот выбор не популярен в среде React.
 58 | 
 59 | ## Изучение ES6
 60 | 
 61 | Кроме JSX (который вы изучили в туториале React), вы могли заметить несколько забавных синтаксических конструкций в примерах. Это называется ES6, самая последняя версия JavaScript, с которой вы еще можете быть не знакомы. Из-за новизны, ES6 еще не полностью доступен в браузерах, но ваш сборщик может транслировать его в поддерживаемый JavaScript после определенной настройки.
 62 | 
 63 | **Вам не обязательно знать ES6 для разработки на React**, вы можете выучить его попутно.
 64 | 
 65 | Вы также могли слышать разговоры о том, что ES6-классы являются предпочитаемым способом создания компонентов React. Это не так. Большинство людей (включая Facebook) используют `React.createClass()`.
 66 | 
 67 | ## Изучение роутинга
 68 | 
 69 | “Одностраничные приложения” (Single-page applications или SPA) - современная мода. Это веб-странички которые загружаются один раз, и, когда пользователь кликает по ссылке или кнопке, JavaScript, работающий на странице, обновляет адресную строку и контент, не перезагружая страницу целиком. Управление адресной строкой осуществляется **router** (роутером).
 70 | 
 71 | Самый популярный роутер в экосистеме React [react-router](https://github.com/rackt/react-router). Если вы разрабатываете одностраничное приложение, используете его, если только у вас нет хорошей причины не делать этого.
 72 | 
 73 | **Не используйте роутер, если вы не создаете single-page application**. Большинство проектов все равно начинают с маленьких компонентов внутри имеющегося большого приложения.
 74 | 
 75 | ## Изучение Flux
 76 | 
 77 | Скорее всего, вы слышали о Flux. Про него имеется *тонна* дезинформации в сети.
 78 | 
 79 | Куча людей пытаются определиться с моделью данных и считают, что для этого им обязательно нужно использовать Flux. **Это неправильный путь к внедрению Flux на свой проект. Flux должен быть добавлен только после того, как большинство компонентов уже будут созданы.**
 80 | 
 81 | Компоненты React'а собраны в иерархию. В большинстве случаев, ваша модель данных также будет следовать этой иерархии. В этих ситуациях Flux не приносит особого выигрыша. Иногда, тем не менее, ваша модель данных не иерархична. Если ваши React компоненты получают `props`, которые кажутся "внешними", или у вас есть некоторое количество компонентов, которые начинают становиться сильно сложными, возможно вам стоит присмотреться к Flux.
 82 | 
 83 | **Вы поймете, когда вам понадобится Flux. Если вы не уверены, что он вам нужен, то он вам не нужен.**
 84 | 
 85 | Если вы решили использовать Flux, самой популярной и документированной Flux-библиотекой является [Redux](http://redux.js.org/). Также есть *множество* альтернатив, возможно вы соблазнитесь попробовать их, но мой совет - использовать самую популярную.
 86 | 
 87 | ## Изучение инлайновых стилей
 88 | 
 89 | Пре-React, большинство людей использовали CSS-препроцессоры типа SASS для переиспользования стилей. React делает написание переиспользуемых компонентов простым, также упрощая и написание стилей. Многие из сообщества (включая меня) экспериментируют над тем, чтобы совсем избавиться от CSS.
 90 | 
 91 | В силу ряда причин, это относительно безумная идея. Она усложняет написание media queries, и, возможно, есть определенные ограничния по производительности. **Если вы только что начали работать с React, пишите css-стили так как вы привыкли.**
 92 | 
 93 | Как только вы почувствуете то, как React работает, обратите внимание на альтернативные техники. Одна из популярных, это [BEM](https://en.bem.info/). Я бы порекомендовал избавляться от CSS-препроцессора, так как React предоставляет более гибкий путь переиспользования стилей (через переиспользование компонентов) и ваш JavaScript-сборщик может генерировать гораздо более эффективные таблицы стилей для вас ([доклад на эту тему на OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Вместе с тем, React, как и любая другая JavaScript библиотека, сможет работать также хорошо с любым CSS-препроцессором.
 94 | 
 95 | ## Изучение рендера на стороне сервера
 96 | 
 97 | Серверный рендеринг часто называется "универсальным" или "изоморфным" JS. Это означает что вы можете взять ваши React-компоненты и отрендерить их в статический HTML на сервере. Это ускоряет первоначальную загрузку страницы, так как пользователю не нужно ждать, пока скачается весь JS, чтобы увидеть UI, а React, в свою очередь, может переиспользовать HTML, сгенерированный на сервере, не рендеря ничего на клиенте повторно.
 98 | 
 99 | Серверный рендеринг вам понадобится, если вы посчитаете, что первичный рендер страницы слишком медленный, или чтобы улучшить ранжирование в поисковиках. Да, Google индексирует контент, рендеренный на клиенте, но по состоянию на январь 2016 каждое измерение показывало, что это негативно влияет на ранжирование, потенциально из-за производительности рендера.
100 | 
101 | Также серверный рендеринг требует большого количества инструментария для "правильной" реализации. Так как поддержка React-компонентов написанных без мысли о серверном рендеринге, в целом прозрачна, рекомендуется сначала писать приложение, а потом задумываться о нем. Вам не прийдется переписывать все ваши компоненты в случае решения о переходе.
102 | 
103 | ## Изучение Immutable.js
104 | 
105 | [Immutable.js](https://facebook.github.io/immutable-js/) предоставляет набор структур данных, которые помогают решать определенные проблемы с производительностью в React-приложениях. Это отличная библиотека, и, скорее всего, вы будете часто использовать ее с ростом вашего приложения, но она абсолютно не является требованием, пока вы не столкнетесь с проблемами производительности.
106 | 
107 | ## Изучение Relay, Falcor и т. п.
108 | 
109 | Эти технологию помогают уменьшить количество AJAX-запросов. Они все еще являются относительно экспериментальными, так что если у вас нет проблем со слишком большим количеством AJAX запросов, вам не нужны Relay или Falcor.
110 | 


--------------------------------------------------------------------------------
/README-vi.md:
--------------------------------------------------------------------------------
  1 | # react-howto
  2 | 
  3 | Nếu bạn mới làm quen với React (hoặc phần front-end nói chung) thì bạn sẽ thấy hệ sinh thái tương đối khó hiểu. Có một vài lí do giải thích cho việc đó.
  4 | 
  5 | * Trước đây, React mục tiêu hướng tới nhóm đối tượng tiếp cận sớm và các chuyên gia
  6 | * Facebook chỉ thực hiện chuyển thành mã nguồn mở khi mà React được thực tế sử dụng, do đó mà không có sự quan tâm vào việc phát triển công cụ cho các dự án nhỏ hơn Facebook.
  7 | * Có quá nhiều marketing ảo giả tạo dưới dạng các hướng dẫn về React.
  8 | 
  9 | Trong suốt tài liệu này, tôi sẽ giả sử là bạn đã từng có kinh nghiệm xây dựng web với HTML, CSS và Javascript.
 10 | 
 11 | ## Tại sao bạn nên nghe theo tôi?
 12 | 
 13 | Có hàng tấn lời khuyên mâu thuẫn về React bên ngoài; vậy tại sao phải nghe theo tôi nhỉ?
 14 | 
 15 | Tôi là một trong những thành viên đầu tiên của nhóm Facebook tham gia xây dựng và triển khai mã nguồn mở thư viện React này. Thêm cả, vì tôi không còn làm ở Facebook nữa, nên tôi có được cái nhìn khách quan không phụ thuộc Facebook nữa.
 16 | 
 17 | ## Làm thế nào để tương tác với hệ sinh thái của React
 18 | 
 19 | Tất cả các phần mềm đều được xây dựng dựa trên một tập hợp các nền tảng công nghệ, và bạn cần phải hiểu rõ về chúng đủ để xây dựng ứng dụng. Nguyên nhân khiến cho công cụ trong hệ sinh thái của React trở nên phức tạp là vì luôn bị giải thích sai thứ tự.
 20 | 
 21 | Bạn nền học, theo thứ tự này, **không cần bỏ qua phía trước hoặc học đồng thời**:
 22 | 
 23 | * [Thư viện React](#tìm-hiểu-về-react)
 24 | * [`npm`](#tìm-hiểu-về-npm)
 25 | * [JavaScript “bundlers”](#tìm-hiểu-về-các-công-cụ-đóng-gói-javascript)
 26 | * [ES6](#tìm-hiểu-về-es6)
 27 | * [Routing](#tìm-hiểu-về-routing)
 28 | * [Flux](#tìm-hiểu-về-flux)
 29 | 
 30 | **Bạn không cần phải học tất cả những thứ này để có thể làm việc hiệu quả với React.** Chỉ nên chuyển sang bước tiếp theo nếu như bạn thấy có vấn đề cần được giải quyết.
 31 | 
 32 | Thêm nữa, có vài chủ đề thường được nhắc đến trong cộng đồng React mà khá "nóng hổi". Những chủ đề dưới đây khá là thú vị nhưng khó để có thể hiểu được và ít phổ biến hơn so với các chủ đề trên và **không cần thiết khi xây dựng ứng dụng**.
 33 | 
 34 | * [Inline styles](#tìm-hiểu-về-inline-styles)
 35 | * [Server rendering](#tìm-hiểu-về-server-rendering)
 36 | * [Immutable.js](#tìm-hiểu-về-immutablejs)
 37 | * [Relay, Falcor, etc](#tìm-hiểu-về-relay-falcor-etc)
 38 | 
 39 | ## Tìm hiểu về React
 40 | 
 41 | Có một điều hay bị hiểu nhầm đó là bạn sẽ phí phạm nhiều thời gian trong việc thiết lập công cụ để bắt đầu học React. Trong tài liệu chính thống bạn sẽ thấy [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) là bạn chỉ cần lưu lại một file định dang `.html` và có thể bắt đầu ngay được. **Không cần bất cứ công cụ nào ở bước này, và đừng bắt đầu học các công cụ bổ sung cho tới khi nào bạn cảm thấy thoải mái với React một cách cơ bản.**
 42 | 
 43 | Tôi vẫn nghĩ cách học React đơn giản nhất đó là [tài liệu chính thống](https://facebook.github.io/react/docs/tutorial.html).
 44 | 
 45 | ## Tìm hiểu về `npm`
 46 | 
 47 | `npm` là công cụ quản lý package của Node.js và là phương pháp phổ biến nhất để các lập trình viên front-end và các nhà thiết kế chia sẻ mã nguồn Javascript. Nó bao gồm một hệ thống quản lý module gọi là `CommonJS` và cho phép bạn cài đặt bất cứ công cụ command-line nào được viết bằng Javascript. Hãy đọc [bài này](http://0fps.net/2013/01/22/commonjs-why-and-how/) để biết vì sao `CommonJS` là cần thiết với các trình duyệt, hoặc [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) để biết thêm về `CommonJS` API.
 48 | 
 49 | Hầu hết các components, thư viện và công cụ tái sử dụng trong hệ sinh thái của React đều được triển khai như là thành các module `CommonJS` và có thể cài đặt thông qua `npm`.
 50 | 
 51 | ## Tìm hiểu về các công cụ đóng gói Javascript
 52 | 
 53 | Vì một vài lí do kĩ thuật mà module `CommonJS` (ví dụ, các thư viện trên `npm`) không thể sử dụng native trên trình duyệt. Bạn cần có một "công cụ đóng gói" Javascript để "đóng gói" các modules này thành các files `.js` mà có thể include được trên trang web qua thẻ `<script>`.
 54 | 
 55 | Một số ví dụ về công cụ đóng gói Javascript bao gồm `webpack` và `browserify`. Cả hai đều là sự lựa chọn tốt, nhưng tôi thích `webpack` hơn vì nó có nhiều tính năng hỗ trợ tốt cho việc xây dựng lớn một cách dễ dàng hơn. Vì tài liệu của nó khá khó hiểu, tôi có tạo ra [template để bắt đầu ngay](https://github.com/petehunt/react-webpack-template) và tôi có viết [hướng dẫn về webpack](https://github.com/petehunt/webpack-howto) với các use cases phức tạp hơn.
 56 | 
 57 | Một điều nên nhớ là `CommonJS` sử dụng hàm `require()` để nhập liên kết các modules, vì thế nhiều người trỏ nên thắc mắc và nghĩ nó có liên quan gì đó tới một project khác có tên là `require.js`. Vì nhiều lý do kĩ thuật, tôi khuyên bạn nên tránh sử dụng `require.js`. Nó cũng không được sử dụng phổ biến trong môi trường của React.
 58 | 
 59 | ## Tìm hiểu về ES6
 60 | 
 61 | Ngoài JSX (mà bạn học trong các hướng dẫn về React), bạn sẽ thấy nhiều cú pháp thú vị trong các ví dụ. Chúng được gọi là ES6, và đó là phiên bản mới nhất của Javascript mà bạn chưa học tới. Vì còn quá mới nên chưa được hỗ trợ trên các trình duyệt, nhưng các công cụ đóng gói sẽ thực hiện phiên dịch với cấu hình đúng cho bạn để có thể sử dụng được trên trình duyệt.
 62 | 
 63 | Nếu bạn muốn hoàn thiện nhanh với React, **bạn có thể bỏ qua việc học ES6**, hoặc có thể lựa chọn khi đang làm giữa chừng.
 64 | 
 65 | Bạn có thể thấy nhiều hội thảo về lớp trong ES6 là cách tốt nhất để tạo các React components. Điều này là không đúng. Hầu hết mọi người (bao gồm cả Facebook) đang sử dụng `React.createClass()`.
 66 | 
 67 | ## Tìm hiểu về routing
 68 | 
 69 | "Các ứng dụng single-page" trở nên khá rầm rộ ngày nay. Đây là những trang web mà chỉ thực hiện khởi tạo một lần, và khi người dùng ấn vào một đường dẫn hay nút ấn thì Javascript trên trang web sẽ thực thi mà trang web không cần phải reload lại. Việc quản lý địa chỉ trên thanh địa chỉ được thực hiện bở **router**.
 70 | 
 71 | Router được sử dụng phổ biến nhất trong hệ sinh thái React là [react-router](https://github.com/rackt/react-router). Nếu như bạn đang xây dựng một ứng dụng single-page, hãy sử dụng nó trừ khi bạn có lý do mà không thể sử dụng.
 72 | 
 73 | **Đừng nên sử dụng router nếu như bạn không xây dựng ứng dụng single-page**. Hầu hết các dự án đều bắt đầu từ một component nhỏ bên trong của một ứng dụng lớn.
 74 | 
 75 | ## Tìm hiểu về Flux
 76 | 
 77 | Chắc hẳn bạn đã từng nghe về Flux. Có **quá nhiều** thông tin không đúng về Flux.
 78 | 
 79 | Nhiều người cùng tập hợp lại để xây dựng một ứng dụng và muốn định nghĩa cấu trúc dữ liệu và họ nghĩ sẽ cần sử dụng tới Flux để làm được việc đó. **Tiếp cận Flux như thế là sai. Flux chỉ nên được thêm khi mà các components đã được xây dựng rồi.**
 80 | 
 81 | Các components trong React được sắp xếp phân bậc. Phần lớn thời gian, cấu trúc dữ liệu cũng đi theo một cấp. Trong những tình huống này thì Flux không thể giúp được gì nhiều. Tuy nhiên, đôi lúc cấu trúc dữ liệu của bạn lại không theo tầng nào cả. Khi các React components bắt đầu nhận `props` mà có vẻ không liên quan, hoặc bạn có một số lượng nhỏ các components bắt đầu trở nên phức tạp, thì bạn có thể muốn thử với Flux.
 82 | 
 83 | **Bạn sẽ biết khi nào bạn cần Flux. Nếu bạn không chắc chắn là bạn cần, thì bạn không cần.**
 84 | 
 85 | Một khi bạn đã quyết định sử dụng Flux, sử dụng thư viện phổ biến và đầy đủ tài liệu nhất là [Redux](http://redux.js.org/). Có **rất nhiều** sự lựa chọn khác, và bạn sẽ bị cám dỗ vào việc đi đánh giá so sánh chúng, nhưng lời khuyên của tôi dành cho bạn là chỉ nên chọn với thư viện dược dùng phổ biến nhất.
 86 | 
 87 | ## Tìm hiểu về inline styles
 88 | 
 89 | Trước React, nhiều người tái sử dụng CSS với các định dạng văn bản phức tạp xây dựng qua các tiền xử lý CSS như SASS. Nhưng sau đó React hỗ trợ để tạo các compoents có thể tái sử dụng một cách đơn giản, các định dạng CSS cũng trỏ nên đỡ phức tạp. Đa phần trong cộng đồng (bao gồm cả tôi) cũng đang thí nghiệm với việc loại bỏ các định dạng đó.
 90 | 
 91 | Đây có thể là một ý tưởng điên rồ vì mấy lí do. Nó làm cho media queries trở nên khó hơn, và có thể sinh ra hạn chế về hiệu năng khi sử dụng kĩ thuật này. **Khi bắt đầu với React, chỉ cần style như bình thường**.
 92 | 
 93 | Một khi bạn hiểu được React hoạt động thế nào, bạn có thể thử qua các phương pháp khác. Một phương pháp phổ biến đó là [BEM](https://en.bem.info/). Tôi khuyên các bạn bỏ các tiền xử lý CSS, vì React hỗ trợ bạn một cách tái sử dụng styles tốt hơn và công cụ đóng gói Javascript có thể sinh ra các stylesheets tối ưu hơn (tôi có [chia sẻ này tại OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). React, như bất cứ một thư viện Javascript nào khác, vẫn hoạt động bình thường với các tiền xử lý CSS.
 94 | 
 95 | ## Tìm hiểu về server rendering
 96 | 
 97 | Server rendering thường được gọi là "toàn bộ" hay "đồng bộ" JS. Điều đó có nghĩa là bạn có thể lấy bất cứ React components nào và render chúng thành HTML tĩnh trên server. Điều này cải thiện được tốc độ ban đầu vì người dùng không cần phải chờ JS thực hiện download để có thể thấy được UI ban đầu, và React có thể tái sử dụng HTML đã được render phía server, vì vậy mà không cần xử lý ở phía client.
 98 | 
 99 | Bạn cần sử dụng server rendering khi mà bạn thấy việc render ban đầu trở nên quá chậm hoặc bạn muốn cải thiện thứ hạng tìm kiếm. Mặc dù Google bây giờ đã thực hiện index các nội dung render phía client, nhưng tại thời điểm tháng một 2016, mỗi khi được lấy ra đo lường thì thấy rõ thứ hạng bị ảnh hướng đi xuống, có khả năng là do vi phạm về tốc độ render phía client.
100 | 
101 | Việc render phía server vẫn cần nhiều công cụ để làm cho nó trở nên chính xác. Vì việc này mặc định được hỗ trợ trong các React components mà không cần quan tâm tới việc render phía server, bạn nên xây dựng ứng dụng trước và quan tâm tới việc render phía server sau. Bạn sẽ không cần thiết phải viết lại tất cả các components để xử lý việc dó.
102 | 
103 | ## Tìm hiểu về Immutable.js
104 | 
105 | [Immutable.js](https://facebook.github.io/immutable-js/) cung cấp một tập hợp cấu trúc dữ liệu có thể hỗ trợ giải quyết các vấn đề về tối ưu hoá khi xây dựng ứng dụng React. Đấy là một thư viện tuyệt vời, và bạn chắc hẳn sẽ sử dụng khá nhiều khi xây dựng ứng dụng về sau. Tuy nhiên thì nó lại không cần thiết cho tới khi bạn quan tâm tới tối ưu hoá.
106 | 
107 | ## Tìm hiểu về Relay, Falcor etc
108 | 
109 | Đây là những công nghệ giúp bạn giảm số lượng AJAX requests. Những kĩ thuật này vẫn còn khá là mới mẻ, vì vậy, nếu bạn không có vấn đề với quá nhiều AJAX requests thì bạn không cần tới Relay hay Falcor.
110 | 


--------------------------------------------------------------------------------
/README-es.md:
--------------------------------------------------------------------------------
  1 | # react-howto
  2 | 
  3 | Sí eres nuevo con React (o con el desarrollo front-end en general) puedes encontrar confuso su ecosistema. Existen unas cuantas razones para ello.
  4 | 
  5 | * Históricamente React se ha enfocado en early-adopters y expertos
  6 | * Facebook sólo libera lo que realmente usa, por lo que no  se centra en herramientas para proyectos "más pequeños que Facebook"
  7 | * Hay muchos artículos de marketing enmascarados como guías de React
  8 | 
  9 | A lo largo de este documento, asumiré que has construido una página con HTML, CSS y JavaScript.
 10 | 
 11 | ## ¿Por qué escucharme a mí?
 12 | 
 13 | Hay un montón de consejos conflictivos sobre React ahí fuera, ¿por qué escucharme a mí?
 14 | 
 15 | Fui uno de los miembros del equipo original de Facebook que construyo y libero React. Ya no estoy en Facebook, ahora estoy en una pequeña startup, por lo que tengo también una perspectiva "no-Facebook".
 16 | 
 17 | ## Cómo abordar el ecosistema de React
 18 | 
 19 | Todo software se construye con un stack tecnológico, y es necesario entender lo suficiente de ese stack para construir una aplicación. La razón por la que el ecosistema de herramientas de React parece abrumador es porque siempre ha sido explicado en el orden incorrecto.
 20 | 
 21 | Debes aprenderlo en este orden, **sin saltarte ningún paso o hacerlo concurrentemente**:
 22 | 
 23 | * [React en sí](#aprendiendo-react-en-sí)
 24 | * [`npm`](#aprendiendo-npm)
 25 | * [JavaScript “bundlers”](#aprendiendo-javascript-bundlers)
 26 | * [ES6](#aprendiendo-es6)
 27 | * [Enrutamiento](#aprendiendo-enrutamiento)
 28 | * [Flux](#aprendiendo-flux)
 29 | 
 30 | **No necesitas aprender todas ellas para ser productivo con React.** Sólo muévete al siguiente paso si tienes un problema que necesita ser resuelto.
 31 | 
 32 | Adicionalmente, hay unos cuantos temas que a menudo son categorizados en la comunidad de React como "bleeding edge"<sup>[1](#f1)</sup>. Los temas de abajo son interesantes, pero difíciles de entender, de lejos menos populares que los de arriba y **no son requeridos para la mayoría de aplicaciones**.
 33 | * [Estilos inline](#aprendiendo-estilos-inline)
 34 | * [Renderizado en el servidor](#aprendiendo-renderizado-en-el-servidor)
 35 | * [Immutable.js](#aprendiendo-immutablejs)
 36 | * [Relay, Falcor, etc.](#aprendiendo-relay-falcor-etc)
 37 | 
 38 | ## Aprendiendo React en sí
 39 | 
 40 | Es un error común pensar que se necesita perder mucho tiempo preparando un entorno para comenzar a aprender React. En la documentación oficial encontrarás una [plantilla HTML de copia y pega](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) que puedes guardar en un fichero `.html` y empezar inmediatamente. **No se necesita ninguna herramienta para este paso, y no empieces a aprender herramientas extras hasta que no te sientas cómodo con lo básico de React.**
 41 | 
 42 | Todavía pienso que la forma más fácil de aprender React es [el tutorial oficial](https://facebook.github.io/react/docs/tutorial.html).
 43 | 
 44 | ## Aprendiendo `npm`
 45 | 
 46 | `npm` es el gestor de paquetes de Node.js y la forma más popular en la que diseñadores y desarrolladores de front-end comparten código JavaScript. Incluye un módulo de sistema llamado `CommonJS` y te permite instalar herramientas de línea de comando escritas en JavaScript. Lee [este artículo](http://0fps.net/2013/01/22/commonjs-why-and-how/) para entender porque `CommonJS` es necesario en los navegadores, o la [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) para más información en la API de `CommonJS`.
 47 | 
 48 | La mayoría de componentes reusables, librerías y herramientas en el ecosistema de React están disponibles como módulos `CommonJS` y se instalan con `npm`.
 49 | 
 50 | ## Aprendiendo JavaScript bundlers
 51 | 
 52 | Por un buen número de razones técnicas los módulos `CommonJS` (p.ej. cualquiera en `npm`) no puede ser usado nativamente en el navegador. Necesitas un  JavaScript “bundler” para "convertir" estos módulos en ficheros `.js` que puedas incluir en tus páginas web con un tag `<script>`.
 53 | 
 54 | Ejemplos de JavaScript bundlers incluye `webpack` y `browserify`. Ambos son buenas opciones, pero prefiero `webpack` ya que tiene muchas características que hacen el desarrollo de aplicaciones grandes más sencillo. Ya que su documentación puede ser confusa, tengo una [plantilla plug-and-play para empezar](https://github.com/petehunt/react-webpack-template) y escribí una [guía how-to para webpack](https://github.com/petehunt/webpack-howto) para casos de uso más complejos.
 55 | 
 56 | Una cosa a tener en cuenta: `CommonJS` utiliza la función `require()` para importar modules, por lo que mucha gente se confunde y piensa que tiene algo que ver con un proyecto llamado `require.js`. Por una cuantas razones técnicas, te sugiero evites utilizar `require.js`. Además no es muy popular en el ecosistema de React.
 57 | 
 58 | ## Aprendiendo ES6
 59 | 
 60 | Aparte de JSX (el cual has aprendido en el tutorial de React), puede que encuentres sintaxis "divertida" en ejemplos de React. Esto se llama ES6, y es la última versión de JavaScript así que seguramente no lo hayas aprendido aún. Al ser tan nuevo, no está soportado en los navegadores aún, pero tu bundler puede traducirlo por ti con la configuración adecuada.
 61 | 
 62 | Si únicamente quieres terminar las cosas con React, **puedes saltarte ES6**, o tratar de incorporarlo en el camino.
 63 | 
 64 | ## Aprendiendo enrutamiento
 65 | 
 66 | Las “single-page applications” (o aplicaciones de página única) son lo más estos días. Estas son páginas que se cargan una vez, y cuando el usuario hace click en un enlace o botón, el JavaScript corriendo en la página actualizar la barra de direcciones, pero la página web no es recargada. La gestión de la barra de direcciones es hecha por algo llamado **router**.
 67 | 
 68 | El router más popular en el ecosistema de React es [react-router](https://github.com/rackt/react-router). Si estás haciendo una aplicación de página única, úsalo a no ser que tengas una buena razón para no hacerlo.
 69 | 
 70 | **No uses un router si no estás construyendo una aplicación de página única**. De cualquier manera la mayoría de proyectos comienzan cómo pequeños componentes dentro de una aplicación más grande.
 71 | 
 72 | ## Aprendiendo Flux
 73 | 
 74 | Probablemente habrás oído hablar de Flux. Hay un *montón* de información errónea sobre Flux ahí fuera.
 75 | 
 76 | Mucha gente se sienta a construir una aplicación y quiere definir su modelo de datos, y piensan que necesitan Flux para hacerlo. **Esta es la manera incorrecta de adoptar Flux. Flux sólo debería ser añadido una vez se han hecho ya algunos componentes.**
 77 | 
 78 | Los componentes de React están organizado en una jerarquía. La mayoría de las veces, tu modelo de datos también sigue una jerarquía. Es estas situaciones Flux no te aporta demasiado. A veces, sin embargo, tu modelo de datos no es jerárquico. Cuando tus componentes de React empiezan a recibir `props` que parecen extrañas,  o tienes un pequeño número de componentes que empiezan a ser muy complejos, entonces puede que quieras considerar usar Flux.
 79 | 
 80 | **Sabrás cuando necesitas Flux. Sí no estás seguro de si lo necesitas, es que no lo necesitas.**
 81 | 
 82 | Si has decidido usar Flux, la librería más popular y bien documentada es [Redux](http://redux.js.org/). Hay *muchas* alternativas, y estarás tentado a evaluar muchas de ellas, pero mi consejo es que te quedes sólo con la más popular.
 83 | 
 84 | ## Aprendiendo estilos inline
 85 | 
 86 | Antes de React, mucha gente reusaba estilos de CSS con complicadas hojas de estilos construidas con preprocesadores cómo SASS. Ya que React hace sencillo escribir componentes reusables, tus hojas de estilo pueden ser menos complicadas. Muchos en la comunidad (incluido yo) están experimentando con deshacerse de las hojas de estilo del todo.
 87 | 
 88 | Esta es una idea bastante loca por un buen número de razones. Hace las media queries más complicadas, y es posible que existan limitaciones de rendimiento usando esta técnica. **Cuando empieces con React, sólo pone el estilo a las cosas de la forma que normalmente lo harías.**
 89 | 
 90 | Una vez entiendes cómo funciona React, puedes considerar técnicas alternativas. Una de las más populares es [BEM](https://en.bem.info/). Te recomiendo reducir gradualmente tus pre-procesadores CSS, ya que React te ofrece una manera más potente de reusar los estilos (reutilizando componentes) y tu bundler de JavaScript puede generar hojas de estilos más eficientes por ti (di [una charla sobre esto en la OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Dicho esto, React, como cualquier otra librería de JavaScript, funcionará bien con un pre-procesador CSS.
 91 | 
 92 | ## Aprendiendo renderizado en el servidor
 93 | 
 94 | El renderizado en el servidor (o server rendering) es a menudo llamado JavaScript "universal" o "isomorfo". Esto significa que puedes tomar tus componentes de React y renderizarlos como HTML estático en el servidor. Es mejora el rendimiento de la carga inicial ya que el usuario no necesita esperar a que el JS sea descargado para ver la interfaz inicial, y React puede reusar el HTML renderizado en el servidor así que no necesita generarlo en el lado del cliente.
 95 | 
 96 | Necesitas hacer renderizado en el servidor si te das cuentas que renderizado inicial es demasiado lento si quieres mejorar tu ranking en buscadores (Search Engine Ranking). Aunque es verdad que Google ahora indexa el contenido renderizado en el cliente, desde Enero de 2016 cada vez que se ha medido se ha visto que afecta negativamente al ranking, seguramente por la penalización de rendimiento del renderizado en cliente.
 97 | 
 98 | El renderizado en el servidor todavía requiere de muchas herramientas para hacerlo bien. Ya que React soporta transparentemente que los componentes sean escritos sin el renderizado en servidor en mente, puedes construir una aplicación primero y preocuparte del renderizado en el servidor después. No necesitarás reescribir todos tus componentes para que funcione.
 99 | 
100 | ## Aprendiendo Immutable.js
101 | 
102 | [Immutable.js](https://facebook.github.io/immutable-js/) aporta una colección de estructuras de datos que ayudan a resolver ciertos problemas de rendimiento cuando se construyen aplicaciones con React. Es una gran librería, y seguramente la usarás en muchas de tus aplicaciones más adelante, pero es completamente innecesaria hasta que empieces a apreciar problemas de rendimiento. 
103 | 
104 | ## Aprendiendo Relay, Falcor, etc.
105 | 
106 | Son tecnologías que te ayudan a reducir el número de peticiones AJAX. Son todavía muy innovadoras, así que si no tienes problemas con demasiadas peticiones AJAX, no necesitas Relay o Falcor.
107 | 
108 | ----------
109 | <a name="f1">1</a>: Tecnologías beeding-edge https://es.wikipedia.org/wiki/Bleeding_edge_technology


--------------------------------------------------------------------------------