Full Code of petehunt/react-howto for AI

Repository: petehunt/react-howto
Branch: master
Commit: 791949c32e04
Files: 18
Total size: 180.6 KB

Directory structure:
gitextract_cwv9fmz9/

├── README-cs.md
├── README-de.md
├── README-es.md
├── README-fr.md
├── README-gre.md
├── README-ita.md
├── README-ko.md
├── README-lv.md
├── README-my.md
├── README-pl.md
├── README-pt-Br.md
├── README-pt.md
├── README-ru.md
├── README-tr.md
├── README-uk.md
├── README-vi.md
├── README-zh.md
└── README.md

================================================
FILE CONTENTS
================================================

================================================
FILE: README-cs.md
================================================
# react-howto

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?

* React byl od počátku cílen na experty a ty, kteří rádi zkoušejí nové technologie
* Facebook opensourcuje pouze věci, které sám používá a přirozeně je necílí na menší projekty
* Na internetu je spousta zavádějících React návodů

Tento návod předpokládá, že jste už někdy vytvořili stránku s HTML, CSS a JavaScriptem.

## Proč byste měli poslouchat mě?

Existuje spousta protichůdných rad ohledně Reactu. Proč byste měli dát zrovna na ty mé?

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.

## Jak se neztratit v React ekosystému

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í.

Měli byste se držet tohoto pořadí, **bez přeskakování nebo učení se více věcí naráz**:

* [Samotný React](#user-content-naučte-se-samotný-react)
* [`npm`](#user-content-naučte-se-npm)
* [JavaScript “bundlers”](#user-content-naučte-se-javascript-bundlery)
* [ES6](#user-content-naučte-se-es6)
* [Routing](#user-content-naučte-se-routing)
* [Flux](#user-content-naučte-se-flux)

**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.

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**.

* [Inline styly](#user-content-naučte-se-inline-styly)
* [Server rendering](#user-content-naučte-se-server-rendering)
* [Immutable.js](#user-content-naučte-se-immutablejs)
* [Relay, Falcor, atd](#user-content-naučte-se-relay-falcor-atd)

## Naučte se samotný React

Č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.**

Za nejsnažší cestu k naučení Reactu stále pokládám [oficiální tutoriál](https://facebook.github.io/react/docs/tutorial.html).

## Naučte se `npm`

`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.

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`.

## Naučte se JavaScript bundlery

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>`.

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.

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í.

## Naučte se ES6

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.

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ě.

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()`.

## Naučte se routing

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**.

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.

**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.

## Naučte se Flux

Pravděpodobně jste slyšeli o Fluxu. Existuje *ohromné množství* bludů o Fluxu.

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.**

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.

**Bezpečně poznáte chvíli, kdy budete Flux potřebovat. Pokud si nejste jisti, tak ho nepotřebujete.**

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ší.

## Naučte se inline styly

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ů.

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**.

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.

Další možností je použít [CSS Modules](http://glenmaddern.com/articles/css-modules), konkrétně knihovnu [react-css-modules](https://github.com/gajus/react-css-modules). Díky CSS Modules můžete pořád psát CSS (nebo SASS/LESS/Stylus), ale zároveň i spravovat a komponovat vaše CSS soubory tak, jak byste to dělali s inline styly v Reactu. Také se nemusíte starat o názvy CSS tříd (narozdíl od BEM), jelikož i to za vás tato knihovna vyřeší.

## Naučte se server rendering

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.

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ě.

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.

## Naučte se Immutable.js

[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á.

## Naučte se Relay, Falcor atd

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.


================================================
FILE: README-de.md
================================================
# react-howto

Wenn man mit React, oder Frontendentwicklung allgemein, beginnt, kann das Ökosystem verwirrend sein. Dafür gibt es mehrere Gründe:

* React war ursprünglich an Early Adopter und Experten gerichtet
* Facebook veröffentlicht nur Open-Source Software, die es auch selbst nutzt. Deshalb sind alle Tools um diese Software nicht für Projekte ausgelegt, die kleiner als Facebook sind.
* Es gibt viel Marketing, das sich als React Einführung verkleidet

Dieses Dokument setzt voraus, dass der Leser bereits eine Webseite mit HTML, CSS und JavaScript geschrieben hat.

## Warum auf mich hören?

Es gibt jede Menge widersprüchliche Empfehlungen und Best Practices zu React da draußen - warum solltest du auf mich hören?

Ich war Mitglied des ursprünglichen Teams bei Facebook, das React gebaut und als Open-Source veröffentlicht hat. Mittlerweile arbeite ich nicht mehr bei Facebook, sondern bei einem kleinen Startup, wodurch ich auch die Perspektive von außerhalb Facebooks kenne.

## Wie man ins React Ökosystem reinkommt

Alle Software baut auf einem bestimmten Technologie-Stack auf, den man hinreichend gut genug beherrschen muss, um seine Anwendung bauen zu können. Der Grund, warum das Ökosystem von React-Tools leicht überwältigend wirkt, ist, dass es bislang in der falschen Reihenfolge erklärt wurde.

Du solltest React und seine Tools in folgender Reihenfolge lernen - **ohne nach vorne zu springen oder mehrere der Teile gleichzeitig zu lernen**:

* [React selbst](#react-selbst-lernen)
* [`npm`](#npm-lernen)
* [JavaScript „Bundler“](#javascript-bundler-benutzen-lernen)
* [ES6](#es6-lernen)
* [Routing](#routing-lernen)
* [Flux](#flux-lernen)

**Du musst nicht alle Themenblöcke lernen um React produktiv einsetzen zu können.** Schau dir den nächsten Themenblock erst an, wenn du im aktuellen Probleme hast, die du mit den bestehenden Mitteln nicht lösen kannst.

Des weiteren gibt es ein paar Themen, die in der React-Community viel diskutiert werden, die „bleeding edge“ sind. Die folgenden Themen sind interessant, aber schwer zu verstehen und viel weniger verbreitet als die eben genannten. **Für die meisten Anwendungen sind sie nicht notwendig.**

* [Inline Styles](#inline-styles-lernen)
* [Serverseitiges Rendern](#serverseitiges-rendern-lernen)
* [Immutable.js](#immutablejs-lernen)
* [Relay, Falcor etc.](#relay-falcor-etc-lernen)

## React selbst lernen

Es ist ein weitverbreiteter Irrglaube, dass man erstmal viel Zeit damit verbringen muss das Tooling um React aufzusetzen, bevor man React lernen kann. In der offiziellen Dokumentation gibt es ein [HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm), mit dem ihr arbeiten und direkt loslegen könnt. **Ihr braucht keine Tools für diesen ersten Schritt und ihr solltet nicht anfangen Tools zu lernen bevor ihr mit den Grundlagen von React vertraut seid.**

Ich finde nach wie vor, der einfachste Weg React zu lernen ist, das [offizielle Tutorial](https://facebook.github.io/react/docs/tutorial.html) durchzugehen.

## `npm` lernen

`npm` ist der Node.js Paketmanager und die populärste Lösung mit der Frontendler und Designer JavaScript Code miteinander teilen. Es umfasst ein Modulsystem namens `CommonJS` und erlaubt es Kommandozeilentools, die in JavaScript geschrieben wurden zu installieren. [Dieser Artikel](http://0fps.net/2013/01/22/commonjs-why-and-how/) erklärt die Hintergründe warum `CommonJS` für Browser notwendig ist. Im [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) gibt es mehr Informationen zur `CommonJS` API.

Die meisten wiederverwendbaren Komponenten, Bibliotheken und Tools im React Ökosystem sind als `CommonJS`-Module verfügbar und werden mit `npm` installiert.

## JavaScript Bundler benutzen lernen

Aus mehreren wichtigen technischen Gründen können `CommonJS`-Module, also alle `npm`-Module, nicht nativ in Browsern benutzt werden. Man braucht daher einen sogenannten JavaScript „Bundler“, der diese Module in einzelne `.js`-Dateien „bundlet“, die dann via `<script>`-Tag in Webanwendungen integriert werden können.

Beispiele für JavaScript Bundler sind u.a. `Webpack` und `Browserify`. Beide sind gute Alternativen, aber ich bevorzuge `webpack`, da es viele Features hat, die das entwickeln von großen Anwendungen leichter machen. Da die offizielle Dokumentation etwas verwirrend sein kann, habe ich ein [Plug & Play Startertemplate](https://github.com/petehunt/react-webpack-template) gebaut und ein [Webpack Howto](https://github.com/petehunt/webpack-howto) für komplexere Anwendungsfälle geschrieben.

Wichtiger Hinweis: `CommonJS` benutzt die `require()`-Funktion, um Module zu importieren. Viele glauben, dass diese Funktion etwas mit dem `require.js` Projekt zu tun haben muss. Aus mehreren technischen Gründen würde ich euch nahelegen auf `require.js` zu verzichten. Es ist außerdem nicht sehr populär im React Ökosystem.

## ES6 lernen

Neben JSX, das ihr im React Tutorial gelernt habt, kann euch noch andere merkwürdige Syntax in React Beispielcode begegnen. Sie kommt aus ES6, was die neueste Version von JavaScript ist, die ihr vielleicht noch nicht kennt. Da sie noch sehr neu ist, wird sie von Browsern noch nicht unterstützt, aber euer Bundler kann sie mit der richtigen Konfiguration für euch übersetzen.

Wenn ihr einfach nur mit React loslegen wollt **könnt ihr ES6 lernen überspringen**, oder es beiläufig lernen während ihr eure React Anwendungen baut.

Womöglich wird euch gesagt, dass ES6 Klassen jetzt der neue Standardweg sein sollen React-Komponenten zu schreiben. Das ist nicht wahr. Die meisten Leute (inklusive Facebook) benutzen weiterhin `React.createClass()`.

## Routing lernen

„Single-page Applications“ sind gerade der letzte Schrei. Sie sind Webseiten die nur einmal geladen werden und wenn der Nutzer auf einen Link oder Button klickt, sorgt das JavaScript das auf der Seite läuft dafür, dass die URL in der Adresszeile aktualisiert wird ohne dass die Seite refresht wird. Das Verwalten der URL in der Adresszeile wird vom sogenannten **Router** übernommen.

Der beliebteste Router im React Ökosystem ist der [react-router](https://github.com/rackt/react-router). Wenn ihr eine Single-page Application schreibt, solltet ihr ihn nutzen - außer ihr habt einen triftigen Grund, der dagegen spricht. 

**Ihr solltet keinen Router benutzen, wenn ihr keine Single-page Application schreibt.** Die meisten Projekte beginnen ohnehin als kleinere Komponenten, die in größere Anwendungen eingebettet sind.

## Flux lernen

Ihr habt wahrscheinlich schon von Flux gehört. Es wird **jede Menge** Falsches über Flux gesagt.

Viele Leute beginnen ihre App zu bauen und glauben, sie brauchen Flux, um ihr Datenmodell zu definieren. **Das ist nicht der richtige Weg, um in Flux einzusteigen. Flux sollte man erst hinzufügen, wenn man bereits viele Komponenten gebaut hat.**

React-Komponenten sind hierarchisch angeordnet. Meistens folgt euer Datenmodell auch einer Hierarchie. In solchen Situationen bringt Flux nicht so viel. Manchmal allerdings, ist das Datenmodell nicht hierarchisch. Wenn ihr anfangt euren React-Komponenten `props` zu übergeben, die für sie belanglos sind, oder wenn ihr ein paar wenige Komponenten habt, die sehr komplexer werden, dann solltet ihr euch Flux genauer anschauen.

**Wenn ihr Flux braucht merkt ihr das von selbst. Wenn ihr zweifelt, ob ihr es braucht, dann braucht ihr es nicht.**

Wenn ihr euch entschieden habt Flux zu nutzen: [Redux](http://redux.js.org/) ist die populärste und bestdokumentierte Flux-Bibliothek, die es gibt. Es gibt _viele_ Alternativen und ihr werdet versucht sein euch viele davon anzuschauen und zwischen ihnen abzuwägen. Mein Tipp ist, einfach die populärste zu nehmen.

## Inline Styles lernen

In der Zeit vor React haben viele Leute CSS Styles wiederverwendbar gemacht mithilfe komplizierter Stylesheets, die von CSS-Präprozessoren wie SASS erstellt wurden. Da es React einfach macht, wiederverwendbare Komponenten zu schreiben, kann euch das helfen weniger kompliziertes CSS zu schreiben. Viele in der Community, darunter auch ich, experimentieren mit verschiedenen Lösungen, die Stylesheets ganz abschaffen.

Aus mehreren Gründen ist das eine ziemlich verrückte Idee. Media Queries werden schwieriger und es gibt mögliche Performanceeinschränkungen. **Wenn ihr mitten im React-Einstieg steckt, stylet alles wie ihr es bisher immer getan habt.**

Sobald ihr ein Gefühl dafür bekommen habt wie React funktioniert, könnt ihr euch nach Alternativen umschauen. Eine beliebte davon ist [BEM](https://en.bem.info). Ich empfehle, euer CSS immer weniger von einem CSS-Präprozessor bauen zu lassen, da React eine bessere Lösung bietet Styles wiederzuverwenden - durch wiederverwendbare Komponenten - und da euer JavaScript Bundler effizientere Stylesheets für euch generieren kann (hierzu habe ich [einen Vortrag bei der OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y) gehalten). Ansonsten funktioniert React, wie jede JavaScript Bibliothek, natürlich hervorragend mit CSS-Präprozessoren.

Alternativ könnt ihr auch [CSS Modules](http://glenmaddern.com/articles/css-modules) nutzen, oder genauer [react-css-modules](https://github.com/gajus/react-css-modules). Mit CSS Modules schreibt ihr wie gewohnt CSS (oder Sass/LESS/Stylus) aber ihr könnt trotzdem eure CSS-Dateien wie React Inline Styles verwalten und zusammenstellen. Und ihr müsst euch dabei keine Sorgen darum machen eure Klassennamen mit Methodologien wie BEM einmalig zu halten - CSS Modules sorgen mit ihrem Modulsystem für euch hinter den Kulissen dafür.

## Serverseitiges Rendern lernen

Serverseitiges Rendern wird oft "universelles" oder "isomorphes" JavaScript genannt, was soviel heißt wie, dass eure React Komponenten vom Server zu statischem HTML gerendert werden. Dies verbessert die Initialisierungsgeschwindigkeit, da der Nutzer nicht warten muss bis JavaScript fertig heruntergeladen wurde bevor er die initiale Nutzeroberfläche sehen kann. React kann das serverseitig gerenderte initiale HTML nutzen und muss es nicht auf dem Client generieren.

Ihr braucht serverseitiges Rendern, wenn eure initialen Renderzeiten zu langsam werden oder wenn ihr euren Suchmaschinenrang verbessern wollt. Obwohl Google mittlerweile clientseitig gerenderte Inhalte mitindiziert, so fiel zumindest bis Januar 2016 bei jeder Analyse auf, dass diese Inhalte weniger gut gerankt werden als serverseitige - vermutlich wegen der Performanceeinbußen, die clientseitiges Rendern mit sich bringt.

Serverseitiges Rendern erfordert noch viele Tools, um es richtig aufzusetzen. Da es deutlich React-Komponenten unterstützt, die geschrieben wurden, ohne an serverseitiges Rendern zu denken, solltet ihr zunächst mal eure App schreiben und euch dann um serverseitiges Rendern kümmern. Ihr werdet nicht all eure Komponenten umschrieben müssen, um es zu unterstützen.

## Immutable.js lernen

[Immutable.js](https://facebook.github.io/immutable-js/) bietet eine Menge von Datenstrukturen, die helfen können bestimmte Performanceprobleme von React Anwendungen zu lösen. Es ist eine großartige Bibliothek, die ihr wahrscheinlich in Zukunft viel in euren Apps verwenden werdet, aber sie ist vollkommen unnötig bis ihr einen Sinn für die Performanceauswirkungen gewonnen habt.

## Relay, Falcor etc. lernen

Sind Technologien, die euch helfen die Zahl der AJAX-Requests zu reduzieren. Sie sind noch sehr brandneu. Wenn ihr keine Probleme mit zu vielen AJAX-Requests habt braucht ihr Relay und Falcor nicht.


================================================
FILE: README-es.md
================================================
# react-howto

Sí eres nuevo en React (o con el desarrollo front-end en general) puedes encontrarte con que este ecosistema sea confuso. Existen unas cuantas razones para ello.

* Históricamente React se ha enfocado en early-adopters y expertos.
* Facebook sólo libera lo que realmente usa, por lo que no se centra en herramientas para proyectos "más pequeños que Facebook"
* Hay muchos artículos de marketing enmascarados como guías de React

A lo largo de este documento, asumiré que tienes preparada una página con HTML, CSS y JavaScript.

## ¿Por qué escucharme a mí?

Hay un montón de consejos confusos sobre React ahí fuera, entonces ¿por qué escucharme a mí?

Fui miembro del equipo inicial de Facebook que construyó y liberó React. Ya no estoy en Facebook, ahora estoy en una pequeña StartUp, por lo que tengo también una perspectiva "no-Facebook".

## Cómo iniciar con React y su ecosistema

Todo software se construye con un stack tecnológico, y es necesario entender lo suficiente de ese stack como 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.

Debes aprenderlo en este orden, **sin saltarte ningún paso o hacerlo concurrentemente**:

* [React en sí](#aprendiendo-react-en-sí)
* [`npm`](#aprendiendo-npm)
* [JavaScript “bundlers”](#aprendiendo-javascript-bundlers)
* [ES6](#aprendiendo-es6)
* [Enrutamiento](#aprendiendo-enrutamiento)
* [Flux](#aprendiendo-flux)

**No necesitas aprender todas ellas para ser productivo con React.** Sólo dirígete al siguiente paso si tienes algún problema que necesita ser resuelto.

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 por la mayoría de las aplicaciones**.
* [Estilos inline](#aprendiendo-estilos-inline)
* [Renderizado en el servidor](#aprendiendo-renderizado-en-el-servidor)
* [Immutable.js](#aprendiendo-immutablejs)
* [Relay, Falcor, etc.](#aprendiendo-relay-falcor-etc)

## Aprendiendo React en sí

Es un error común pensar que se necesita perder mucho tiempo preparando un entorno para iniciar el aprendizaje de React. En la documentación oficial la encontrarás en 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 sobre herramientas extras hasta que no te sientas cómodo con lo básico de React.**

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).

## Aprendiendo `npm`

`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`, que 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`.

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`.

## Aprendiendo JavaScript bundlers

Hay muchas razones razones técnicas por la que los módulos `CommonJS` (p.ej. cualquiera en `npm`) no pueden ser usados 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>`.

Ejemplos de JavaScript bundlers incluye `webpack` y `browserify`. Ambos son buenas opciones, pero prefiero `webpack` ya que tiene muchas características que hacen que el desarrollo de aplicaciones grandes se más sencillo. Ya que su documentación puede ser confusa, les traigo una [plantilla plug-and-play para empezar](https://github.com/petehunt/react-webpack-template) y una [guía how-to para webpack](https://github.com/petehunt/webpack-howto) para usos mas complejos.

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 unas cuantas razones técnicas, te sugiero que evites utilizar `require.js`. Además, no es muy popular en el ecosistema de React.

## Aprendiendo ES6

Aparte de JSX (el cual has aprendido en el tutorial de React), Es posible que aparezca alguna 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.

Si lo que desea es hacer las cosas con React, **puedes omitir el aprendizaje ES6**, o tratar de aprenderlo en el camino.

## Aprendiendo enrutamiento

Las “single-page applications” (o aplicaciones de página única) son las que están de moda estos días. Se trata de páginas que se cargan una vez, y cuando el usuario hace click en un enlace o botón, el JavaScript que está corriendo en la página actualiza 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**.

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.

**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 como pequeños componentes dentro de una aplicación más grande.

## Aprendiendo Flux

Probablemente habrás oído hablar de Flux. Hay un *montón* de información errónea sobre Flux ahí fuera.

Muchas personas se sientan 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 debería ser añadido sólo una vez que se han hecho ya algunos componentes.**

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.

**Sabrás cuando necesitas Flux. Si no estás seguro de si lo necesitas, es que no lo necesitas.**

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 revisar muchas de ellas, pero mi consejo es que te quedes sólo con la más popular.

## Aprendiendo estilos Inline

Antes de React, mucha gente reutilizaba hojas de estilos CSS con complicados estilos construidos con preprocesadores como SASS. React hace que escribir componentes reutilizables sea sencillo, tus hojas de estilo pueden ser menos complicadas. Muchos usuarios de la comunidad (incluido yo) están pensando deshacerse del todo de las hojas de estilo.

Puede parecer una idea bastante loca pero hay muchas razones. Hace las media queries más complicadas, y es posible que existan limitaciones en cuanto a 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.**

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 reutilizar los estilos (reutilizacion de componentes) y tu bundler de JavaScript puede generar hojas de estilos más eficientes para ti (Yo di [una charla sobre esto en  OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Dicho esto, React, como cualquier otra librería de JavaScript, funcionará bien con un preprocesador CSS.

## Aprendiendo renderizado en el servidor

El renderizado en el servidor (o server rendering) es a menudo llamado JavaScript "universal" o "isomórfico". Esto significa que puedes tomar tus componentes de React y renderizarlos como HTML estático en el servidor. Esto 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 reutilizar el HTML renderizado en el servidor así que no necesita generarlo en el lado del cliente.

Necesitas hacer el renderizado en el servidor si te das cuentas que renderizado inicial es demasiado lento y además quieres mejorar tu ranking en buscadores (Search Engine Ranking). Aunque, es cierto 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 el cliente.

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 el servidor, puedes construir una aplicación primero y preocuparte del renderizado en el servidor después. **No necesitarás re-escribir todos tus componentes para que funcione.**

## Aprendiendo Immutable.js

[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 más adelante en muchas de tus aplicaciones, pero es completamente innecesaria hasta que empieces a apreciar problemas de rendimiento.

## Aprendiendo Relay, Falcor, etc.

Estas son tecnologías que te ayudan a reducir el número de peticiones AJAX. Son todavía innovadoras, así que si no tienes problemas con demasiadas peticiones AJAX, no necesitas Relay o Falcor.

----------
<a name="f1">1</a>: Tecnologías beeding-edge https://es.wikipedia.org/wiki/Bleeding_edge_technology



================================================
FILE: README-fr.md
================================================
# react-howto

Quand on découvre React (ou le frontend en général) on peut trouver l'écosystème troublant.
Il y a des raisons à ça.

* React était historiquement destiné aux adeptes précoces et aux experts
* Facebook n'ouvre au public que ce qu'il utilise et ne se concentre donc pas sur les outils nécessaires à des projets d'ampleur inférieure
* Beaucoup de guides sur React véhiculent une mauvaise image

Tout au long de ce document, je vais partir du principe que vous avez déjà réalisé une page web avec HTML, CSS et JavaScript.

## Pourquoi devriez-vous m'écouter ?

Il y a énormément de conseils contradictoires dans la nature ; pourquoi m'écouter ?

Je fais parti de l'équipe de Facebook qui a construit React et l'a ouvert au public. Je ne travaille plus pour Facebook mais pour une petite start-up donc j'ai également un point de vue externe.

## Comment aborder l'écosystème React

Tout programme repose sur un assemblage de technologies, et il vous faut comprendre assez de cet assemblage pour construire votre application. La raison pour laquelle aborder les outils de l'écosystème React semble insurmontable est qu'on ne les présente pas dans le bon ordre.

Vous devriez apprendre, dans cet ordre, **sans sauter d'étape et une à la fois** :

* [React en lui même](#apprendre-react-en-lui-même)
* [`npm`](#apprendre-npm)
* [Les concaténateurs de fichiers JavaScript](#apprendre-les-concaténateurs-javascript)
* [ES6](#apprendre-es6)
* [Routage](#apprendre-le-routage)
* [Flux](#apprendre-flux)

**Vous n'avez pas besoin de tout apprendre pour être productif avec React.** Ne sautez d'étape que si vous devez absolument résoudre un problème.

De plus, il y a quelques sujets dont on parle souvent dans la communauté React qui sont à utiliser prudemment, car moins stables. Ce sont des sujets intéressants mais plus compliqués à appréhender, moins répandus que les sujets précédents et **requis dans peu de cas**.

* [Les styles en ligne](#apprendre-les-styles-en-ligne)
* [Rendu côté serveur](#apprendre-le-rendu-côté-serveur)
* [Immutable.js](#apprendre-immutablejs)
* [Relay, Falcor, etc](#apprendre-relay-falcor-etc)

## Apprendre React en lui même

C'est une erreur commune de penser qu'il faut perdre du temps à mettre en place des outils pour commencer à apprendre React. Dans la documentation officielle vous trouverez un [template à copier-coller](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) et sauvegarder dans un fichier `.html` et pourrez démarrer tout de suite. **Aucun outil n'est nécessaire pour cette étape, n'apprenez pas à en mettre en place avant d'être à l'aise avec les bases de React.**

Je pense toujours que la manière la plus simple d'apprendre React est [le tutoriel officiel](https://facebook.github.io/react/docs/tutorial.html).

## Apprendre `npm`

`npm` est le gestionnaire de paquets de Node.js. C'est le moyen le plus répandu parmi les développeurs et concepteurs front-end de partager du code JavaScript. Il comprend un système de module appelé `CommonJS` et vous permet d'installer des outils utilisables en ligne de commande écrits en JavaScript. Lisez [cet article](http://0fps.net/2013/01/22/commonjs-why-and-how/) pour savoir pourquoi `CommonJS` est nécessaire pour les navigateurs, ou le [Wiki de la spécification CommonJS](http://wiki.commonjs.org/wiki/Introduction) pour découvrir l'API.

La plupart des composants réutilisables, bibliothèques et outils de l'écosystème React sont disponibles en tant que modules `CommonJS` et s'installent avec `npm`.

## Apprendre les concaténateurs JavaScript

En raison de limitations techniques pertinentes, les modules `CommonJS` (ceux qu'on trouve sur `npm`) ne peuvent pas être utilisés tels quels dans le navigateur. Il faut un concaténateur JavaScript pour empaqueter ces modules dans des fichiers `.js` qu'on pourra inclure grâce à une balise `<script>` dans une page web.

`webpack` et `browserify` sont des concaténateurs disponibles. Les deux sont satisfaisants, mais je préfère `webpack` car il propose des fonctionnalités qui facilitent le développement de grosses applications. Sa documentation pouvant être troublante, j'ai un [projet tout prêt pour commencer](https://github.com/petehunt/react-webpack-template) et j'ai écrit un [guide pour webpack](https://github.com/petehunt/webpack-howto) pour des cas plus complexes.

Ne pas confondre : `CommonJS` utilise la fonction `require()` pour importer des modules, et beaucoup de personnes pensent à tort que c'est lié au projet `require.js`. Pour des raisons techniques, je vous conseille de ne pas utiliser `require.js`. De plus il n'est pas très répandu dans l'écosystème React.

## Apprendre ES6

En dehors du JSX (que vous avez appris dans le tutoriel React), vous pouvez rencontrer une syntaxe inhabituelle dans certains exemples React. C'est de l'ES6, la dernière version de JavaScript que vous ne connaissez pas forcément. Comme c'est très récent, ce n'est pas encore supporté par les navigateurs, mais votre concaténateur peut le traduire pour vous avec la bonne configuration.

Si vous avez besoin d'avancer sur React, **vous n'êtes pas obligé d'apprendre ES6**, ou pouvez l'apprendre en chemin.

Il est possible que vous tombiez sur des exemples qui laissent supposer que les classes ES6 sont le moyen préconisé de créer des composants React. Ce n'est pas le cas, et la plupart des gens utilisent `React.createClass`, y compris Facebook.

## Apprendre le routage

Les applications "Single-page" sont à la mode en ce moment. Ce sont des pages web qui ne chargent qu'une fois, et quand l'utilisateur clique sur un lien ou un bouton, le JavaScript de la page met à jour la barre d'adresse, mais la page n'est pas rafraîchie. La gestion de la barre d'adresse est prise en charge par un **routeur**.


Le routeur le plus populaire dans l'écosystème React est [react-routeur](https://github.com/rackc/react-routeur). Si vous construisez une application single-page, utilisez-le, sauf si vous avez de bonnes raisons de ne pas le faire.

**N'utilisez pas de routeur si vous ne construisez pas une application single-page.** La plupart des projets commencent de toute façon en tant que petits composants dans une plus grande application.

## Apprendre Flux

Vous avez probablement entendu parler de flux. Il y a des *tas* de mauvaises informations concernant Flux qui circulent.

Beaucoup de gens qui veulent développer une application cherchent à définir leur modèle de données et pensent avoir besoin de flux pour ça. **Ce n'est pas la bonne manière d'intégrer Flux. Flux ne devrait être ajouté que lorsque beaucoup de composants ont déjà été construits.**

Les composants React sont organisés en hiérarchie. La plupart du temps votre modèle de données suit également une hiérarchie. Dans cette situation Flux ne vous apporte pas grand chose. Quelques fois cela dit, votre modèle de données n'est pas hiérarchique. Quand vos composants commencent à recevoir des `props` qui ne semblent pas lui être destinées, ou qu'un petit nombre de composants commencent à être très complexes, vous pouvez vous pencher sur Flux.

**Vous saurez quand vous aurez besoin de Flux. Si vous n'êtes pas sûr d'en avoir besoin, vous n'en avez pas besoin.**

Si vous avez décidé d'utiliser Flux, la plus répandue et mieux documentée des bibliothèques Flux est [Redux](http://redux.js.org). Il y a *énormément* d'alternatives disponibles, et vous pouvez être tenté de toutes les évaluer, mais je vous conseille vraiment d'opter pour la plus populaire.

## Apprendre les styles en ligne

Avant React, beaucoup de gens réutilisaient les styles CSS avec des feuilles de style compliquées construites avec des préprocesseurs comme SASS. Comme React rend la réutilisation des composants facile, vos feuilles de style peuvent être moins compliquées. Beaucoup de gens dans la communauté (moi y compris) essayent même de se débarasser des feuilles de style entièrement.

C'est un peu fou pour un bon nombre de raisons. Ça rend les mediaqueries plus complexes et il est possible qu'il existe des limitations relatives aux performances en utilisant cette technique. **En commençant React, utilisez le style comme vous le feriez normalement.**

Une fois que vous êtes à l'aise avec React, vous pouvez tester des méthodes alternatives. [BEM](https://en.bem.info/) en est une assez répandue. Je vous conseille d'éliminer votre préprocesseur CSS, car React vous donne un meilleur moyen de réutiliser les styles (en réutilisant les composants) et votre concaténateur peut générer des feuilles de style plus efficaces pour vous ([j'en ai parlé à OSCON](https://www.youtube.com/watch?v=VkTCL6NqmM6Y)). Malgré tout React fonctionne très bien avec un préprocesseur CSS.

Une autre option est d'utiliser [CSS modules](http://glenmaddern.com/articles/css-modules), plus particulièrement [react-css-modules](https://github.com/gajus/react-css-modules). Avec les modules CSS vous allez toujours écrire du CSS (ou SASS, LESS, Stylus), mais vous allez pouvoir organiser et composer vos fichiers CSS comme vous l'auriez fait avec les styles en ligne avec React. En utilisant des méthodes comme BEM, vous n'aurez même plus à vous soucier de vos noms de classes, le système de module va s'en charger pour vous.

## Apprendre le rendu côté serveur

Le rendu côté serveur est souvent appelé JavaScript "universel" ou "isomorphique". Ça veut dire que vous pouvez générer du HTML statique sur un serveur à partir de vos composants. Ça améliore le temps de chargement de la page car l'utilisateur n'a pas à attendre que le JS soit chargé pour voir l'interface, et React va réutiliser ce HTML plutôt que d'en générer un autre.

Vous avez besoin du rendu côté serveur dans le cas où votre rendu initial est trop lent ou si vous voulez améliorer votre référencement. Il est vrai que Google référence maintenant le contenu rendu côté client, mais le temps que le JS met à s'exécuter est pénalisant pour le référencement.

Le rendu côté serveur nécessite beaucoup d'outils pour être fait correctement. Dans la mesure où la majeure partie de vos composants pourront être rendus côté serveur sans même que vous ne les conceviez pour, vous devriez construire votre application d'abord, pour ensuite vous pencher sur le rendu côté serveur. Vous n'aurez pas besoin de réécrire tous vos composants pour le mettre en place.

## Apprendre Immutable.js

[Immutable.js](https://facebook.github.io/immutable-js/) propose un jeu de structures de données qui peuvent aider à résoudre des problèmes de performance sur des applications React. C'est une bonne bibliothèque et vous risquez de l'utiliser à mesure que vos applications grandissent, mais ce n'est pas utile si vous n'avez pas les performances en tête.

## Apprendre Relay, Falcor etc

Ce sont des technologies qui vous aident à réduire le nombre de requêtes AJAX. Elles sont encore très récentes, donc si vous n'avez pas de problème de requêtes, vous n'avez pas besoin de Relay ou Falcor.


================================================
FILE: README-gre.md
================================================
# react-howto

Αν είσαι καινούριος στο React (ή στο frontend γενικότερα) μπορεί το οικοσύστημα να σου φαινεται δύσκολο. Υπάρχουν αρκετοί λόγοι που το προκαλούν αυτό.

* Το React ιστορικά απευθύνεται αυτόυς που το χρησιμοποίησαν εξ αρχής και ανθρώπους με μεγάλη εμπειρία
* Το Facebook κάνει open-source ότι χρησιμοποιεί, οπότε δεν δίνει μεγάλη έμφαση στα εργαλεία που μπορούν να χρησιμοποιηθούν για μικρότερες από του Facebook εφαρμογές 
* Υπάρχουν πολλοί React οδηγοί κακής ποιότητας που λειτουργούν ως κακή διαφήμιση του React

Κατά τη διάρκεια αυτού του αρχείου, θα υποθέσω πως έχετε χτίσει μια εφαρμογή χρησιμοποιώντας HTML, CSS και Javascript.

## Γιατί θα πρέπει να ακούσετε εμένα;

Υπάρχουν χιλιάδες συμβουλές εκεί εξώ, γιατί να ακούσετε εμένα;

Ήμουν ένα από τα αρχικά μέλη της ομάδας του Facebook που έχτισαν και έκαναν open-source το React. Δεν δουλέυω πια στο Facebook και είμαι πλέον σε μια μικρή startup, οπότε έχω και τη μη-Facebook οπτική.

## Πως να ξεκινήσετε με το οικοσύστημα του React

Όλο το software είναι χτισμένο βασισμένο σε ένα σύνολο τεχνολογιών και πρέπει να καταλάβετε πως λειτουργούν αυτές για να μπορέσετε να χτίσετε τη δική σας εφαρμογή. Ο λόγος για τον οποίο το οικοσύστημα του React είναι τόσο πολύπλοκο είναι επειδή πάντα διδάσκεται με λάθος σειρά.

Θα πρέπει να τα μάθετε με αυτή τη σειρά **χωρίς να περάσετε κάποιο ή να μαθαίνετε πολλά ταυτόχρονα**:

* [React το ίδιο](#Μαθαίνοντας-το-ίδιο-το-react)
* [`npm`](#Μαθαίνοντας-npm)
* [JavaScript “bundlers”](#Μαθαίνοντας-javascript-bundlers)
* [ES6](#Μαθαίνοντας-es6)
* [Routing](#Μαθαίνοντας-το-routing)
* [Flux](#Μαθαίνοντας-flux)

**Δεν είναι ανάγκη να τα μάθετε όλα αυτά για να είστε έτοιμοι να φτιάξετε κάτι έτοιμο για παραγωγή με React.** Περάστε σε επόμενο βήμα μόνο αν έχετε ένα πρόβλημα που πρέπει να λύσετε.

Επίσης υπάρχουν κάποιοι τομείς που αναφέρονται συχνά στην React κοινότητα και είναι στην "άκρη του ξυραφιού". Οι παρακάτω τομείς είναι πολύ ενδιαφέροντες αλλά είναι δυσνόητοι, λιγότερο διαδεδομένοι από τους πάνω τομείς **και δεν χρειάζονται για τις περισσότερες εφαρμογές**.
* [Inline styles](#Μαθαίνοντας-inline-styles)
* [Server rendering](#Μαθαίνοντας-server-rendering)
* [Immutable.js](#Μαθαίνοντας-immutablejs)
* [Relay, Falcor, etc](#Μαθαίνοντας-relay-falcor-etc)

## Μαθαίνοντας το ίδιο το React

Είναι μια γνωστή παρανόηση πως πρέπει να ξοδέψετε πολύ χρόνο για να στήσετε τα εργαλεία για να ξεκινήσετε να μαθαίνετε React. Στα επίσημα έγγραφα θα βρείτε ένα [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) που μπορείτε να σώσετε σε ένα `.html` αρχείο και να ξεκινήσετε κατ' ευθείαν.  **Δεν χρειάζονται εργαλεία για αυτό το βήμα, και δεν θα χρειαστεί να μάθετε επιπλέον εργαλεία μέχρι να αισθάνεστε άνετα με τις βασικές ιδέες του React**

Ακόμα πιστεύω πως ο ευκολότερος τρόπος να μάθετε React είναι [ο επίσημος οδηγός](https://facebook.github.io/react/docs/tutorial.html).

## Μαθαίνοντας `npm`

`npm` είναι ο διαχειριστής πακέτων του Node.js και είναι ο πιο διαδεδομένος τρόπος οι frontend προγραμματιστές και οι σχεδιαστές μοιράζονται 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.

Τα περισσότερα επαναχρησιμοποιήμενα μέρη, βιβλιοθήκες και εργαλεία στο React οικοσύστημα μπορούν να βρεθούν ως `CommonJS` μέρη και εγκαταστώνται μέσω του `npm`.

## Μαθαίνοντας JavaScript bundlers

Για ένα σύνολο καλών τεχνικών λόγων τα `CommonJS` μέρη (π.χ. τα πάντα μέσα στο `npm`) δεν μπορούν να χρησιμοποιηθούν άμεσα στην ιστοσελίδα σας. Χρειάζεστε ένα JavaScript “bundler” για να κάνετε “bundle” αυτά τα μέρη σε `.js` αρχεία που μπορείτε να εισάγετε στην ιστοσελίδα σας με ενα `<script>` tag.

Παραδείγματα JavaScript bundlers περιλαμβάνουν το `webpack` και το `browserify`. Και τα δυο είναι καλές επιλογές, αλλά προτιμώ το `webpack` διότι παρέχει πολλές επιλογές που κάνουν τον προγραμματισμό για μεγάλες εφαρμογές πιο εύκολο. Αφού τα έγγραφά τους είναι λίγο δυσνόητα έχω ένα [plug-and-play template για να ξεκινήσετε](https://github.com/petehunt/react-webpack-template) και έχω γράψει ένα [how-to οδηγό για το webpack](https://github.com/petehunt/webpack-howto) για πιο δύσκολες περιπτώσεις.

Το React επίσης προσφέρει πλέον [ένα επίσημο CLI εργαλείο που λέγεται Create React App](https://github.com/facebookincubator/create-react-app). Σε αφήνει να δημιουργείς React εφαρμογές χρησιμοποιώντας το `webpack` χωρίς καμία παραμετροποιήση. Έχει τους περιορισμούς του, αλλά μπορεί να χρησιμοποιηθεί σαν πολύ καλή αρχή και οι αναβαθμίσεις του θα προσθέσουν περισσότερες επιλογές με τον καιρό. Προσφέρει επίσης μια "ejection" επιλογή που αντιγράφει όλες τις παραμετροποιήσεις στην εφαρμογή οπότε έχετε απόλυτο έλεγχο πάνω τους.

Ένα πράγμα που πρέπει να κρατάτε στο μυαλό σας είναι: `CommonJS` χρησιμοποιεί την `require()` λειτουργία για να εισάγει νέα μέρη, οπότε πολλοί νομίζουν πως έχει να κάνει με ένα project που λέγεται `require.js`. Για ένα σύνολο λόγων, θα πρότεινα να αποφεύγετε το `require.js`. Επίσης δεν είναι πολύ διαδεδομένο στο React οικοσύστημα.

## Μαθαίνοντας ES6

Εκτός απο το JSX (που μάθατε στο React tutorial), μπορεί να είδατε κάποιο περίεργο συντακτικό στα React παραδείγματα. Αυτό λέγεται ES6 και είναι η τελευταία έκδοση της Javascript, οπότε μπορεί να μην το έχετε μάθει ακόμα. Αφού είναι τόσο καινούριο δεν υποστηρίζεται στα προγράμματα περιήγησης ακόμα, αλλά το bundler σας μπορεί να το μεταφράσει για σας με την κατάλληλη παραμετροποίηση.

Αν θέλετε απλά να κάνετε πράγματα με το React **μπορείτε να προσπεράσετε την εκμάθηση του ES6**, ή να προσπαθήσετε να το μάθετε στην πορεία.

Μπορεί να δείτε κάποιες συζητήσεις για ES6 κλάσεις να είναι ο αγαπημένος τρόπος για να δημιουργείτε τα React components. Αυτό δεν είναι αλήθεια. Οι περισσότεροι άνθρωποι (συμπεριλαμβάνοντας το Facebook) χρησιμοποιούν το `React.createClass()`.

## Μαθαίνοντας το routing

Τα “single-page applications” είναι πολυσυζητημένα αυτές τις μέρες. Αυτά είναι σελίδες που φορτώνουν μια φορά και όταν ο χρήστης πατάει σε ένα link ή ένα κουμπί, το Javascript που τρέχει στη σελίδα ανανεώνει το address bar, αλλά η σελίδα δεν ξαναφορτώνει. Η διαχείριση του address bar γίνεται με κάτι που λέγεται **router**.

Το πιο διαδεδομένο router στο React οικοσύστημα είναι το [react-router](https://github.com/rackt/react-router). Αν χτίζετε ένα single-page application, χρησιμοποιήστε το εκτός αν έχετε κάποιο καλό λόγο να μην το κάνετε.

**Μην χρησιμοποιείτε router αν δεν χτίζετε ένα single-page application**. Τα περισσότερα projects ξεκινάνε ως μικρότερα μέρη μέσα σε μια μεγαλύτερη εφαρμογή έτσι κι αλλιώς.

## Μαθαίνοντας Flux

Λογικά έχετε ακούσει το Flux. Υπάρχουν *άπειρη* παραπληροφόρηση για το Flux εκεί έξω.

Πολλοί άνθρωποι κάθονται να χτίσουν μια εφαρμογή και θέλουν να διευκρινίσουν το data model τους και νομίζουν πως πρέπει να χρησιμοποίησουν το Flux για να το κάνουν. **Αυτός έιναι ο λάθος τρόπος σκέψης για να χρησιμοποιηθεί το Flux. Το Flux πρέπει να προστεθεί μόνο όταν πολλά componnets έχουν χτιστεί.**

Τα React components είναι φτιαγμένα με μια ιεραρχία. Τις περισσότερες φορές το data model επίσης ακολουθεί αυτή την ιεραρχία. Σε αυτές τις περιπτώσεις το Flux δεν χρησιμεύει και πολύ. Μερικές φορές βέβαια, το data model δεν ακολουθεί την ιεραρχία αυτή. Όταν τα React components ξεκινήσουν να λαμβάνουν `props` που δεν νοιώθετε πως είναι στο σωστό μέρος, ή έχετε ένα μικρό αριθμό components που ξεκινάνε να γίνονται πολύπλοκα, τότε μπορεί να θελήσετε να κοιτάξετε το Flux.

**Θα καταλάβετε όταν θα χρειαστείτε το Flux. Αν δεν είστε σίγουροι ότι το χρειάζεστε, τότε δεν το χρειάζεστε.**

Αν αποφασίσατε πως θα το χρησιμοποιήσετε η πιο γνωστή και καλογραμμένη βιβλιοθήκη είναι το [Redux](http://redux.js.org/). Υπάρχουν *άπειρες* εναλλακτικές εκεί έξω και θα θελήσετε να δοκιμάσετε πολλές από αυτές, αλλά η συμβουλή μου είναι να μείνετε με την πιο διαδεδομένη.

## Μαθαίνοντας inline styles

Πριν απο το React, πολλοί ξαναχρησιμοποιούσαν τα CSS styles με πολύπλοκα style sheets χτισμένομε preprocessors όπως το SASS. Από τη στιγμή που το React κάνει το επαναχρησιμοποιούμενα components εύκολα, τα stylesheets μπορούν να είναι λιγότερο πολύπλοκα. Πολλοί στην κοινότητα (συμπεριλαμβάνοντας εμένα) πειραματίζονται με το να βγάλουν τα stylesheets γενικά.

Αυτή είναι μια τρελή ιδέα για πολλούς λόγους. Κάνει τα media queries πιο δύσκολα και είναι πιθανό να υπάρχουν περιορισμοί απόδοσης ακολουθώντας αυτήν την τεχνική. **Όταν ξεκινάτε με το React να κάνετε το styling με τον τρόπο που θα το κάνατε κανονικά.**

Όταν αποκτήσετε μια καλύτερη ιδέα για το πως λειτουργεί το React, μπορείτε να κοιτάξετε εναλλακτικές τεχνικές. Μια διάσημη είναι η [BEM](https://en.bem.info/). Προτείνω να καταργείτε σταδιακά τα CSS preprocessors, αφού το React σας δίνει ένα πιο δυνατό τρόπο να ξαναχρησιμοποιείτε τα styles (ξαναχρησιμοποιώντας τα components) και το Javascript bundler μπορεί να δημιουργεί πιο αποτελεσματικά stylesheets για σας (έδωσα [μια ομιλία σχετικά με αυτό στο OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Έχοντας πει αυτό, το React, όπως πολλές ακόμα Javascript βιβλιοθήκες, θα δουλέψουν μια χαρά με ένα CSS preprocessor.

Διαφορετικά, μπορείτε επίσης να χρησιμοποιήσετε [CSS Modules](http://glenmaddern.com/articles/css-modules), πιο συγκεκριμένα [react-css-modules](https://github.com/gajus/react-css-modules). Με τα CSS Modules θα γράφετε ακόμα CSS (ή SASS/LESS/Stylus), αλλά θα μπορείτε να διαχειρίζεστε τα CSS αρχεία σας όπως θα κάνατε με τα inline styles στο React. Επίσης δεν θα χρειάζεται να ανησυχείτε για το πως να ονομάζετε τις κλάσεις σας χρησιμοποιώντας μεθοδολογίες σαν το BEM, αφού αυτό θα έχει διαχειριστεί για σας απο το module system.

## Μαθαίνοντας server rendering

Το Server rendering συχνά καλείται και "universal" ή "isomorphic" JS. Σημαίνει ότι μπορείτε να πάρετε τα React components και να τα κάνετε render ως στατικά HTML στον server. Αυτό βελτιώνει την αρχική απόδοση επειδή ο χρήστης δεν χρειάζεται να περιμένει να φορτώσει το Javascript για να δει το αρχικό UI, και το React μπορεί να ξαναχρησιμοποιήσει τα server-rendered HTML οπότε δεν είναι ανάγκη να τα δημιουργήσει στο client side.

Χρειάζεστε server rendering αν θεωρείτε πως το αρχικό render είναι πολύ αργό ή αν θέλετε να βελτιώσετε το search engine ranking.

Το server rendering ακόμα χρειάζεται πολλά εργαλεία για να γίνει σωστά. Αφού υποστηρίζει React components γραμμένα, μην έχοντας στο μυαλό το server rendering, καλό είναι να χτίζετε την εφαρμογή σας πρώτα και μετά να ανησυχίσετε για αυτό. Δεν θα χρειαστεί να ξαναγράψετε όλα τα components για να το υποστηρίξετε.

## Μαθαίνοντας Immutable.js

Το [Immutable.js](https://facebook.github.io/immutable-js/) παρέχει ένα set από data structures που μπορούν να βοηθήσουν να λύσετε κάποια θέματα απόδοσης χτίζοντας React εφαρμογές. Είναι μια πολύ καλή βιβλιοθήκη και λογικά θα την χρησιμοποιήσετε πολύ καθώς θα προχωράτε, αλλά είναι εντελώς περιττή μέχρι να έχετε αυτά τα θέματα απόδοσης.

## Μαθαίνοντας Relay, Falcor etc

Αυτές είναι τεχνολογίες που θα σας βοηθήσουν να μειώσετε τον αριθμό των AJAX requests. Είναι ακόμα στην αιχμή, οπότε αν δεν έχετ πρόβλημα με πολλά AJAX requests, δεν χρειάζεστε Relay ή Falcor.


================================================
FILE: README-ita.md
================================================
# react-howto

Se sei nuovo di React (o del frontend in generale) potresti trovare il suo ecosistema disorientante. Ecco alcune ragioni di questo:

* React storicamente e' pensato per early-adopters ed esperti
* Facebook rilascia open source solamente le cose che utilizza, quindi il focus di React non e' su progetti piu' piccoli di Facebook
* C'e' un sacco di cattivo marketing mascherato da "Guide per React"

In questo documento, assumero'che tu abbia gia' fatto una pagina web con HTML, CSS e Javascript prima d'ora.

## Perche' dovresti darmi retta?

Ci sono migliaia di consigli su React in conflitto tra di loro in giro, perche' dovresti ascoltarmi?

Sono stato uno dei membri originari del Facebook team che ha costruito e rilasciato open source React. Non lavoro piu' a Facebook, al momento lavoro in una piccola start up, quindi ho anche una prospettiva estranea a Facebook.

## Come affrontare l'ecosistema di React

Tutto il software e' costruito su uno stack di tecnologie, e tu devi saperne abbastanza di quello stack da essere in grado di creare la tua app. I tools di React sembrano troppo complicati perche' sono sempre spiegati nell'ordine sbagliato.

Doveresti imparare, in questo orgine, **senza saltare niente o imparare contemporaneamente**: 

* [React stesso](#learning-react-itself)
* [`npm`](#learning-npm)
* [JavaScript “bundlers”](#learning-javascript-bundlers)
* [ES6](#learning-es6)
* [Routing](#learning-routing)
* [Flux](#learning-flux)

**Non ti serve imparare tutti questi tool per essere produttivo con React.** Passa al passo successivo solo se hai un problema da risolvere

Inoltre, ci sono alguni argomenti che sono spesso citati dalla comunita' React, e che sono "bleeding edge", all'avanguardia. Gli argomenti sotto sono interessanti, ma sono difficili da comprendere, sono molto meno popolari degli argomenti sopra e **non sono richiesti nella maggior parte delle applicazioni**
* [Inline styles](#learning-inline-styles)
* [Server rendering](#learning-server-rendering)
* [Immutable.js](#learning-immutablejs)
* [Relay, Falcor, etc](#learning-relay-falcor-etc)

## Imparare React Stesso

E' un errore comune che sia necessario configurare un sacco di strumenti per iniziare ad imparara React. Nella guida ufficiale troverai [un template HTML da copiare-incollare](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) puoi salvarlo come file  `.html` ed iniziare subio. **Non hai bisogno di configurare nessuno strumento particolare per fare questo, E non cominciare a studiare nessun altro tool finche' non padroneggi le basi di React.**


Penso ancora che il modo piu' facile di imparare React sia [Il Tutorial Ufficiale](https://facebook.github.io/react/docs/tutorial.html).

## Imparare `npm`
`npm` e' il  package manager di Node.js ed e' il modo piu' usato dai programmatori front-end e dai designer per condividire il codice Javascript. . Comprende un sistema di moduli chiamato `CommonJS` che ti consente di installare strumenti a linea di comando scritti in Javascript. Leggi [questo post](http://0fps.net/2013/01/22/commonjs-why-and-how/) per capire perche'  `CommonJS` e' necessario sul browser oppure la  [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) per ulteriuri informazioni sulle  `CommonJS` API.

La maggior parte dei componenti riusabili, le librerie ed i tools nell'ecosistema React sono disponibili sotto forma di moduli `CommonJS` e sono installabili con `npm`.

## Imparare i javascript Bundlers

Per diverse ragioni tecniche i moduli `CommonJS` (i.e. qualunque cosa su `npm`) non possono essere usati nativamente nel browser. Devi usare un Javascript "bundler" per creare un "impacchettare" questi moduli in un file   `.js` che puo' essere incluso nella tua pagina web tramita un tag `<script>`

Esempi di JavaScript bundlers sono `webpack` e `browserify`. Entrambi sono buone scelte, ma io preferisco `webpack` in quanto ha molte piu' funzionalita' che rendono lo sviluppo di grandi applicazioni piu' semplice. Visto che la documentazione puo' risultare di complicata, Ho un  [plug-and-play template per iniziare](https://github.com/petehunt/react-webpack-template) ed ho scrito una  [guida how-to per webpack](https://github.com/petehunt/webpack-howto) per casi piu' complessi.

Una cosa da tenere a mente: `CommonJS` usa la funzione `require()` per importare moduli, per questo molta gente si confonde e pensa che abbia qualcosa a che fare con un progetto chiamato  `require.js`. Per diverse ragioni tecniche, ti suggerirei di evitare `require.js`. Inoltre non e' molto popolare all'interno dell'ecosistema React.


## Imparare ES6

Oltre a JSX (che hai imparato nel tutorial React) potresti vedere un po' di sintassi strana negli esempi di React. E' ES6, ed e' l'ultima versione di Javascript, quindi potresti non averla ancora imparata. Siccome e' molto nuova,  non e' ancora supportata dai browsers, ma il tuo bundler puo' tradurla per te se opportunamente configurato.

Se vuoi iniziare velocemente con React, **puoi evitare di imparare ES6**, o puoi provare ad utilizzarlo strada facendo.

Potresti vedere qualche discussione sul fatto che le classi ES6 sono il modo principlare per creare i componenti React. Questo e' falso. Molta gente (Facebook inclusa) sta utilizzando `React.createClass()`.

## Imparare il Routing

Le “Single-page applications” vanno di moda in questi giorni. Sono pagine web che vengono caricate in una volta, dopodiche' quando l'utente schiaccia un link od un bottone, Il Javascript si occupa di aggiornare la pagina e la barra degli indirizzi, senza refreshare la pagina. La gestione della barra degli indirizzi e' effattuata da qualcosa chiamato  **router**.

Il router piu' popolare nell'ecosistema di React e' il [react-router](https://github.com/rackt/react-router). Se stai facendo una single-page application, usalo a meno che tu non abbia una buona ragione per non farlo.

**Non usare il router se non stai facendo una single-page application**. Molti progetti iniziano come un piccolo componente all'interno di una applicazion piu' grande.

## Imparare Flux

Probabilmente ai sentito parlare di Flux. Ci sono  *tonnellate* di false informazioni riguardo Flux.

Molte persone iniziano a costruire una app e vogliono definire il loro Modello di dati, e pensano che sia necessario usare Flux per farlo. ** Questo e' il modo sbagliato di adottare Flux. Flux dovrebbe essere aggiunto solamente dopo che molti componenti sono stati create **

I Componenti React sono organizzati in una  gerarchia. Molte bolte, il tuo data model  segue una gerarchia a sua volta. In queste situazioni Flux non aiuta molto. A volte, invece, il tuo data model non e' gerarchico. Quando i tuoi componenti React iniziano a ricevere `props` che sembrano estranee, o hai un piccolo numero di componenti che iniziano a diventare molto complessi, allora potresti voler dare un'occhiata a Flux. 

**Quando Flux ti servira', lo saprai. Se non sei sicuro di averne bisogno, non ti serve.**

Se hai deciso di usare Flux, La piu' famosa e meglio documentata libreria Flux e' [Redux](http://redux.js.org/). Ci sono  *un sacco* di alternative, e sarati tentatoto di provarne molte. Il mio consiglio e' di affidarti a quella piu' popolare.

## Imparare gli  inline styles

nell'era pre-React, molte persone riutilizzavano gli stili CSS conc complicati fogli di stile costruita da preprocessori come SASS. Visto che react rende lo scrivere componenti riutilizzabili facile, i tuoi fogli di stile possono essere meno complicati. Molti all'interno della comuniti (io compreso) stanno sperimentando il completo abbandono dei fogli di stile.

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.
E' un'idea abbastanza folle per diverse ragioni. Rende le media queries difficili, ed e' possibile imbattersi in qualche problema di perfomance utilizzando qusta tecnica. **Quando inizi con React, utilizza gli stili come faresti normalmente.**

Una volta che capisci come funziona React, puoi dare un occhio a tecniche alternative. Una molto popolare e' [BEM](https://en.bem.info/).
Io raccomando la graduale eliminazione dei preprocessori CSS, in quanto React ti offre una modo piu' potente di riutilizzare gli stili (tramite il riutilizzo dei componenti) ed il tuoi Javascript bundler puo' ottimizzare gli stylesheets per te' (feci [un seminario riguardo questo all'OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)).
Detto Questo, React, come altre librerie Javascript, funzionera' bene insieme ad un preprocessore CSS.

In alternativa, puoi anche utilizzare i [CSS Modules](http://glenmaddern.com/articles/css-modules), nello specifico [react-css-modules](https://github.com/gajus/react-css-modules). Con i CSS Modules scrivi sempre CSS (o SASS/LESS/Stylus), ma puoi gestire e comporre i tuoi file CSS come se stessi usando gli inline styles di React. E non ti devi preoccupare di gestire i nomi delle tue classi utilizzando metodologie come BEM, in quanto saranno gestite automaticamente dal sistema di modularizazione.


## Imparare il server rendering

Il Server rendering e' spesso chiamato  "universal"(universale) o "isomorphic"(isomorfico) JS. Vuold dire che poi prendere i tuoi componenti React e renderizzarli come HTML statico sul server. Questo migliora la prestazione iniziale perche' l'utente non deve aspettare che il JS sia scaricato per vedere la UI iniziale, inoltre React puo' riutilizzare l'HTML renderizzato lato server che non deve essere quindi generato lato client

Hai bisongno sel server rendering se noti che il tuo rendering iniziale e' troppo lento o se vuoi migliorare il tuo ranking sui motori di ricerca. Se e' vero che Goodle adesso indicizza il contenuto generato dal client, al Gennaio 2016 ogni volta che e' stato misurato a mostrato di influenzare negativamente il ranking, potenzialmente per via delle penalita' nella performance intodotte la client side rendering.

Il server rendering richiede ancora molta configurazione per funzionare correttamente. Sicoome e' supportato in maniera trasparente dai componenti React scritti senza il server side rendieng in mente, dovresti prima fare la tua app e solo successivamente preoccuparti del server rendering. Non ti servira' riscrivere ogni tuo componente per supportarlo.


## Imparare Immutable.js

[Immutable.js](https://facebook.github.io/immutable-js/) fornisce un insieme di strutture dati che ti aiutano a risolvere certi problemi di prestazioni mentre sviluppi applicazioni React.
E' una grande libraria, e probablimente la userai molto andando avanti nelle tue apps, ma e' completamente non necessaria finche' non avrai problemi di performance.

## Imparare Relay, Falcor etc

Sono tecnologie che ti aiutano a ridurre il numero di richieste AJAX. Sono ancora molto sperimentali, quindi se non hai un problema di troppe chiamate AJAX, non ti serve usare Realy o Falcor.


================================================
FILE: README-ko.md
================================================
# react 첫걸음

당신이 React(혹은 프론트엔드개발) 초심자라면 생태계가 혼란스럽다는 사실을 발견할 것입니다. 거기에는 몇 가지 이유가 있습니다.

* React는 역사적으로 얼리어답터와 전문가 집단을 겨냥해서 만들어졌습니다.
* Facebook은 실제로 사용하는 것만을 오픈 소스화 합니다, 그래서 페이스북보다 작은 프로젝트들을 위해 오픈 소스를 다듬어 가는 데 집중하지 않습니다.
* React 개발 지침이라고 자처하지만 홍보를 위한 거짓부렁이 많습니다.

예상하건데, 이 글을 읽다 보면 당신은 HTML, CSS 그리고 JavaScript로 페이지를 작성할 것입니다.

## 제 얘기를 왜 들어야 할까요?

여기저기 React에 대해서 모순되는 충고들이 차고 넘칩니다; 제 얘기를 왜 들어야 할까요?

저는 Facebook에서 React를 오픈소스화한 팀의 원년멤버였습니다. 지금은 Facebook 에서 나와 작은 스타트업에 있습니다. 그래서 Facebook 이 아닌 사람들의 관점도 잘 알고 있습니다.

## React 생태계와 씨름하는 방법

모든 소프트웨어는 기술의 집합으로 이루어져 있습니다. 그리고 당신이 애플리케이션을 만들기 위해서는 그 기술 요소들을 충분히 이해할 필요가 있습니다. 잘못된 순서로 대부분 이 기술들을 기술되기 때문에 React 생태계의 tooling(자동화 및 툴 개발)이 부담스럽게만 여겨잡니다.

다음과 같은 순서로 배우셔야 합니다. **순서를 뛰어넘거나 동시에 하시면 안됩니다**:

* [React 자체를 배우기](#learning-react-itself)
* [`npm`](#learning-npm)
* [JavaScript “번들러”](#learning-javascript-bundlers)
* [ES6](#learning-es6)
* [Routing](#learning-routing)
* [Flux](#learning-flux)

**React를 잘하기 위해서 이 모든 걸 할 필요는 없습니다.** 단지 문제 해결을 위해서만 다음 단계로 이동하세요.

좀더 추가하자면, 안정적이지는 않지만 React 커뮤니티에서 종종 언급되는 (소위 "bleeding edge") 토픽들이 몇 가지 있습니다. 아래 보이는 토픽들은 흥미롭기는 하지만, 이해하기 힘들고 앞에 언급된 토픽들에비해 대중적이지 않습니다. 그리고 **대부분의 앱에서는 필요하지 않습니다.**
* [Inline styles](#learning-inline-styles)
* [Server rendering](#learning-server-rendering)
* [Immutable.js](#learning-immutablejs)
* [Relay, Falcor, etc](#learning-relay-falcor-etc)

## React 자체를 배우기

일반적으로 잘못 알려진 이야기가 React를 배우기 시작하기 위한 세팅시간이 많이 걸린다는 것입니다. 공식문서에서 ([복사-붙여넣기 용 HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm)) 을 이용해서 `.html` 파일로 저장해서 바로 시작할 수 있습니다. **이 단계에서는 어떤 툴 및 세팅이 필요없고 기본 React에 익숙해 질때까지는 다른 툴 및 세팅을 시작하지 마십시오**

저는 아직도 React를 배우는 가장 쉬운 방법은 [공식문서](https://facebook.github.io/react/docs/tutorial.html) 라고 생각합니다.

## `npm` 배우기

`npm`은 Node.js용 패키지 관리자입니다. 프론트엔드 엔지니어와 디자이너들이 Javascript 코드를 공유하는 가장 보편적인 방법입니다. `CommonJS`라고 불리는 모듈 시스템을 포함하고 있으며 Javacript 로 작성된 CLI(command-line interface) 기반으로 모듈을 설치 할 수 있습니다. 브라우저를 위해 `CommonJS` 가 왜 필요한지에 대한 배경을 알기 위해서는 [이 글](http://0fps.net/2013/01/22/commonjs-why-and-how/) 을 읽어보시고, `CommonJS` API에 대한 이해를 위해서는 [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) 를 읽어보십시오.

대부분의 React 생태계의 재사용 가능한 컴포넌트, 라이브러리, 툴은 `CommonJS` 모듈을 통해 사용가능하고 `npm`으로 설치됩니다.

## JavaScript 번들러 배우기

몇가지 많은 기술적 이유들 때문에 `CommonJS` 모듈 (`npm` 에 있는 모든 모듈)들은 브라우저에서 그대로 사용할 수 없습니다. 이 모듈들을 웹페이지의 `<script>` 태그에 포함된 `.js` 파일들을 포함하기 위해서는 Javascript 번들러가 필요합니다.

Javascript 번들러의 예를 들자면 `webpack` 과 `browserify`가 있습니다. 모두 좋은 선택입니다. 하지만 저는 큰 애플리케이션의 개발을 쉽게 도와주는 기능이 많은 `webpack` 을 선호합니다. 문서화가 좀 헷갈린다면 [개발 시작을 위한 플러그앤 플레이 템플릿](https://github.com/petehunt/react-webpack-template)이 있고, 조금 더 복잡한 경우에는 제가 작성한 [webpack 사용기](https://github.com/petehunt/webpack-howto)도 있습니다.

명심할 점 : `CommonJS`는 `require()` 함수를 모듈 임포트에 사용합니다. 그래서 많은 사람들이 `require.js`로 불리는 프로젝트와 뭔가 해야하는 지 헷갈립니다. 여러가지 기술적 이유로 `require.js`를 쓰지 말것을 추천해 드립니다. React생태계에서도 일반적이지는 않습니다.

## ES6 배우기

React 예제에서 JSX(React 튜토리얼을 배울때 보던)를 감싸고 있던 코드에서 아마 당신은 재미있는 문법들을 보았을 것입니다. ES6 라고 불리는 이것은 Javascript의 최신버전입니다. 그래서 아직 당신은 이것을 배운적이 없었을 겁니다. 브라우저에서 아직은 완전히 지원되지 않지만, 번들러는 적합한 설정과 함께 브라우저가 이해할 수 있게 변환시켜 줍니다.

만약 당신이 작업을 그저 React를 통해 완수하려면  **ES6배우는 것은 건너뛰거나** 혹은 작업 중에 시도해 볼 수도 있습니다.

React 컴포넌트를 만들기 위해서 더 선호되는 방법이 ES6라는 이야기를 많이 들었을 수도 있습니다. 사실이 아닙니다. 대부분 사람은 (Facebook 엔지니어 포함) `React.createClass()` 로 클래스를 만듭니다.
(역자 주. ES6에서는 function 처럼 class 키워드를 통해 생성합니다.)

## routing 배우기

싱글페이지 앱(SPA)은 요즘 일시적인 대 유행입니다. 이들은 한번 페이지를 로딩한 뒤, 사용자가 링크나 버튼을 클릭하면 페이지에서 돌고 있던 javascript 가 주소창을 바꿉니다. 그러나 웹페이지가 갱신되지 않습니다. 주소창의 주소를 관리하는 것은 이른바 **router** 가 관장합니다.

React 생태계의 가장 유명한 router는 [react-router](https://github.com/rackt/react-router) 입니다. 만약 싱글페이지 앱을 만든다면 쓰면 안 되는 좋은 이유가 없는 한 이용하시면 됩니다.

**싱글페이지앱을 만들지 않는다면 router를 사용하지 마세요***. 대부분 프로젝트는 어쨌든 더 큰 애플리케이션의 안쪽에서 동작하는 작은 컴포넌트로 시작합니다.

## Flux 배우기

Flux를 아마도 들어보셨을 거라고 봅니다. Flux에 대해서는 엄청나게 많은 잘못 알려진 정보들 투성이입니다.

많은 사람이 애플리케이션을 만들고 자신들의 데이터 모델을 정의하기를 원합니다. 그래서 그 일들을 위해 Flux를 사용하기 원합니다. **이것은 Flux를 적용하는 나쁜 방법입니다. Flux는 오직 많은 컴포넌트가 만들어지고 난 뒤 한 번만 더해져야 합니다.**

React 컴포넌트는 계층적으로 정돈됩니다. 대부분의 경우에, 당신의 데이터 모델은 계층구조를 따릅니다. 이런 상황에서는 Flux가 당신에게 쓸모없습니다. 하지만 때때로 당신의 데이터 모델이 계층적이지 않을 수 있습니다. React 컴포넌트가 본 기능에 충실하지 않은 `props`를 받아야 하는 상황들이 시작된다거나, 작은 컴포넌트들이 매우 복작하게 엉키기 시작한다면 Flux를 고려할 시간입니다.

**당신이 Flux가 필요할때 알게 될 것입니다. 만약 당신이 확실한 필요성이 느껴지지 않는 상태면 사용할 필요 없습니다..**

Flux를 사용하기로 했다면 가장 유명하고 잘 문서화 되어 있는 Flux 라이브러리는 [Redux](http://redux.js.org/)입니다. 대체할 만한 것들은 *많고* 일일이 평가해보고 싶은 생각이 드시겠지만, 제 충고는 일단 가장 유명한 것을 사용해 보는 것입니다.

## 인라인 스타일 배우기

React가 생겨나기 전에, 많은 사람은 CSS 스타일들을 SASS같은 전처리기로 만들어진 복잡한 스타일 시트와 함께 재사용했습니다. React가 재사용 가능한 컴포넌트를 쉽게 만들 수 있게 한 이후로, 스타일 시트는 다소 복잡함이 줄어들 수 있게 되었습니다. 커뮤니티의 다수(나를 포함해서)들은 스타일시트를 완전히 제거하는 실험들을 하고 있습니다.

이것은 여러 가지 이유를 고려하면 상당히 미친 아이디어 입니다. 이렇게 하면 미디어쿼리가 더 어려워지고 이런 기술을 사용하는 데에는 성능의 한계가 있을 수도 있습니다. **React를 시작할 때에는 style 관련된 것들은 하던데로 진행하십시오**

React가 어떻게 동작하는지 감이 오고 나면 대체 가능한 기술들을 찾아보게 될 것입니다. 그중 유명한 녀석이 [BEM](https://en.bem.info/)입니다. 단계적으로 CSS 전처리기를 폐지하기를 추천합니다. 왜냐하면, React는 당신에게 스타일들을 재사용할 수 있는 강력한 방법들을 (컴포넌트를 재사용하면서) 제공하기 때문이고 Javascript 번들러는 더 효과적인 방법으로 스타일 시트들을 만들어내기 때문입니다. ( [OSCON에서 제가 한 발표](https://www.youtube.com/watch?v=VkTCL6Nqm6Y) 를 공유합니다.) 보시면 아시겠지만 다른 Javascript 라이브러리와 마찬가지로 CSS 전처리기와 궁합이 좋습니다.

대안으로 [CSS Modules](http://glenmaddern.com/articles/css-modules) 을 사용할 수도 있고, 조금 더 자세하게는 [react-css-modules](https://github.com/gajus/react-css-modules) 를 살펴볼 수도 있습니다. CSS 모듈들과 함께 여전히 CSS (or SASS/LESS/Stylus)를 작성할 수 있지만 React 안의 인라인 스타일로 CSS 파일을 구성할 수 있습니다.  BEM 같은 방법론을 사용한다면 class name을 관리하는 것을 걱정할 필요도 없습니다. 이것은 모듈 시스템안에서 다뤄지기 때문입니다.

## 서버 렌더링 배우기

서버 렌더링은 종종 "유니버설" 혹은 "동형" 자바스크립트로 불립니다. 이것이 의미하는 바는 React 컴포넌트를 사용해 static HTML을 서버에서 그릴 수 있다는 이야기 입니다. 이렇게 하면 첫화면 UI를 보기위해 JS 파일을 다운받는 시간이 절약되고 React는 서버에서 렌더링한 HTML을 재사용해 클라이언트에서 페이지를 만들 필요가 없기 때문에 페이지 초기 진입 과정의 성능을 개선시켜줍니다.

만약 초기 렌더링 속도가 너무 느리다거나 서치엔진의 순위를 개선하고 싶다면 서버 렌더링이 필요합니다. 구글이 클라이언트 렌더링 콘텐츠에 대해 index를 만드는 것은 사실이지만, 2016년 1월까지는 클라이언트 렌더링의 성능에 대한 패널티 때문에 잠재적으로 검색 순위에 부정적인 영향을 미치는 것으로 측정되었습니다.

서버 렌더링은 제대로 하기 위해서는 아직은 많은 세팅을 필요로 합니다. 서버 렌더링을 염두에 두지 않고 React 컴포넌트는 작성되었기 때문에(투명하게 지원하지만), 일단 애플리케이션을 만들고 서버 렌더링은 이후에 생각해야 합니다. 서버 렌더링을 지원하기 위해 모든 컴포넌트를 새로 짤 필요는 없을 것입니다.

## Immutable.js 배우기

[Immutable.js](https://facebook.github.io/immutable-js/) 는 React 앱을 만들때 발생하는 특정한 성능 이슈를 해결하는 데 도움을 주는 데이터 구조체들의 집합을 제공합니다. 이 훌륭한 라이브러리를 앞으로 많이 사용하게 될것입니다. 하지만 당신이 성능에 미치는 영향의 진가를 알아볼 때까지는 완전히 불필요할 것입니다.

## Relay, Falcor 등등

이 기술들은 AJAX 요청들을 줄여주는 도움을 줄 것입니다. 아직 그것들은 최신 기술에 속하므로 너무 많은 AJAX 요청 때문에 문제가 되는 일이 아니라면 Relay나 Falcor 등은 필요 없습니다.


================================================
FILE: README-lv.md
================================================
# react-howto

Ja jūs tikai sākat apgūt React (vai frontendu kopumā), tad šī ekosistēma, var jums likties samērā mūlsinoša. Tam ir vairāki iemesli:

* Vēsturiski React mērķauditorija bija eksperti un šīs ekosistēmas agrīnie sekotāji
* Facebook atver pirmkodu tikai tiem resusriem, kas tiek izmantoti šīs kompānijas ietvaros, tādējādi kompānija nefokusējas uz to rīku izstrādi, kas paredzēti mazākiem projektiem kā Facebook
* Tīklā atrodamas daudzas sliktas kvalitātes React rokasgrāmatas

Šī dokumenta ietvaros, es pieņemu, ka jums ir pieredze tīmekļa vietņu izstrādē, izmantojot HTML, CSS un JavaScript.

## Kāpēc jums būtu manī jāklausās?

Visapkārt ir daudz un dažādu konfliktējošu ieteikumu sakarā ar React; Kāpēc gan klausīties manī?

Es biju viens no sākotnējiem Facebook komandas biedriem, kas izstrādāja un publiskoja React. Es vairs nestrādāju Facebook un šobrīd es darbojos mazā jaunuzņēmumā, tādējādi uz šo visu man ir arī ne-Facebook skatījums.

## Kā apgūt React ekosistēmu?

Jebkurš programnodrošinājums ir izstrādāts pamatojoties uz kāda noteikta tehnoloģiju steka, tāpēc jums ir nepieciešams apgūt pietiekami daudz šī steka satura, lai jūs paši spētu izstrādāt lietojumus. Iemesls, kāpēc React ekosistēma liekas tik milzīga ir tas, ka tā vienmēr tiek izskaidrota nepareizā kārtībā.

Jums būtu jāmācās, lūk šādā kārtībā, **neko neizlaižot un nemācoties vairākas lietas vienlaicīgi**:

* [React apguve](#react-apguve)
* [`npm`](#npm-apguve)
* [JavaScript “bundlers” (pakotāji)](#javascript-pakotāju-apguve)
* [ES6](#es6-apguve)
* [Maršrutēšana](#maršrutēšanas-apguve)
* [Flux](#flux-apguve)

**Jums nav jāapgūst viss no šī, lai būtu produktīvi izmantojot React.** 
Pārejiet pie nākamā soļa tikai tad, kad Jums ir problēma, kuru tas risina.

Kā arī, React kopienā ir dažas tēmas, kuras ir "super-mūsdienīgas prakses" ("bleeding edge"). Šīs tēmas ir interesantas, taču ar tām ir sarežģītāk tikt skaidrībā, salīdzinot ar tām, kas ir pieminētas augstāk, kā arī **izstrādājot vairumu lietojumu, tās nav nepieciešamas**
* [Iekļautie stili](#ekļauto-stilu-apguve)
* [Renderēšana servera pusē](#renderēšana-servera-pusē)
* [Immutable.js](#immutablejs-apguve)
* [Relay, Falcor, utt.](#relay-falcor-utt-apguve)

## React apguve

Pastāv maldīgs uzskats, ka ir jāvelta daudz laika, lai uzstādītu visus nepieciešamos rīkus, lai varētu uzsākt React apguvi. Oficiālajā dokumentācijā, jūs atradīsiet [copy-paste HTML veidni](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm), ko jūs varēsēsiet saglabāt kā `.html` failu un spēsiet uzreiz uzsākt to apgūt. **Šim solim nav nepieciešami nekādi rīki, un neturpiniet mācīties jaunus rīkus, līdz jūs būsiet pārliecināti par savām zināšanām React pamatos.**

Es joprojām uzskatu, ka vieglākais veids, kā apgūt React ir [oficiālā rokasgrāmata](https://facebook.github.io/react/docs/tutorial.html).

## NPM apguve

`npm` ir Node.js pārvaldnieks, un tas ir vispopulārākais veids, kādā front-end izstrādātāji un dizaineri dalās ar JavaScript kodu. Tas iekļauj moduļu sistēmu `CommonJS` un ļauj jums instalēt komandrindas rīkus, kas izstrādāti izmantojot JavaScript. Lasiet [šo rakstu](ttp://0fps.net/2013/01/22/commonjs-why-and-how/), lai gūtu pamata zināšanas par to, kāpēc `CommonJS` ir nepieciešams pārlūkiem, vai [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction), kur atrodas sīkāka informācija par `CommonJS` API.

Lielākā daļa pakešu, rīku un komponenšu React ekosistēmā ir pieejamas kā `CommonJS` moduļi un tiek instalēti izmantojot `npm`.

## JavaScript pakotāju apguve

Vairāku tehnisku iemeslu dēļ `CommonJS` moduļi (tas ir viss, kas ir iekš `npm`) nevar tikt izmantoti pa tiešo pārlūkā. Tādēļ jums ir nepieciešams izmantot JavaScript pakotāju “bundler”, lai varētu iepakot šos moduļus `.js` failos, kurus jūs varēsiet iekļaut savā tīmekļa lapā izmantojot `<script>` tagu.

`Webpack` un `browserify` ir JavaScript pakotāji. Abi ir labas izvēlas, taču es dotu priekšroku `webpack`, tā kā tam ir vairākas īpašības, kas padara lielu lietojumu izstrādi vienkāršāku. Tā dokumentācija var būt mūlsinoša, taču man ir [viedne ātram startam](https://github.com/petehunt/react-webpack-template) un es esmu uzrakstījis [how-to-rokasgrāmatu priekš webpack](https://github.com/petehunt/webpack-howto), kur tiek izskatīti sarežģītāki gadījumi.

Viena lieta ir jāpatur prātā: `CommonJS` izmanto `require()` funkciju, lai importētu moduļus, šīs funkcijas dēļ cilvēki beiži vien apmūlst, jo domā, ka tai ir kāda darīšana ar projektu, kas saucas `require.js`. Vairāku tehnisku iemeslu dēļ, es ieteiktu izvairīties no `require.js`. Kā arī šis projekts nav populārs React ekosistēmā.

## ES6 apguve

Neskaitot JSX (ko jūs apguvā React rokasgrāmatā), jūs varat sastapt jocīgu sintaksi React piemēros. To sauc par ES6, un tā ir jaunākā JavaScript versija, kuru, iespējams, jūs vēl neesat apguvuši. Tā kā šī versija ir tik jauna, ne visi pārlūki to atbalsta, taču jūsu pakotājs to var translēt jūsu vietā, izmantojot noteiktu konfigurāciju.

**Jums nav nepieciešams apgūt ES6, lai varētu izstrādāt lietojumus, izmantojot React**, jūs varat to apgūt arī vēlāk.

Jūs noteikti esat dzirdējuši dažādas runas par to, ka jums būtu jādod priekšroka ES6 klasēm, lai izstrādātu React komponentes. Tā nav taisnība. Lielākā daļa cilvēku (ieskaitot Facebook) izmanto `React.createClass()`.

## Maršrutēšanas apguve

“Vienas lapas lietojumi” (Single-page applications vai SPA) - ir mūsdienīgs trends. Pastāv lapas, kas tiek ielādētas vienreiz, un tad, kad lietotājs noklikšķina uz saites vai pogas, JavaScript, kas darbojas lapā, atjaunina adreses joslu, taču pati lapa netiek pārlādēta. Adreses joslas pārlāde tiek nodrošināta izmantojot **maršrutētāju**.

Vispopulārākais maršrutētājs React ekosistēmā ir [react-router](https://github.com/rackt/react-router). Ja jūs izstrādājat vienas lapas lietojumu, tad cenšaties to izmantot, ja vien jums nav kāds labs iemesls to nedarīt.

**Neizmantojiet maršrutētāju, ja jūs neizstrādājat vienas lapas lietojumu**.
Lielākā daļa projektu tiek radīti sākot ar mazām komponentēm iekš pastāvoša liela lietojuma.

## Flux apguve

Jūs noteikti esat dzirdējuši par Flux. Pastāv *daudz* maldīgas informācijas par Flux.

Liela daļa cilvēku cenšas izlemt par labāko datu modeli un uzskata, ka lai to izstrādātu tiem ir nepieciešams Flux. **Tas ir nepareizs veids kā iekļaut Flux. Par Flux ir jāsāk domāt tikai tad, kad vairākas komponentes jau ir izstrādātas**

React komponentes tiek izkārtotas hierarhijā. Lielākoties, jūsu datu modelis arī seko kādai noteiktai hirerhijai. Šajās situācijās, Flux nedod jums daudz pievienotās vērtības. Taču, dažkārt, jūsu datu modelis nav hierarhisks. Kad jūsu React komponentes sāk saņemt `props`, kas var likties "ārēji", vai arī tad, kad jums ir mazs komponenšu skaits un tās sāk palikt diezgan sarežģītas, tad tas varētu būt gana labs iemesls, lai jūs iepazītos ar Flux.

**Jūs zināsiet, kad jums būs nepieciešams Flux. Ja jūs neesat pārliecināti, vai tas jums ir vajadzīgs, tad jums tas nav vajadzīgs.**

Ja jūs tomēr esat nolēmuši lietot Flux, tad vispopulārākā un vislabāk dokumentētā Flux bibliotēka ir [Redux](http://redux.js.org/). Tam pastāv *daudz* un dažādas alternatīvas, un jums var likties vilinoši daudzas no tām salīdzināt, taču es iesaku izvēlēties vispopulārāko un to izmantot.

## Iekļauto stilu apguve

Prims React, vairums cilvēku lietoja CSS-preprocessorus, piemēram, SASS, lai varētu pārizmantot stilus. React padara pārizmantojamu kopmonenšu izstrādi vienkāršu, tādējādi stilu izstrāde var būt mazāk sarežģīta. Daudzi no kopienas (ieskaitot mani) veic eksperimentus, lai nākotnē varētu tikt vaļā no CSS pavisam.

Tā ir samērā traka ideja, vairāku iemeslu dēļ. Tā sarežģī media vaicājumu (media queries) izstrādi, kā arī, iespējams, izmantojot šo metodoloģiju, pastāv arī veiktspējas ierobežojumi. **Ja jūs tikai sākat darbu ar React, tad turpiniet rakstīt css-stilus tā, kā esat raduši.**

Kad jūs būsiet izjutuši to, kā React darbojas, jūs varat apskatīt alternatīvas pieejas. Viena no populārākajām ir [BEM](https://en.bem.info/). Es ieteiktu izvairīties no CSS-preprocessoriem, tā kā React piedāvā lokanāku pieeju stilu pārizmantošanā (pārizmantojot komponentes), kā arī tādējādi jūsu JavaScript pakotājs būs spējīgs ģenerēt efektīvākas stilu tabulas priekš jums ([Mana runa par šo tēmu OSCON konferencē](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Līdz ar to, React, kā jau jebkura cita JavaScript bibliotēka, strādās labi arī ar CSS-preprocessoru.

Alternatīvi,  jūs varat arī izmantot [CSS moduļus](http://glenmaddern.com/articles/css-modules), konkrētāk [react-css-modules](https://github.com/gajus/react-css-modules). Ar CSS moduļiem jūs joprojām varat rakstīt CSS (vai SASS/LESS/Stylus), taču jūs varēsiet pārvalīdīt savus CSS failus līdzīgi, kā to darītu ar iekļautajiem stiliem izmantojot React. Kā arī jums nav nepieciešams uztraukties par to, kā saukt CSS klases, izmantojot tādas metodoloģijas kā BEM, jo to pārvaldīs moduļu sistēma jūsu vietā.

## Renderēšana servera pusē

Renderēšana servera pusē, bieži tiek saukta par "universālu" vai "izomorfisku" JS. Tas nozīmē, ka jūs varat paņemt savas React komponentes un renderēt tās par statusku HTML servera pusē. Tas uzlabo sākotnējo lapas ielādi, jo tādā veidā, lietotājam nav nepieciešams gaidīt, kamēr JS tiks ielādēts, lai redzētu sākotnējo lietotāja interfeisu, kā arī React var pārizmantot servera pusē renderēto HTML, tādā veidā tam nav nepieciešams to ģenerēt lietotāja pusē.

Jums ir nepieciešama servera puses renderēšana, ja jūs manat, ka jūsu pirmreizējā renderēšana ir pārāk lēna, vai arī, ja jūs vēlaties veikt SEO (meklētājprogrammas optimizāciju). Kautgan, Google tagad ir spējīgs indeksēt lietotāja pusē renderētu saturu, ir pierādīts, ka līdz ar 2016. gada mērijumiem, satura renderēšana lietotāja pusē joprojām negatīvi ietekmē ranžēšanu, potenciāli dēļ lēnās renderēšanas lietotāja pusē.

Lai panāktu renderēšanu servera pusē ir nepieciešama tās "pareiza" realizācija izmantojot daudzus rīkus. Tā kā, React komponenšu izstrādes rīki ir izstrādāti neturot prātā problēmas, kas saistītas ar renderēšanu servera pusē, ieteicams sākumā izstrādāt lietojumu un satraukties par renderēšanu servera pusē tikai pēc tam. Jums nebūs nepieciešams pārrakstīt visas jūsu komponentes, lai varētu to ieviest.

## Immutable.js apguve

[Immutable.js](https://facebook.github.io/immutable-js/) piedāvā datu struktūru kopumu, kas var palīdzēt atrisināt noteiktas problēmas saistītas ar veiktspēju, izstrādājot React lietojumus. Tā ir brīnišķīga bibliotēka, un jums noteikt nāksies to izmantot nākotnē lietojumu izstrādē, taču tā absolūti nav nepieciešama, kamēr jūs nesastapsieties ar lietojuma veiktspējas problēmām.

## Relay, Falcor utt. apguve

Šīs tehnoloģijas palīdz jums samazināt AJAX pieprasījumu skaitu. Tās ir relatīvi eksperimentālas, tāpēc, ja jums nav problēmu, kas saistītas ar pārmērīgi daudziem AJAX izsaukumiem, jums nav nepieciešamības izmantot Relay vai Falcor.


================================================
FILE: README-my.md
================================================
# react-howto

Sekiranya anda baru kepada React (atau `frontend` secara am) anda mungkin mendapati ekosistemnya bercelaru. 

Berikut adalah beberapa sebab kenapa ianya berlaku:

* React dari segi sejarahnya disasarkan kepada para `early-adopters` dan para pakar.
* Facebook hanya open-source apa yang mereka sendiri guna, jadi ia tidak memberi fokus kepada tooling untuk projek yang lebih kecil dari Facebook.
* Terdapat banyak bahan marketing yang disalahgambarkan sebagai paduan kepada React

Sepanjang dokumen ini, saya akan menganggap anda pernah membina laman web menggunakan HTML, CSS dan Javascript.

## Kenapa anda perlu percaya pada saya?

Terdapat terlalu banyak nasihat yang bercelaru mengenai React di luar sana: kenapa percayakan saya?

Saya adalah salah seorang ahli asal pasukan Facebook yang membina dan open-source React. Saya tidak lagi di Facebook dan sekarang berada di sebuah syarikat startup yang kecil, jadi saya juga mempunyai perspektif yang diluar perspektif Facebook. 

## Bagaimana mahu bermula dengan ekosistem React

Semua perisian adalah dibina di atas susunan beberapa teknologi, dan anda mesti memahami secukupnya susunan tersebut untuk membangunkan perisian anda.  Sebab utama megapa ekosistem React nampak terlalu sukar untuk difahami ialah kerana ianya selalu dijelaskan di dalam susunan yang tidak tepat.  

Anda sepatutya belajar, di dalam susunan ini, **tanpa melangkau ke hadapan atau belajar secara selari**:

* [React](#belajar-react)
* [`npm`](#belajar-npm)
* [JavaScript “bundlers”](#belajar-javascript-bundlers)
* [ES6](#belajar-es6)
* [Routing](#belajar-routing)
* [Flux](#belajar-flux)

**Anda tidak perlu mempelajari semua ini untuk menjadi produktif menggunakan React.** Anda hanya perlu melangkah ke hadapan sekiranya ada masalah yang memerlukan langkah tersebut sebagai penyelesaian.

Sebagai tambahan, terdapat beberapa topik yang selalu dibincangkan di dalam komuniti React adalah tergolong di dalam "bleeding edge".  Topik-topik di bawah adalah menarik, tetapi mereka selalunya susah untuk difahami, tidak sebegitu popular sebagaimana topik-topik di atas dan **tidak semestinya digunakan oleh kebanyakan perisian**.

* [Inline styles](#belajar-inline-styles)
* [Server rendering](#belajar-server-rendering)
* [Immutable.js](#belajar-immutablejs)
* [Relay, Falcor, dan lain-lain](#belajar-relay-falcor-dan-lain-lain)

## Belajar React

Silapfaham yang paling biasa adalah anda perlu membuang banyak masa membuat `tooling setup` untuk mula belajar React.  Di dalam dokumentasi rasmi anda akan menjumpai [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) yang anda boleh simpan di dalam fail '.html' dan terus bermula. 

Saya masih berpendapat cara paling mudah untuk belajar React adalah melalui [tutorial rasmi](https://facebook.github.io/react/docs/tutorial.html).

## Belajar `npm`

`npm` ialah `package manager` untuk Node.js dan merupakan cara paling popular untuk `front-end engineer` dan `designer` berkongsi kod Javascript.  Baca [artikel ini](http://0fps.net/2013/01/22/commonjs-why-and-how/) untuk mengetahui latarbelakang kenapa `CommonJS` menjadi keperluan kepada browser, atau baca [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) untuk maklumat lanjut mengenai `CommonJS` API.

Banyak komponen, `libraries` dan `tools` di dalam ekosistem React adalah tersedia sebagai modul `CommonJS` dan boleh dipasang menggunakan `npm`. 

## Belajar `Javascript bundlers`

Untuk beberapa sebab teknikal, modul-modul `CommonJS` (iaitu kesemua di dalam `npm`) tidak dapat digunakan secara `native` di dalam `browser`.  Anda memerlukan `Javascript bundler` untuk mem-bundle kesemua modul tersebut ke dalam fail `.js` yang kemudiannya disertakan di dalam `web page` dengan menggunakan tag `<script>`.

Antara contoh `Javascript bundler` termasuklah `webpack` dan `browserify`.  Keduanya ada pilihan yag bagus, tetapi saya memilih `webpack` kerana ia mengandungi banyak `feature` yang memudahkan pembangunan perisian skala besar.  Oleh kerana dokumentasi rasminya boleh mengelirukan, saya menyediakan [plug-and-play template for getting started](https://github.com/petehunt/react-webpack-template) dan menulis [panduan kepada webpack](https://github.com/petehunt/webpack-howto) untuk penggunaan yang lebih kompleks. 

Satu perkara yang perlu diberi perhatian: `CommonJS` menggunakan function `require()` untuk `import modules`, menyebabkan kekeliruan dan ramai yang menyangka ianya berkaitan dengan projek `require.js`.  Untuk beberapa sebab teknikal, saya cadangkan anda untuk menghindari dari menggunakan `require.js`.  Ianya juga tidak begitu popular di dalam ekosistem React.

## Belajar ES6

Selain daripada JSX (yang anda pelajari di dalam tutorial React), anda mungkin akan menemui beberapa sintaks yang agak pelik di dalam contoh-contoh aplikasi React.  Ini dipanggil ES6, dan ianya adalah versi terbaharu Javascript, jadi mungkin anda masih belum belajar mengenainya.  Oleh sebab ianya masih baharu, ianya masih belum disokong penggunaanya di dalam `browser`, tetapi `bundler` anda akan membuat penyesuian yang diperlukan.

Sekiranya anda cuma mahu menghasilkan sesuatu hanya dengan React, **anda boleh abaikan belajar ES6**, atau ambil masa belajar sedikit demi sedikit.

Anda mungkin telah menonton beberapa ceramah yang mengatakan penggunaan `ES6 classes` adalah cara yang sepatutnya digunakan untuk membina komponen React. Ini tidak benar.  Kebanyakan pengguna (termasuk Facebook) menggunakan kaedah `React.createClass()`.

## Belajar `routing`

“Single-page applications” adalah hangat diperkatakan hari ini.  Mereka adalah `web page` yang di-load sekali sahaja, dan apabila pengguna memetik `link` atau `button`, `address bar` pada `browser` akan di-update oleh aplikasi Javascript dan tidak memerlukan `web page` tersebut untuk `refresh`.  Perubahan pada `address bar` tersebut diuruskan oleh apa yang dikenali sebagai **router**.

`Router` yang paling popular di dalam ekosistem React adalah [react-router](https://github.com/rackt/react-router).  Sekiranya anda mebangunkan aplikasi berbentuk `single-page application`, penggunaannya adalah disarankan, kecuali jika anda mempuyai alasan untuk menghindarinya.

**Jangan gunakan `router` sekiranya anda bukan membina aplikasi berbentuk `single-page application`**.  Lagipun, kebanyakan projek bermula sebagai komponen di dalam satu aplikasi yang lebih besar.

## Belajar Flux

Anda mungkin pernah dengar mengenai Flux.  Terdapat *terlalu banyak* maklumat yang tidak tepat mengenai Flux di luar sana.

Ramai yang apabila mula membangunkan aplikasi dan mahu membina `data model`, mereka berpendapat Flux adalah diperlukan untuk tujuan tersebut.  **Ini adalah cara yang salah untuk menggunakan Flux.  Flux sepatutnya digunakan hanya setelah banyak komponen dibina.**

Komponen React disusun di dalam hierarki.  Kebanyakan masa, `data model` anda juga disusun mengikut hierarki.  Di dalam situasi begini, Flux tidak memberikan banyak manafaat.  Cuma kadang-kadang `data model` anda tidak disusun di dalam hierarki.  Apabila komponen React anda mula menerima `props` yang dirasakan agak pelik, atau beberapa komponen kecil anda mula menjadi kompleks, itulah masa untuk anda mula menggunakan Flux.

**Anda akan tahu bila masa Flux diperlukan. Jika anda tidak pasti anda perlukannya, anda tidak memerlukannya.**

Sekiranya anda telah memutuskan untuk menggunakan Flux, `library` yang paling popular dan mempunyai dokumentasi yang lengkap adalah [Redux](http://redux.js.org/).  Terdapat *banyak* pilihan lain, dan anda mungkin mahu mengkaji kebanyakan mereka, tetapi nasihat saya ialah supaya anda cuma memilih yang popular sahaja. 

## Belajar `inline styles`

Sebelum kewujudan React, ramai yang menggunakan `CSS styles` yag dihasilkan oleh `CSS pre-processors` seperti SASS.  Oleh kerana React telah memudahkan pembangunan `reusable components`, `stylesheet` anda sepatutnya tidak lagi kompleks.  Ramai di dalam komuniti (termasuk saya) sedang membuat kajian untuk tidak langsung menggunakan `stylesheet`.

Ini adalah idea yang agak gila jika diambilkira beberapa sebab. Ianya membuatkan `media queries` lebih susah, dan berkemungkinan terdapat kekangan pada prestasi jika teknik ini digunapakai.  **Apabila bermula dengan React, gunakan kaedah `style` yang biasa anda gunakan.**

Apabila anda mula membiasakan diri dengan bagaimana React berfungsi, anda boleh mula mencari alternatif lain. Satu yang popular adalah [BEM](https://en.bem.info/).  Saya sarankan anda mula mengurangkan penggunaan `CSS preprocessor`, oleh kerana React memberikan anda cara yang lebih baik untuk mengulang-guna `styles` ( dengan menggunakan komponen) dan melalui `Javascript bundler` anda dapat menjana `stylesheet` yang lebih efisien (saya telah memberikan [ceramah mengenai isu ini di OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)).  Walaupun begitu, React, sebagaimana `Javascript library` yang lain, akan berfungsi seperti biasa biarpun dengan penggunaan `CSS preprocessor`.

Sebagai alternatif, anda juga boleh menggunakan [CSS Modules](http://glenmaddern.com/articles/css-modules), atau lebih spesifik [react-css-modules](https://github.com/gajus/react-css-modules).  Dengan CSS Modules, anda masih lagi menulis CSS (atau SASS/LESS/Stylus), tetapi anda boleh mengurus dan mencipta fail-fail CSS anda sebagaimana anda menggunakan kaedah `inline styles` melalui React. Dan anda tidak perlu runsing tentang pengurusan `class names` melalui metodologi seperti BEM, memandangkan ianya diuruskan untuk anda oleh `module system`.

## Belajar `server rendering`

`Server rendering` juga dikenali sebagai "universal" atau "isomorphic" JS. Ianya bermakna anda boleh mengambil komponen React dan `render` komponen tersebut ke dalam bentuk HTML statik di `server`.  Ini meningkatkan prestasi `startup` oleh kerana pengguna tidak perlu untuk menunggu untuk JS di-download untuk melihat UI awal, dan React dapat menggunakan komponen dari HTML di server supaya tidak perlu menjana UI tersebut di bahagian `client`.

Anda memerlukan `server rendering` apabila anda mendapati prestasi `render` awal anda terlalu perlahan atau and ingin membaiki `search engine ranking`.  Walaupun sekarang Google mengindeks kandungan yang disediakan melalui `client-render`, bermula pada Januari 2016, setiap kali pemantauan dijalankan, didapati kadungan tersebut memberikan impak negatif kemungkinan disebabkan oleh kekangan prestasi pada `client-side rendering`.

`Server rendering` masih memerlukan banyak `tooling` untuk dilaksanakan dengan betul. Anda sepatutnya membina aplikasi anda dahulu dan mengambil tahu mengenai `server rendering` kemudian.  Anda tidak akan perlu untuk menulis semula semua komponen anda untuk menggunakannya.

## Belajar Immutable.js

[Immutable.js](https://facebook.github.io/immutable-js/) menyediakan satu set `data structure` yang akan membantu untuk menyelesaikan beberapa isu prestasi ketika membina aplikasi React.  Ianya satu `library` yang hebat, dan anda mungkin akan banyak menggunakannya, tetapi ianya lansung bukan satu keperluan sehingga anda dapat memahami masalah kekangan prestasi pada aplikasi.

## Belajar Relay, Falcor dan lain-lain

Ini adalah teknologi yang membantu anda mengurangkan jumlah `AJAX requests`.  Mereka masih lagi di peringkat terlalu awal, jadi sekiranya anda tidak mempunyai masalah dengan terlalu banyak `AJAX requests`, anda tidak perlukan Relay atau Falcor.

================================================
FILE: README-pl.md
================================================
# react-howto

Stawiając pierwsze kroki w React (lub po prostu będąc nowym w temacie front-end'u), bardzo łatwo pogubić się w tym całym ekosystemie. Jest to spowodowane kilkoma rzeczami:

* Grupą docelową React byli entuzjaści technologii i eksperci,
* Facebook udostępnia to z czego sam korzysta, nie skupiają się nad stworzeniem uniwersalnego narzędzia dla wszystkich (w tym mniejszych) projektów,
* W sieci możecie znaleźć pełno mylących artykułów, które tylko z nazwy mają coś wspólnego z przewodnikiem po React.

Pisząc ten dokument, zakładam że miałeś okazję zbudować stronę opartą o HTML, CSS i JavaScript.

## Dlaczego powinnieneś posłuchać akurat mnie?

Możecie znaleźć całą masę porad dotyczących React, które często się wykluczają; dlaczego więc powinieneś posłuchać akurat mnie?

Byłem jednym z członków zespołu w Facebook'u, który stworzył i opublicznił React. Nie pracuję już w Facebook'u, ale zajmuję się teraz małym startup'em, dzięki któremu zdobyłem inną perspektywę.

## Jak zacząć w ekosystemie React?

Każde oprogramowanie jest zbudowane z przeróżnych technologii, więc najpierw pownienieś dobrze zrozumieć z czego właściwie jest zbudowana Twoja aplikacja. Z początku cały ekosystem React przytłacza, ponieważ zawsze jest on tłumaczony w złej kolejności.

Poniżej znajdziesz prawidłową kolejność, której powinieneś przestrzegać **bez omijania żadnego punktu czy uczenia się jednocześnie kilku rzeczy na raz**:

* [React](#nauka-samego-react)
* [`npm`](#nauka-npm)
* [JavaScript “bundlers”](#nauka-bundlerow-javascript)
* [ES6](#nauka-es6)
* [Routing](#nauka-routing)
* [Flux](#nauka-flux)

**Nie musisz zapoznawać się ze wszystkimi materiałami, żeby zbudować swoje pierwsze aplikacje w React.** Przejdź do kolejnego kroku tylko jeśli napotkasz na problem, który może być rozwiązany jedynie przez inną technologię.

Dodatkow często spotkasz się z innymi tematami w społeczności React, które są w trakcie rozwoju i są określane terminem "bleeding edge". Tematy te są oczywiście bardzo interesujące, ale zazwyczaj trudne do zrozumienia, są znacznie mniej popularne niż te wymienione powyżej i **nie są wymagane w większości przypadków**.
* [Style Inline](#nauka-stylow-inline)
* [Renderowanie po stronie serwera](#nauka-renderowania-po-stronie-serwera)
* [Immutable.js](#learning-immutablejs)
* [Relay, Falcor, itd.](#nauka-relay-falcor-itp)

## Nauka samego React

Bardzo często spotkasz przekonanie że aby zacząć naukę React musisz spędzić sporo czasu, żeby skonfigurować całe środowisko i zainstalować masę narzędzi. W oficjalnej dokumentacji znajdziesz [kod HTML "kopiuj-wklej"](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm), który wystarczy zachować jako plik `.html`. **Nie potrzebujesz do tego żadnych narzędzi, więc nie instaluj żadnych dodatkowych rzeczy dopóki nie poczujesz się komfortowo z podstawami React.**

Nadal uważam, że najłatwiej nauczyć się React z [oficjalnego samouczka](https://facebook.github.io/react/docs/tutorial.html).

## Nauka `npm`

`npm` jest systemem paczek dla środowiska Node.js za pomocą którego front-end developerzy dzielą się JavaScript'owym kodem. Zawiera on system zwany `CommonJS` i pozwala Ci zainstalować narzędzia napisane w JavaScript za pomocą linii poleceń. Przeczytaj [ten artykuł](http://0fps.net/2013/01/22/commonjs-why-and-how/) aby dowiedzieć się dlaczego `CommonJS` jest potrzebny, lub [CommonJS Wiki](http://wiki.commonjs.org/wiki/Introduction) aby dowiedzieć się więcej o API `CommonJS`.

Komponenty, biblioteki i narzędzia których używa się często w ekosystemie React są zazwyczaj dostępne jako moduły `CommonJS` i instaluje się je za pomocą `npm`.

## Nauka bundler'ów JavaScript

Ze względu na techniczne przeszkody, moduły `CommonJS` (czyli wszystko co znajdziesz w `npm`) nie mogą być użyte natywnie w przeglądarce. Potrzebujesz tzw. "bundler'a", aby "związać" ("połączyć") te moduły w pliki `.js`, które możesz dołączyć do swojej strony za pomocą tagu `<script>`.

Przykłady takich bundler'ów dla JavaScript to `webpack` i `browserify`. Każdy z nich to dobry wybór, ale osobiścię wolę `webpack`, ponieważ oferuje znacznie więcej możliwości, które sprawiają że budowa dużych aplikacji jest znacznie łatwiejsza. Ponieważ jego dokumentacja może być myląca, używam [gotowy template](https://github.com/petehunt/react-webpack-template) i napisałem [poradnik dla webpack'a](https://github.com/petehunt/webpack-howto) dla bardziej zaawansowanych przypadków.

React oferuje też [oficjalne narzędzie odpalane w wierszu poleceń, nazwane "Stwórz aplikację React" ("Create React App")](https://github.com/facebookincubator/create-react-app). Pozwala ono na utworzenie projektu w React, przy wsparciu `webpack`'a, bez koniecznej dodatkowej konfiguracji. Narzędzie może Cię trochę ograniczać, ale na pewno warto od niego zacząć, zwłaszcza że przyszłe aktualizacje na pewno rozszerzą zakres jego funkcji. Oferuje również możliwość skopiowania wszystkich plików konfiguracyjnych i zależności w projekcie, więc tak naprawdę nie tracisz nad nimi kontroli.

Jedna rzecz, o której warto pamiętać: `CommonJS` używa funkcji `require()` do importowania modułów, dlatego dużo osób myli go z projektem nazwanym `require.js`. Z kilku technicznych powodów, zalecam unikanie `require.js`. Nie jest on zbyt popularny w ekosystemie React.

## Nauka ES6

W przykładach kodu napisanego w React, oprócz na JSX, zwróciłeś pewnie uwagę na niektóre nietypowe składnie. Jest to najnowsza wersja JavaScript, o której mogłeś jeszcze nie usłyszeć, zwana ES6. Ponieważ jest to relatywnie nowa technologia, nie jest wspierana przez przeglądarki, ale wspomniane wcześniej bundlery pomogą nam w przetłumaczeniu tego kodu na wcześniejsze standardy JavaScript, dobrze wspierane przez przeglądarki.

Jeśli chcesz się skupić na razie wyłącznie na React, **możesz pominąć naukę ES6**, lub spróbować jej w trakcie, w każdym momencie nauki.

Prawdopodobnie spotkałeś się już z kilkoma wpisami w Internecie, które przekonują do używania klas ES6, jako zalecanej metody tworzenia komponentów w React. To nieprawda. Większość (wliczając również Facebook) używa `React.createClass()`.

## Nauka routingu

Aplikacje webowe zwane "Single-page applications" są obecnie bardzo modne. To takie aplikacje, które ładują się tylko raz, a gdy użytkownik kliknie link lub przycisk, JavaScript aktualizuje pasek adresu, ale strona nie jest odświeżana. Zarządzanie paskiem adresu realizowane jest właśnie przez **router**.

Najpopularniejszym routerem używanym w ekosystemie React jest [react-router](https://github.com/rackt/react-router). Jeśli zamierzasz zbudować "single-page application", użyj go, chyba że masz naprawdę dobry powód żeby wybrać inne rozwiązanie.

**Nie używaj routera, jeśli nie zamierzasz zbudować single-page application**. Większość projektów zaczyna jako mniejsze komponenty, które użyte są w większych aplikacjach.

## Nauka Flux

Na pewno słyszałeś już o Flux. Niestety *cała masa* informacji o Flux, którą możesz przeczytać w Internecie, jest mylna.

Większość ludzi, gdy tylko zaczyna tworzyć aplikację i chcą zdefiniować model danych, są przekonani że muszą użyć do tego Flux. **To nieprawidłowy sposób użycia Flux. Flux powinien być dodany dopiero gdy w projekcie stworzysz już wiele komponentów.**

Komponenty React są ułożone hierachicznie. W większości przypadków, Twój model danych też przestrzega jakiejś hierarchii. W takich przypadkach, Flux nie jest potrzebny. Czasami jednak Twój model danych nie przestrzega specyficznej hierarchii. Jeśli Twoje komponenty React otrzymują parametry (`props`), które wydają się być z nim niezwiązane, lub masz małą ilość komponentów które zaczynają być coraz bardziej skomplikowane, wtedy pewnie powinieneś zacząć używać Flux.

**Sam będziesz dobrze wiedział kiedy potrzebujesz użyć Flux. Jeśli nie jesteś pewien, najprawdopodobniej go wcale nie potrzebujesz.**

Jeśli podjąłeś już decyzję użycia Flux, najpopularniejszą i świetnie udokumentowaną implementacją Flux jest [Redux](http://redux.js.org/). Jest *pełno* alternatyw, będziesz koniecznie chciał wypróbować wiele z nich, ale zalecam Ci skorzystanie z tej najbardziej popularnej biblioteki.

## Nauka stylów inline

Przed erą React, dużo ludzi korzystało ze stylów CSS, budując skomplikowane arkusze stylów, budowane przez preprocesory jak SASS. Odkąd React sprawia, że pisanie komponentów wielokrotnego użytku stało się proste, Twoje arkusze stylów mogą być znacznie mniej skomplikowane. Dużo osób w społeczności React (wliczając również mnie) eksperymentuje, aby w ogóle zrezygnować z używania arkuszy stylów.

Jest to dość szalony pomysł z kilku powodów. Sprawia, że media queries stają się trudniejsze w użyciu, oraz możliwe że są pewne limity wydajnościowe gdy używamy tej metody. **Jeśli dopiero zaczynasz z React, używaj stylów tak jak byś to robił w innych przypadkach.**

Kiedy poczujesz się już pewnie w React, możesz wypróbować innych, alternatywnych technik. Jednym z popularnych jest [BEM](https://en.bem.info/). Polecam Ci zaprzestanie używania preprocesorów CSS, ponieważ React oferuje znacznie bardziej skuteczny sposób ponownego użycia stylów (poprzez ponowne użycie komponentów) a Twój bundler JavaScript potrafi wygenerować znacznie bardziej wydajne arkusze stylów (Mówiłem o tym na [OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). React, tak jak inne biblioteki JavaScript, będzi działał dobrze z preprocesorem CSS.

Alternatywnie, możesz też użyć tzw. ["CSS Modules"](http://glenmaddern.com/articles/css-modules), a dokładniej mówiąc [react-css-modules](https://github.com/gajus/react-css-modules). Nadal będziesz używał CSS (lub SASS/LESS/Stylus) pisząc w "CSS Modules", ale możesz zorganizować i komponować swoje pliki CSS w ten sam sposób jak byś to robił ze stylami inline. Wtedy nie musisz się też przejmować używaniem właściwych nazw klasy korzystając z metodologi BEMA, ponieważ będą one zarządzane poprzez moduły.

## Nauka renderowania po stronie serwera

Renderowanie po stronie serwera jest często nazywane "uniwesalnym" lub "izomorficznym" JS. Oznacza to, że możesz wyświetlać swoje komponenty React jako statyczny HTML na serwerze. To poprawia wydajność na samym początku ładowania strony, bo użytkownik nie musi czekać na załadowanie JS, aby wyświetlić interfejs strony. React potrafi wykorzystać HTML wygenerowany na serwerze, tak, aby nie było potrzeby tworzyć go ponownie po stronie klienta.

Potrzebujesz renderowania na serwerze, jeśli zauważysz, że czas na wyświetlenie Twojej strony na początku jest zbyt długi oraz jeśli chcesz poprawić swoją pozycję w wyszukiwarkach. Pomimo tego, że Google potrafi już indeksować HTML wygenerowany przez klienta – w styczniu 2016 zbadano, że to nadal negatywnie wpływa na pozycję strony (prawdopodobnie w związku z gorszą wydajnością stron generowanych po stronie klienta).

Renderowanie na serwerze ciągle wymaga wiele narzędzi do poprawnego działania. W związku z tym, że zapewnia ono wsparcie komponentów React napisanych w tradycyjnym stylu, nadal lepiej napisać aplikację w pierwszej kolejności, a dopiero później martwić się o renderowanie na serwerze. Nie będzie potrzeby przepisywać wszystkich komponentów, aby renderować aplikację na serwerze.

## Nauka Immutable.js

[Immutable.js](https://facebook.github.io/immutable-js/) zapewnia zbiór struktur danych, które pomagają w rozwiązaniu pewnych problemów z wydajnością podczas budowania aplikacji w React'cie. To świetna biblioteka i prawdopodobnie będziesz dużo z niej korzystać w swoich aplikacjach w przyszłości – jednak jest kompletnie niepotrzebna dopóki nie zrozumiesz kwestii związanych z wydajnością Twojej aplikacji.

## Nauka Relay, Falcor itp.

Te narzędzia pomogą ograniczyć ilość zapytań AJAX. Są nadal bardzo świeże, więc jeśli nie masz problemu ze zbyt dużą ilością zapytań, nie potrzebujesz Relay ani Falcor.

================================================
FILE: README-pt-Br.md
================================================
# react-howto

Se React é novo para você (ou frontend no geral) você pode achar o ambiente um pouco confuso. Aqui está algumas razões para isso.

* React vem sendo historicamente alvo de recém chegados e especialistas.
* O Facebook deixa open-source somente o que realmente utiliza, então não foca em desenvolver ferramentas para projetos menores que o Facebook em si.
* Há muitos marketing mascarados ruins como guias do React.

Ao decorrer deste documento, Eu irei assumir que você já criou uma página web com HTML, CSS e JavaScript.

## Por que você deveria me ouvir?

Há toneladas de conselhos conflitantes sobre o React por aí. Por que me ouvir?

Eu fui um dos membros do time original do Facebook que construiu e disponibilizou o React como open-source. Eu não estou mais no Facebook e agora estou em uma pequena startup, logo eu tenho uma perspectiva diferente do Facebook.

## Como lidar com o ecossistema React?

Todo software é construido em uma stack de tecnologias, e você precisa entender o suficiente dessa stack para construir seu app. A razão que o ecossistema de ferramentas do React parece esmagadora é porque é sempre explicada na ordem errada. 

Você deveria aprender, nessa ordem, **sem pular etapas ou estudar ao mesmo tempo**: 

* [React em sí](#learning-react-itself)
* [`npm`](#learning-npm)
* [JavaScript “bundlers”](#learning-javascript-bundlers)
* [ES6](#learning-es6)
* [Routing](#learning-routing)
* [Flux](#learning-flux)

**Você não precisa aprender tudo isso para ser produtivo com React**
Apenas vá para o próximo passo se você tiver algum problema que precisa ser resolvido.

Adicionalmente, têm alguns tópicos que são frequentemente mencionados na comunidade do React que são "Era sangrenta". Os tópicos abaixo são interessantes, mas eles são difíceis de entender, e são, de longe, menos populares que os tópicos acima e **não são requeridos para a maioria dos apps**.
* [Inline styles](#learning-inline-styles)
* [Server rendering](#learning-server-rendering)
* [Immutable.js](#learning-immutablejs)
* [Relay, Falcor, etc](#learning-relay-falcor-etc)

## Aprendendo React em sí

É um equívoco comum você precisar desperdiçar muito tempo na configuração de ferramentas para começar a aprender React. Na documentação oficial você encontrará um [copiar-colar template HTML](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) que você pode salvar em um arquivo `.html` e começar logo em seguida. **Nenhuma configuração de ferramenta é necessária para esse passo, e não comece a estudar mais ferramentas até você estar confortável com o básico do React.**

Eu ainda acho que a forma mais fácil para aprender React é o [tutorial oficial](https://facebook.github.io/react/docs/tutorial.html).


## Aprendendo `npm`

`npm` é o gerenciador de pacote Node.js(**N**ode.js **P**ackage **M**anager) e é a forma mais popular que engenheiros, designers e desenvolvedores front-end compartilhar código JavaScript. Isso inclui um sistema modular chamado `CommonJS` e permite você instalar ferramentas na linha de comando escritas em JavaScript. Leia [esse post](http://0fps.net/2013/01/22/commonjs-why-and-how/) para entender por que `CommonJS` é necessário para navegadores (browsers), ou o [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) para mais informações da API do `CommonJS`.

A Maioria dos componentes reutilizáveis, bibliotecas e ferramentas do ecossistema do React estão dispiníveis como módulos `CommonJS` e são instalados com `npm`.

## Aprendendo JavaScript bundlers (empacotadores)

Para um bom número de boas razões técnicas, módulos `CommonJS` (ex: tudo no `npm`) não pode ser usado nativamente no browser. Você precisa de um "empacotador" JavaScript para "empacotar" esses módulos dentro de arquivos `.js` que você pode incluir na sua página web com a tag `<script>`

Exemplos de empacotadores JavaScript são `webpack` e `browserify`. Ambos são boas escolhas, mas eu prefiro `webpack` pois possue funcionalidades que fazem o desenvolvimento muito mais fácil. Mesmo a documentação sendo confusa, eu tenho um [plug-and-play template para começar](https://github.com/petehunt/react-webpack-template) e eu escrevi um guia webpack [como-fazer](https://github.com/petehunt/webpack-howto) para casos mais complexos.

Uma coisa para manter em mente: `CommonJS`usa a função `require()` para importar módulos, então muitas pessoas ficam confusas e pensam que tem algo haver com o projeto chamado `require.js`. Para um bom número de razões tecnicas, eu gostaria de sugerir que você evitasse `require.js`. Ele também não é muito popular no ecossistema do React.


## Aprendendo ES6

Além do JSX (o qual você aprendeu no tutorial do React), você pode achar alguns exemplos engraçados no React. Isso é conhecido como ES6, que é a última versão do JavaScript que talvez você ainda não tenha aprendido. Já que é tão novo, não é suportado nos browsers ainda, mas o seu empacotador (bundler) pode traduzir pra você com a configuração adequada.

Se você quer apenas fazer as coisas acontecerem no React, **você pode pular o aprendizado de ES6**, ou tentar entender no caminho.

Talvez você tenha ouvido que classes ES6 são preferidas para criar componentes React. Isso não é verdade. A maioria das pessoas (incluindo o Facebook) estão usando `React.createClass()`.

## Aprendendo routing (fazer rotas)

“Single-page applications” (Aplicações de uma única página) são os objetivos nos dias de hoje. São páginas web que carregam apenas uma vez, e quando o usuário clica em um link ou em um botão, o JavaScript compila a página e atualiza a barra de endereço, mas a página web não é atualizada. O gerenciamento da barra de endereço é feito por algo chamado **router** (roteador).

O roteador mais popular no ecosistema do React é [react-router](https://github.com/rackt/react-router). Se você está construindo uma single-page application, utilize isso a não ser que você tenha uma boa razão para não fazer.

**Não utilize o roteador se você não estiver construindo uma single-page application**. A maioria dos projetos começam com componentes pequenos dentro de uma grande aplicação de qualquer forma.

## Aprendendo Flux

Você provavelmente já ouviu falar sobre "head" do Flux. Tem uma *tonelada* de mal entendidos sobre Flux por aí.

Muita gente começa a construir um app e gostaria de definir seu próprio modelo de dados, e pensam que precisam usar Flux para fazer isso. **Assim é uma forma errada de adotar o Flux. O Flux só deveria ser adicionado quando muitos componentes já foram cosntruídos.**

Os componentes React são arranjados em hierarquia. A maioria das vezes, seu modelo de dados também segue uma hierarquia. Nessa situação o Flux te adiciona muita coisa. As vezes não há hierarquia no seu modelo de dados. Quando seus componentes React começam a receber `props` (propriedades) que parecem estranhas, ou você possue um pequeno número de componentes começando a ficar muito complexo, talvez você queira dar uma olhada no Flux.

**Você saberá quando precisará do Flux. Se você não está certo se precisa disso, você realmente não precisa disso.**

Se você decidiu usar Flux, a biblioteca mais popular e melhor documentada é [Redux](http://redux.js.org/). Há *muitas* outras alternativas por aí, e você ficará tentado a avalizar a maioria deles, mas meu conselho é para você ficar apenas no mais popular.

## Aprendendo inline styles 

Antes do React, muita gente reutiliza estilos de CSS com complicados processadores de style sheets (folhas de estilo) como SASS. Como React faz escritas de componentes reutilizáveis facilmente, sua folha de estilo pode ser menos complicada. A maioria da comunidade (me incluindo) estão esperimentando se livrar de folhas de estilos altogether (tudo em uma só).

Essa é uma idéia bastante louca por bom número de razões. Faz com que media queries fiquem mais difíceis, e é possível que tenha uma limitação ao usar essa técnica. **Quando começando com React, apenas coloque estilho nas coisas como você geralmente faria.**

Uma vez que você já tem idéia de como React funciona, você pode olhar por técnicas alternativas. Uma bem popular é  [BEM](https://en.bem.info/). Eu recomendo você descartar seu pré-processador de CSS, já que React disponibiliza uma forma mais poderosa de reusar styles (reutilizando componentes), e o seu empacotador JavaScript pode gerar folhas de estilo mais eficientes pra você (Eu te dou [um exemplo sobre isso no OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Dito isso, React, como toda biblioteca JavaScript, funcionará bem com um pré-processador CSS.

Alternativamente, você também pode usar [Módulos CSS](http://glenmaddern.com/articles/css-modules), mais especificamente [react-css-modules](https://github.com/gajus/react-css-modules). Com módulos CSS você ainda escreverá CSS (ou SASS/LESS/Stylus), mas você pode gereciar e fazer seus arquivos CSS como você faria inline styles no React. E você não precisará se preocupar em gerenciar o nom de de classes usando metodologias como BEM, pois isso será cuidado sob os panos quando utilizado o sistema de módulos.


## Aprendendo server rendering (renderização de servidor)

Renderização de servidor é geralmente chamado de "universal" ou "isomorphic" JS. Isso quer dizer que você pode pegar seus componentes React e renderizá-los em um HTML estático no servidor. Isso melhora a performance inicial porque o usuário não precisa esperar pelo JS para fazer o download para visualizar a interface inicial, e o React pode reutilizar o HTML renderizado no servidor, logo não é necessário gerar isso no lado do cliente. 

Você apenas precisa renderizar no servidor se você perceber que a renderização inicial está muito lenta ou se você voque quer melhorar o sistema de ranking de busca. Enquando for verdade que o Google agora indexa conteúdo renderizado no cliente, a partir de janeiro de 2016 todo tempo é mensurado e o ranking sofre um efeito negativamente, potencialemnte por causa da penalidade na renderização do lado do cliente.

Renderização no lado do servidor ainda requer uma grande quantidade de ferramentas para fazer corretamente. Já que transparentemente suporta componentes React escritos sem foco na renderização no lado do servidor, você deveria primeiramente construir seu app e se preocupar com a renderização do lado do servidor mais tarde. Você não precisa reescrever todos os seus componentes para suportar isso.

## Aprendendo Immutable.js

[Immutable.js](https://facebook.github.io/immutable-js/) disponibiliza uma série de estrutura de dados que podem ajudar a resolver certos problemas de performance na construção de apps em React. É uma excelente biblioteca, e você provavelmente irá usar muito no avanço dos seus apps, mas é completamente desnecessário até que você tenha uma apreciação em implementações performáticas.

## Aprendendo Relay, Falcor etc

São tecnologias que ajudam você a reduzir o número de requisições AJAX. São tecnologias de ponta, então se você não tiver problemas com muitas requisições AJAX, não há necessidade de Relay ou Falcor.


================================================
FILE: README-pt.md
================================================
# react-howto

Se te estás a iniciar agora com React (ou frontend no geral) talvez aches o ecossistema confuso. E tens alguma razão.

* React foi criado, historicamente, para iniciantes mas também para profissionais
* O Facebook apenas coloca em open-source aquilo que eles usam, para que não se foquem em ferramentas para usar com projetos mais pequenos que o próprio Facebook
* Existe muita publicidade enganosa mascarada de Guias para React

Ao longo deste documento, vou assumir que já construiste uma página usando HTML, CSS e JavaScript.

## Porque é que me deves ouvir?

Existe uma tonelada de conselhos conflituosos sobre React por aí; porque me ouvir?

Eu fiz parte da equipa original do Facebook que criou React como open-source. Já não estou no Facebook. Agora estou numa pequena startup por isso acrescento ainda uma prespetiva de alguém de fora do facebook.

## Como lidar com o ecossistema de Rect

Todo o software é criado usando uma stack de Tecnologia e por isso, precisas de conhecer o suficiente dessa stack para desenvolveres a tua aplicação. A razão pela qual o ecossistema de React é tão confuso deve-se ao facto de ser explicado pela ordem errada.

Tu deves aprender por esta ordem, **sem passar nada a frente nem aprender as coisas paralelamente**:
* [o próprio React](#aprendendo-react)
* [`npm`](#aprendendo-npm)
* [JavaScript “bundlers”](#aprendendo-javascript-bundlers)
* [ES6](#aprendendo-es6)
* [Routing](#aprendendo-routing)
* [Flux](#aprendendo-flux)

**Não precisas de aprender tudo isto para seres produtivo com React.** Passa apenas para o próximo passo se tiveres algum problema que precisas que seja resolvido.

Adicionalmente, existem alguns tópicos mencionados pela comunidade de React que são "bleeding edge". Os tópicos a baixo são interessantes, mas são dificeis de entender e muito menos populares do que os de cima e **não são obrigatórios para a maioria das aplicações**.
* [Inline styles](#aprendendo-inline-styles)
* [Server rendering](#aprendendo-server-rendering)
* [Immutable.js](#aprendendo-immutablejs)
* [Relay, Falcor, etc](#aprendendo-relay-falcor-etc)

## Aprendendo React

É um equívoco comum que tu precisas de perder muito tempo a configurar o teu ambiente de ferramentas para começares a aprender Reagir. Na documentação oficial, encontrarás um [template HTML copy-paste] (https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) que podes guardar num ficheiro com extensão '.html' e começar imediatamente. ** Nenhuma ferramenta é necessária para esta etapa, e não começes a aprender outra ferramental adicional até que te sintas confortável com o básico de React. **

Eu continuo a achar que a maneira mais fácil de aprender React é [a documentação oficial](https://facebook.github.io/react/docs/tutorial.html).

## Aprendendo `npm`

`npm` é um gerenciador de pacotes (packages manager) de Node.js e é a maneira mais popular com que os engenheiros e designers de Front-end partilham código Javascript. Incui um módulo chamado 'CommonJS' e deixa-te instalar ferramentas de linha de comandos escritas em Javascript. Lê [este post](http://0fps.net/2013/01/22/commonjs-why-and-how/) para saberes mais sobre o porquê de 'CommonJS' é necessário para os browsers, ou [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) para saberes mais sobre a API de 'CommonJS'.

A maioria dos componentes reutilizáveis, librarias e ferramentas sobre o ecossistema React estão disponíveis como módulos 'CommonJS' e são instaçados com 'npm'.

## Aprendendo JavaScript bundlers

Para uma série de boas razões técnicas, os módulos de 'CommonJS' (ex. tudo em 'npm') não pode ser usado nativamente no browser. Tu precisas de um "bundler" de JavaScript para "juntar" esses módulos em ficheiros com extensão '.js' que podes incluir na tua página web com uma tag '<script>'.

Exemplos de Javascript bundlers incluem 'webpack' e 'browserify'. Ambos são boas opções, mas eu prefiro 'webpack' pois tem muitas mais caracteristicas que fazem com que o desenvolvimento de aplicações grandes seja mais fácil. Como a sua documentação pode ser um pouco confusa, Eu tenho um [template plug-and-play para começares](https://github.com/petehunt/react-webpack-template) com casos de uso mais complexos

Uma coisa para ter em mente: 'CommonJS' usa a função 'require()' para importar módulos, por isso muita gente fica confusa e pensa que tem alguma coisa haver com o projeto chamado 'require.js'. Por diferentes razões técnicas, eu sugiro que evites 'require.js'Também não é muito popular no ecossistema de React.

## Aprendendo ES6

Para além de JSX (que aprendeste no tutorial de React), podes encontrar alguma sintaxe engraçada nos exemplos de React. Chama-se ES6, e é a última versão de Javascript por isso, é provável que ainda não tenhas aprendido. Como é tão recente, ainda não é suportada nos browsers mas o teu bundler pode traduzir por ti configurando-o da melhor maneira.

Se o que realmente queres é apenas saber trabalhar com React, **podes saltar à frente esta secção de ES6**, ou tenta voltar atrás daqui a uns tempos.

Podes já ter ouvido alguma talk sobre as classes ES6 serem uma melhor maneira de criar componentes React. Isto não é verdade. A maioria das pessoas (incluindo no Facebook), usam `React.createClass()`.

## Aprendendo routing

Aplicações do tipo "Single Page" (uma única página) são a moda, hoje em dia. São páginas web que carregam uma vez e, quando o user clica num link ou botão, o Javascript atualiza a barra de endereço, mas a página web não é carregada novamente. A esta gestão da barra de endereços, chamamos **router**.

 O router mais comum do ecossistema de React é [react-router](https://github.com/rackt/react-router). Se estás a criar uma single page, usa-o, a não ser que tenhas um bom motivo para não o fazeres.

 **Não uses um router se não estás a criar uma aplicação single page**. Aliás, a maioria dos projetos começam com componentes pequenos dentro de uma aplicação grande.

## Aprendendo Flux

Provavelmente já ouviste falar de Flux. Existem *toneladas* de má inflormação sobre Flux, por aí fora.

Algumas pessoas sentam-se para criar uma app e querem definir o modelo de dados, e pensam que precisam de Flux para isso. **Essa é a maneira errada de adoptar Flux. Flux só deve ser adicionado quando muitos componentes estão já construidos**.

Componentes React estão arranjados de forma hierárquica. Na maioria das vezes, o teu modelo de dados segue hierarquia também. Nessas situações, Flux não te ajuda assim muito. No entanto, o teu modelo de dados pode não ser hierárquico. Quando os teus componentes React começam a receber `props` que pareçam estranhos, ou tu tens um pequeno numero de componentes a começar a tornarem-se muito complexos, talvez queiras dar uma vista de olhos em Flux.

**Tu vais ter a certeza quando precisares de usar Flux. Se não tens a certeza se precisas, então, não precisas.**

Se decidiste que queres usar Flux, então, a mais popular e bem documentada libraria Flux é [Redux](http://redux.js.org/). Existem *imensas* alternativas por aí fora, e tu vais ficar tentado a avaliar muitas delas, mas o meu concelho é que fiques pela mais popular.

## Aprendendo inline styles

Antes de React, muitas pessoas reutilizavam folhas de estilo CSS complicadas produzidas com pré processadores tipo SASS. Como React faz com que seja fácil escrever componentes reutilizáveis, a tua folha de estilos pode ser menos complicada. Muitas pessoas na comunidade (eu próprio incluido) estão a experimentar livrar-se completamnete das folhas de estilo.

Esta é uma ideia completamente maluca por diversas razões. Faz com que as media querys sejam mais dificeis, e é possivel que existam limitações a nivel de performance com esta técnica. **Quando começas com React, faz o que normalmente fazias com os estilos**.

Assim que saibas como React funciona, podes olhar a algumas tecnicas. Uma muito popular é [BEM](https://en.bem.info/). Eu recomendo eliminar progressivamente o teu pré processador CSS, pois React dá te formas mais poderosas de reutilizar estilos (reutilizando componentes) e o teu Bundler Javascript pode gerar folhas de estilo mais eficientes para ti. )Eu dei uma  [talk sobre isto na OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Com isto dito, React, como qualquer outra libraria Javascript, funciona bem à mesma com pré processadores CSS.

Em alternativa, tu podes usar [Módulos CSS](http://glenmaddern.com/articles/css-modules), mais espoecificamente, [react-css-modules](https://github.com/gajus/react-css-modules). Com módulos CSS, tu podes escrever CSS (ou SASS/LESS/Stylus), mas tu podes geri-los e compor os teus ficheiros CSS como tu farias com estilos inline em React. E não precisas de te preocupar com a gestão dos nomes das classes usando metodologias BEM, pois isso é lidado por ti, pelo módulo de Sistema.

## Aprendendo Server rendering

Server Rendering é usualmente chamado de Javascript "universal" ou "isomórfico". Significa que pode pegar nos teus componentes React e transforma-los em HTML estático no servidor. Isto melhora a performance inicial pois o User não precisa de esperar pelo JS para fazer download para que consiga ver a interface inicial, e o React pode reutilizar o HTML do server-rendering para que não precise de gerar o client-side.

Precisas de Server Rendering se reparares que o render inicial é demasiado lento ou se tu queres melhorar o sistema de ranking de pesquisas (SEO). Enquanto que é verdade que a Google indexa, agora, conteúdo de client-rendered,desde Janeiro de 2016 que, de todas as vezes que foi medido, mostra que afecta o ranking de forma negativa, potencialmente devido à penalização na performance de client-side rendering.

Server rendering necessita ainda, de muitas ferramentas para ser feito da melhor maneira. Desde que ele suporta de forma transparente os componentes React escritos sem server rendering em mente, deves construir a tua app primeiro e só depois preocupar-te com server-rendering. Tu não precisas de re-escrever todos os componentes para suporta-lo.

## Aprendendo Immutable.js

[Immutable.js](https://facebook.github.io/immutable-js/) dá-nos uma série de estruturas de dados que podem ajudar a resolver alguns problemas de performance quando construimos Apps React. É uma óptima libraria, e tu provavelmente vais usa-la em bastantes apps daqui para a frente, mas é completamente desnecessária até que tenhas um bom conhecimento das implicações na performance.

## Aprendendo Relay, Falcor etc

São tecnologias que te podem ajudar a reduzir o número de pedidos AJAX. Estão, ainda, muito na vanguarda por isso, se não tens problemas com muitos AJAX requests, não precisas nem de Relay nem de Falcor.


================================================
FILE: README-ru.md
================================================
# react-howto

Для новичка, экосистема вокруг React (как и фронтэнда в целом) может показаться запутанной. Этому есть несколько причин.

* Изначально, React был нацелен на экспертов и ранних последователей
* Facebook открывает исходный код только тех продуктов, которые использует сам, т. е. не нацеленные на проекты-меньше-чем-Facebook
* Огромное количество гайдов по React совершенно разной сложности

Здесь и далее, я предполагаю, что вы уже знакомы с HTML, CSS и JavaScript.

## Зачем меня слушать?

Существует множество противоречивых советов по React. Зачем слушать меня?

Я работал в команде Facebook, которая разработала и опубликовала React. Теперь я работаю не в Facebook, а в небольшом стартапе, поэтому могу говорить с точки зрения своей текущей позиции, а не Facebook.

## Как подойти к экосистеме React

Все программное обеспечение строится на определенном стеке технологий, и вам нужно понимать этот стек, чтобы создать приложение. Основная причина того, почему экосистема React'а кажется непреодолимой, это потому что она постоянно объясняется в неправильном порядке.

Вы должны учиться в этом порядке, **ничего не пропуская и не изучая две вещи параллельно**:

* [React](#user-content-Изучение-самого-react)
* [`npm`](#user-content-Изучение-npm)
* [JavaScript “bundlers” (сборщики)](#user-content-Изучение-javascript-сборщиков)
* [ES6](#user-content-Изучение-es6)
* [Routing](#user-content-Изучение-роутинга)
* [Flux](#user-content-Изучение-flux)

**Вам не нужно это все, чтобы быть продуктивным с React.** Приступайте к следующему шагу, если у вас есть проблема, которую он решает.

Также, в React-сообществе есть несколько тем, которые являются "супер-современными практиками" ("bleeding edge"). Эти темы интересны, но разбираться в них сложно, они менее популярны, чем темы выше, и **не нужны для разработки большей части приложений**.

* [Инлайновые стили](#user-content-Изучение-инлайновых-стилей)
* [Рендер на стороне сервера](#user-content-Изучение-рендера-на-стороне-сервера)
* [Immutable.js](#user-content-Изучение-immutablejs)
* [Relay, Falcor, и т. д.](#user-content-Изучение-relay-falcor-и-т-п)

## Изучение самого React

Существует заблуждение, что чтобы начать работу с React, нужен огромный инструментарий. Но это не так. В официальной документации вы найдете [copy-paste HTML шаблон](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm), который достаточно сохранить в `.html` файле и сразу же начать работать. **Для этого шага не нужен никакой инструментарий, и не стоит приниматься за него, пока вы не будете чувствовать себя комфортно с основами React.**

Я также считаю, что самый простой способ выучить React, это [официальный туториал](https://facebook.github.io/react/docs/tutorial.html).

## Изучение `npm`

`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.

Большая часть компонентов, библиотек и инструментария в экосистеме React доступны как `CommonJS` модули и устанавливаются с помощью `npm`.

## Изучение JavaScript сборщиков

По определенному количеству технических причин, использование `CommonJS` модулей (то есть всего в `npm`) невозможно нативно в браузере. Вам понадобится JavaScript “bundler” для сборки этих модулей в `.js` файлы, которые затем можно будет включить в страницу тегом `<script>`.

Примерами JavaScript сборщиков являются `webpack` и `browserify`. Они оба являются хорошим выбором, но я предпочитаю `webpack`, так как он имеет определенный набор фич, упрощающих разработку крупных приложений. Так как документация может показаться запутанной, у меня есть [шаблон для быстрого старта](https://github.com/petehunt/react-webpack-template), и я написал [how-to гайд по webpack](https://github.com/petehunt/webpack-howto) для более сложных кейсов.

Стоит запомнить: `CommonJS` использует функцию `require()` для импорта модулей, из-за чего некоторые пользователи начинают думать, что это нечто связанное с библиотекой `require.js`. По определенному количеству технических причин, я советую избегать `require.js`. Этот выбор не популярен в среде React.

## Изучение ES6

Кроме JSX (который вы изучили в туториале React), вы могли заметить несколько забавных синтаксических конструкций в примерах. Это называется ES6, самая последняя версия JavaScript, с которой вы еще можете быть не знакомы. Из-за новизны, ES6 еще не полностью доступен в браузерах, но ваш сборщик может транслировать его в поддерживаемый JavaScript после определенной настройки.

**Вам не обязательно знать ES6 для разработки на React**, вы можете выучить его попутно.

Вы также могли слышать разговоры о том, что ES6-классы являются предпочитаемым способом создания компонентов React. Это не так. Большинство людей (включая Facebook) используют `React.createClass()`.

## Изучение роутинга

“Одностраничные приложения” (Single-page applications или SPA) - современная мода. Это веб-странички которые загружаются один раз, и, когда пользователь кликает по ссылке или кнопке, JavaScript, работающий на странице, обновляет адресную строку и контент, не перезагружая страницу целиком. Управление адресной строкой осуществляется **router** (роутером).

Самый популярный роутер в экосистеме React [react-router](https://github.com/rackt/react-router). Если вы разрабатываете одностраничное приложение, используете его, если только у вас нет хорошей причины не делать этого.

**Не используйте роутер, если вы не создаете single-page application**. Большинство проектов все равно начинают с маленьких компонентов внутри имеющегося большого приложения.

## Изучение Flux

Скорее всего, вы слышали о Flux. Про него имеется *тонна* дезинформации в сети.

Куча людей пытаются определиться с моделью данных и считают, что для этого им обязательно нужно использовать Flux. **Это неправильный путь к внедрению Flux на свой проект. Flux должен быть добавлен только после того, как большинство компонентов уже будут созданы.**

Компоненты React'а собраны в иерархию. В большинстве случаев, ваша модель данных также будет следовать этой иерархии. В этих ситуациях Flux не приносит особого выигрыша. Иногда, тем не менее, ваша модель данных не иерархична. Если ваши React компоненты получают `props`, которые кажутся "внешними", или у вас есть некоторое количество компонентов, которые начинают становиться сильно сложными, возможно вам стоит присмотреться к Flux.

**Вы поймете, когда вам понадобится Flux. Если вы не уверены, что он вам нужен, то он вам не нужен.**

Если вы решили использовать Flux, самой популярной и документированной Flux-библиотекой является [Redux](http://redux.js.org/). Также есть *множество* альтернатив, возможно вы соблазнитесь попробовать их, но мой совет - использовать самую популярную.

## Изучение инлайновых стилей

Пре-React, большинство людей использовали CSS-препроцессоры типа SASS для переиспользования стилей. React делает написание переиспользуемых компонентов простым, также упрощая и написание стилей. Многие из сообщества (включая меня) экспериментируют над тем, чтобы совсем избавиться от CSS.

В силу ряда причин, это относительно безумная идея. Она усложняет написание media queries, и, возможно, есть определенные ограничния по производительности. **Если вы только что начали работать с React, пишите css-стили так как вы привыкли.**

Как только вы почувствуете то, как React работает, обратите внимание на альтернативные техники. Одна из популярных, это [BEM](https://en.bem.info/). Я бы порекомендовал избавляться от CSS-препроцессора, так как React предоставляет более гибкий путь переиспользования стилей (через переиспользование компонентов) и ваш JavaScript-сборщик может генерировать гораздо более эффективные таблицы стилей для вас ([доклад на эту тему на OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Вместе с тем, React, как и любая другая JavaScript библиотека, сможет работать также хорошо с любым CSS-препроцессором.

В качестве альтернативы, вы также можете использовать [CSS Modules](http://glenmaddern.com/articles/css-modules), конкретнее [react-css-modules](https://github.com/gajus/react-css-modules). С CSS модулями, вы все также будете писать CSS (или SASS/LESS/Stylus), но получите возможность управлять и организовывать CSS стили также, как вы бы делали это с inline-стилями в React. Также, вам не прийдется волноваться об именовании ваших классов с помощью таких методологий, как BEM, так как все это будет работать под шапкой системы CSS модулей.

## Изучение рендера на стороне сервера

Серверный рендеринг часто называется "универсальным" или "изоморфным" JS. Это означает что вы можете взять ваши React-компоненты и отрендерить их в статический HTML на сервере. Это ускоряет первоначальную загрузку страницы, так как пользователю не нужно ждать, пока скачается весь JS, чтобы увидеть UI, а React, в свою очередь, может переиспользовать HTML, сгенерированный на сервере, не рендеря ничего на клиенте повторно.

Серверный рендеринг вам понадобится, если вы посчитаете, что первичный рендер страницы слишком медленный, или чтобы улучшить ранжирование в поисковиках. Да, Google индексирует контент, рендеренный на клиенте, но по состоянию на январь 2016 каждое измерение показывало, что это негативно влияет на ранжирование, потенциально из-за производительности рендера.

Также серверный рендеринг требует большого количества инструментария для "правильной" реализации. Так как поддержка React-компонентов написанных без мысли о серверном рендеринге, в целом прозрачна, рекомендуется сначала писать приложение, а потом задумываться о нем. Вам не прийдется переписывать все ваши компоненты в случае решения о переходе.

## Изучение Immutable.js

[Immutable.js](https://facebook.github.io/immutable-js/) предоставляет набор структур данных, которые помогают решать определенные проблемы с производительностью в React-приложениях. Это отличная библиотека, и, скорее всего, вы будете часто использовать ее с ростом вашего приложения, но она абсолютно не является требованием, пока вы не столкнетесь с проблемами производительности.

## Изучение Relay, Falcor и т. п.

Эти технологию помогают уменьшить количество AJAX-запросов. Они все еще являются относительно экспериментальными, так что если у вас нет проблем со слишком большим количеством AJAX запросов, вам не нужны Relay или Falcor.


================================================
FILE: README-tr.md
================================================
# react-howto

React ekosistemini karmaşık bulabilirsiniz. Bunun bir iki sebebi var;

* React geçmişte hep erken adapte olanlara ya da uzmanlara yönelik konumlandırıldı

* Facebook sadece kullandığı kaynak kodlarını açar. Bu nedenle, FB'dan-küçük-projelere destek ve geliştirme sunmaya odaklanmaz

* Etrafta "React öğrenme kılavuzu" adı altında bir çok anti-marketing var

Bu yazıda; HTML, CSS ve JS kullanarak bir web sitesi geliştirilmiş olduğunuzu varsayacağım.

## Neden beni dinleyesiniz?

React'i geliştiren ve kaynağını açan Facebook takımının ilk üyelerinden biriyim.

Ayrıca şu anda ayrı bir *startup*'dayım, o nedenle Facebook'a karşı objektif olabilirim.

## React ekosisteminin içinden çıkmak

Her yazılım, temelindeki bir takım teknolojilerin üzerine inşa edilir. Uygulamanızı daha iyi geliştirebilmek için de bu teknolojilerin oluşturduğu *stack* hakkında yeteri kadar bilgi sahibi olmanız gerekir.

React araçları ekosisteminin bu kadar karmaşık olmasının nedeni,bu teknolojilerin  yanlış sırayla öğrenilmelerinden kaynaklanıyor.

Müfredat aşağıdaki gibi olmalı. **Sırayla ve aynı anda tek bir konu işleyerek.**

* React
* `npm`
* JavaScript *bundler*'lar
* ES6
* Router
* Flux

**React kullanarak iş çıkarabilmek için bu teknolojilerin hepsine hakim olmanız gerekmez.** Bir sonraki konuya, sadece uygulamanızın o alanda çözmesi gereken bir problem olduğunda geçin.

React dünyasında, aşağıdaki teknolojilere rastlayabilirsiniz. Bu konular ilginç, evet, ancak anlaması zor ve yukarıdaki konulara göre daha az önemliler. Ek olarak, **bir çok uygulama bunlara ihtiyaç duymayacaktır**

* kod içinde stil (CSS) verme
* sunucu tarafında işleme
* Immutable.js
* Relay, Falcor, vb.

## React kütüphanesini öğrenmek

React öğrenmeye başlamak için fazla hazırlık yapmanız gerekmiyor. Dökümantasyonda, [copy-paste yaparak](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) bir .html dosyasında çalıştırabileceğiniz bir örnek var.

Bu adım için herhangi bir araç kullanmamız gerekmiyor. Zira, **temel React bilginize güvenmeden geliştirme araçlarını öğrenmeye çalışmayın.**

Ben, React öğrenmenin en kolay yolunun [dökümantasyonu]((https://facebook.github.io/react/docs/tutorial.html) olduğunu düşünüyorum.

## `npm` öğrenmek

Node.js paket yöneticisine `npm` deniyor. JS kodunun dağıtımı için şu anda en popüler araç. `CommonJS` modül sistemini kullanır. Ayrıca JS ile yazılmış komut satırı (*CLI*) uygulamalarını kullanmanızı sağlar.

[Şurada](http://0fps.net/2013/01/22/commonjs-why-and-how/) `CommonJS` modül sistemine tarayıcılarda neden ihtiyaç olduğu hakkında bir yazı var. `CommonJS` API'si hakkında daha fazla bilgi için ise [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction).

React ekosistemindeki kütüphanelerin ve araçların büyük çoğunluğu, `npm` ile erişebileceğiniz `CommonJS` modülleridir.

## Javascript *bundler*'larını öğrenmek

Bir takım teknik nedenden ötürü, `CommonJS` modülleri (yani npm'deki her şey) tarayıcılarda kullanılamıyor. Bu nedenle bir adet JS *bundler*'a ihtiyacımız var. Modülleri tek bir `.js` dosyasında bulunacak şekilde derler. Sonra da `bundle.js` dosyasını `<script>` ile uygulamamıza ekleyebiliriz.

Bu araca iki örnek; browserify ve webpack. İkisi de iyi çözümler ama ben webpack'i tercih ediyorum. Uygulama büyüdüğünde, geliştiricinin hayatını kolaylaştıran ayarlar yapılabiliyor webpack'le.

Dökümantasyonu karışık gelebilir. Başlarkenki konfigürasyonlarınızda kullanabileceğiniz [bir örnek] (https://github.com/petehunt/react-webpack-template) hazırladım. Ayrıca, ileri seviye kullanımlar için de [şurada](https://github.com/petehunt/webpack-howto) bir örnek var.

Artık, resmi olarak desteklenen, [Create React App](https://github.com/facebookincubator/create-react-app) adında bir adında bir CLI aracı da var. *Bundler* olarak webpack kullanarak, hiç bir konfigürasyon yapmadan bir React projesine başlayabilirsiniz.

Aracın bazı limitleri var ama başlangıç için çok iyi bir seçenek. Gelecek versiyonlarında özellikleri artacak. Ayrıca `npm run eject` komutu ile projenizin halihazırdaki konfigürasyonunu kaydeder ve kontrolü size geçirir.

Aklınızda olsun; `CommonJS` modülleri çağırmak için `require()` fonksiyonunu kullanıyor. Bazıları bunu `require.js` projesiyle karıştırıyorlar. İkisi farklı şeyler.

## ES6 öğrenmek

React projelerinde ES6 sentaksı da görebilirsiniz. Yeni olduğu için tarayıcıların hepsinde desteklenmiyor bu sentaks. Ama kullandığımız bundler, doğru konfigüre edildiğinde, bu kodu tarayıcıların anlayabileceği formata çevirebiliyor.

React projelerinde hızlı yol almak için ES6 öğrenimini **erteleyebilirsiniz**. Öğrenme süreci sırasında ES6'ya aşina olursunuz.

ES6 `class`'larının React yazarken tercih edilen usül olduğunu duyabilirsiniz. Doğru değil. Bir çok kişi (FB da dahil) `React.createClass()` kullanıyor.

## Router

Bugünlerde SPA'lar çok popüler. Bunlar, tek sefer tarayıcıya yüklenen ve kullanıcı ile interaksiyon sonucunda tarayıcının adres çubuğunu güncelleyen bir JS kodu kullanan uygulamalar. Ama sayfa değiştiğinde tarayıcı sayfayı yeniden yüklemiyor. Adres çubuğunun koordinasyonu *router* adı verilen parça ile sağlanıyor.

React ekosistemindeki en popüler seçenek [react-router](https://github.com/rackt/react-router). Eğer bir SPA yapıyorsanız, daha iyi sebebiniz olmadığı sürece bunu kullanın.

**Eğer SPA yapmıyorsanız router kullanmayın.** Bir çok proje büyük bir uygulamanın içindeki komponentler halinde başlar zaten.

## Flux öğrenmek

Bazıları, uygulamalarının data modellerini tasarlarken Flux kullanmak zorunda olduklarını düşünüyorlar. **Bu, Flux kullanmaya başlamak için yanlış bir neden. Flux, bir çok komponent hazırlanmış olduktan sonra uygulamaya dahil edilmeli.**


Komponentlerinizin aldığı `props` oraya ait değil gibi geldiğinde ya da koordinasyonları hızla karmaşıklaşmaya başlayan bir komponent öbeğiniz olduğunda, Flux mimarisine bir bakın.

**Ne zaman Flux'a ihtiyacınız olduğunu anlayabileceksiniz. Eğer ihtiyacınız olduğundan emin değilseniz, ihtiyacınız yok.**

Eğer Flux kullanmaya karar verdiyseniz, en popüler olanı [Redux](http://redux.js.org/). *Bir çok* alternatif var. Ancak benim önerim en popüler olan.

## kod içinde stil

React öncesinde, bir çok kişi CSS yönetimini SASS gibi ön-işleyicilerle yapıyordu. Bir projede kullanılan CSS'i *yeniden kullanılabilir* yapmak için CSS üzerinde bir soyutlaştırma gerekir; onu da bir pre-processor kullanarak çözersiniz.

React, yeniden kullanılabilir komponent yapmayı kolaylaştırdığı için stilleri yönetmek de kolaylaşıyor. Topluluktaki bir çok kişi (ben dahil) .css dosyalarını hiç kullanmadan stil vermeyi araştırıyoruz.

Bir çok açıdan ters bir fikir kod içinde stil vermek aslında. Bir kere @media sorgularını zorlaştırıyor. Ayrıca bu tekniği kullanmanın getireceği performans sorunları olması da hayli muhtemel. **React'e başlarken, uygulamaya stili bildiğiniz yöntemle verin.**

React'in nasıl çalıştığına aşina olduktan sonra stil vermek için alternatiflere bakabilirsiniz. Popüler yötemlerden biri [BEM](https://en.bem.info/). Ön-işlemcinizi bir süre sonra devre dışına almanızı öneririm zira React komponentleri yeniden kullanılabilir (birbirinin içine geçebilen) kıldığı için, stilleri de kodun içinde yönetmek kolaylaşıyor. Bundler'ınız size optimize bir CSS çıkarıyor. Bu konuyla ilgili  [OSCON'da bir konuşma](https://www.youtube.com/watch?v=VkTCL6Nqm6Y) yaptım.

Her halükarda, React, diğer her JS kütüphanesi gibi, bir CSS pre-processor olmadan da çalışır.

Bir alternatif de [CSS Modules](http://glenmaddern.com/articles/css-modules), React için olanı da [react-css-modules](https://github.com/gajus/react-css-modules). CSS modules ile, yine CSS (SASS/LESS/Stylus) yazıyor olacaksınız ama .css dosyalarınızı kod içindeki stiller gibi düzenleyebileceksiniz. Bu yöntemde, BEM türü metodolojileri takip etmenize gerek kalmıyor. HTML'de gereken `class` adı modül sistemi sayesinde belirleniyor.

## sunucu tarafında işleme

Bu teknolojiye '*universal* ya da *isomorphic* JS kullanmak' şeklinde rastlayabilirsiniz. Kısacası şu demek oluyor; React komponentlerinizi, sunucuda HTML'e dönüştürerek, kullanıcıya o şekilde iletebilirsiniz. Bu uygulamanın *load* süresini kısaltıyor zira tarayıcın arayüzün şeklini şemalini göstermek için büyük bir JS dosyasının *tamamının* yüklenmesini beklemesi gerekmiyor.

React, *backend*'de (sunucu tarafında) hazırlanmış HTML dizgisini *frontend*'de de kullanabiliyor. Yeniden işlemesine gerek yok.

Backend'de işlemeye, uygulamanızın ilk yüklemesinin yavaşladığını farkettiğinizde ya da SEO gerektiğinde ihtiyacınız olur. Google'ın kullanıcı tarafında hazırlanmış içeriği indeksleyebildiği doğru olsa da, Ocak 2016 itibariyle, yapılan bütün ölçümlerde, bu tür endekslemenin arama sıralamalarını negatif yönde etkilediği görüldü. Bir ihtimal, tarayıcıda içerik yaratmanın performansa etkileri nedeniyle.

Sunucu tarafında işlemeyi doğru yapabilmek için bir çok aracın kullanılması gerekecek. Ancak, bu özellik *backend rendering* özelliği hesaba katılmadan tasarlanmış React komponentleri ile uyumlu olduğu için, önce uygulamanızı hazırlayın, sunucu tarafında işlenmesini sonrasında düşünün. Uygulamanıza bu özelliği getirmek için her şeyi baştan yazmanıza gerek olmayacak.

## Immutable.js öğrenmek

[Immutable.js](https://facebook.github.io/immutable-js/), size React uygulamaları geliştirirken karşınıza çıkabilecek performans sorunlarında yardımcı olacak veri yapıları (data structures) veriyor. Oldukça güzel bir kütüphane ve React projelerindeki kullanımı da kesinlikle artacak. Ancak uygulamanızın performans sorunlarını tam anlamıyla anladıktan sonra bu konuya bakın.

## Relay, Falcor, vb.

Bu teknolojiler, AJAX sorgularınızı azaltmanızı sağlar.  Halen oldukça yeniler. AJAX sorgularınızın yönetimleri zor bir noktaya gelene kadar Relay ya da Falcor'a ihtiyacınız yok.


================================================
FILE: README-uk.md
================================================
# react-howto

Якщо ви новачок у React (чи у фронтенді в цілому) екосистема може здатися вам заплутаною. І цьому є кілька причин.

* Історично React був орієнтований на ентузіастів та експертів
* Facebook віддає у опенсорс тільки те, що сам використовує, і таким чином не приділяє уваги інструментам для проектів за розмірами менше, ніж у Facebook
* Чимало поганенького маркетингу, замаскованого під путівники по React

У цьому документі я вважатиму, що ви створювали веб-сторінку, використовуючи HTML, CSS та JavaScript.

## Чому вам варто дослухатися до мене?

Навколо купа порад щодо React, що суперечать одна одній. Навіщо слухати мене?

Я працював у команді Facebook, що створила та опублікувала React. Я залишив Facebook, зараз працюю у невеликому стартапі, тож маю змогу порівняти.

## Як впоратися з екосистемою React

Все програмне забезпечення створюється із набору технологій, так що вам потрібно розуміти достатню частину цього набору, щоб створити власний застосунок. Набір інструментів для React здається незрозумілим, бо пояснюється у неправильному порядку.

Вивчайте в такому порядку, **не забігаючи наперед і не поєднуючи пункти**:

* [React](#user-content-Вивчення-самого-react)
* [`npm`](#user-content-Вивчення-npm)
* [JavaScript “bundlers” (пакувальники)](#user-content-Вивчення-javascript-пакувальників)
* [ES6](#user-content-Вивчення-es6)
* [Routing](#user-content-Вивчення-роутингу)
* [Flux](#user-content-Вивчення-flux)

**Вам не потрібно все це вивчити, щоб продуктивно використовувати React.** Переходьте до наступного пункту, тільки якщо в цьому виникає потреба.

Також у React-суспільстві часто обговорюють всілякі новинки. Нижче подано список цікавих, але важких у розумінні, новинок, значно менш популярних, ніж інструменти, зазначені у попередньому списку, **без яких можна обійтись при створенні більшості застосунків**.

* [Вбудовані стилі](#user-content-Вивчення-вбудованих-стилів)
* [Рендер на боці сервера](#user-content-Вивчення-рендера-на-боці-сервера)
* [Immutable.js](#user-content-Вивчення-immutablejs)
* [Relay, Falcor, та ін.](#user-content-Вивчення-relay-falcor-та-ін)

## Вивчення самого React

Це поширена помилка, що вам необхідно витратити багато часу на налагодження інструментів, щоб почати вивчати React. В офіціальній документації ви знайдете ["скопіюй-і-встав" HTML-шаблон](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm), який ви можете зберегти у `.html` файл і почати працювати з ним. **На цьому етапі не потрібно ніяких інструментів і не починайте їх вивчати, поки не освоїтесь із основами React.**

Я й досі впевнений, що найлегший шлях до вивчення React - це [офіціальний посібник](https://facebook.github.io/react/docs/tutorial.html).

## Вивчення `npm`

`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.

Більшість багаторазових компонентів, бібліотек та інструментів у екосистемі React доступні, як `CommonJS` модулі і встановлюються з допомогою `npm`.

## Вивчення JavaScript пакувальників

`CommonJS` модулі (тобто все з `npm`) не можуть бути безпосередньо використані у браузері через ряд хороших причин технічного характеру. Вам потрібен JavaScript-пакувальник, щоб "спакувати" ці модулі в `.js` файли, які можна включити до веб-сторінки з допомогою `<script>` тегу.

Для прикладу, такими JavaScript-пакувальниками є `webpack` та `browserify`. Не прогадаєте, вибравши будь-який з них, але я надаю перевагу `webpack`, в який закладено купу можливостей, що полегшують розробку великих застосунків. Оскільки його документація може спантеличити, я створив [готовий до використання шаблон](https://github.com/petehunt/react-webpack-template) і написав [путівник по webpack](https://github.com/petehunt/webpack-howto) для складніших випадків використання.

Варто пам'ятати, що `CommonJS` використовує функцію `require()` для імпорту модулів, через що багато людей помилково вважає, що він якось пов'язаний із проектом `require.js`. Я б не рекомендував `require.js`, зважаючи на ряд технічних причин. Він не такий вже й популярний у екосистемі React.

## Вивчення ES6

Окрім JSX (який ви вивчили з посібника по React), у прикладах з React вам могли трапитися чудернацькі синтаксичні конструкції. Їх називають ES6. Це найновіша версія JavaScript, яку ви можливо ще не вивчили. Оскільки вона така нова, браузери поки що не підтримують її, але правильно сконфігурований пакувальник може транслювати такий код у зрозумілий браузерам.

Для використання React **вивчення ES6 не обов'язкове і його можна відкласти на потім**, або спробувати освоїти між іншим.

Можливо ви чули, що React-компоненти переважно створюють, використовуючи ES6 класи. Це неправда. Більшість людей (у Facebook також) використовують `React.createClass()`.

## Вивчення роутингу

Зараз у моді "односторінкові застосунки". Такі веб-сторінки завантажуються один раз, а коли користувач клацає посилання чи кнопку, JavaScript, запущений на сторінці, оновлює адресний рядок, повністю не оновлюючи сторінку. За зміни у адресному рядку відповідає **роутер**.

Найпопулярніший роутер у екосистемі React - [react-router](https://github.com/rackt/react-router). Якщо ви створюєте односторінкові застосунки, використовуйте саме його, якщо немає вагомих причин не робити цього.

**Не використовуйте роутер, якщо ви не створюєте односторінкові застосунки**. В будь-якому випадку, більшість проектів все одно починається з невеличких компонентів усередині існуючого великого застосунку.

## Вивчення Flux

Можливо ви чули про Flux. Навколо *сила силенна* дезінформації про нього.

Величезна кількість людей, сідаючи розробляти застосунок, бажають описати модель данних і думають, що Flux саме те, що їм потрібно. **Це неправильний підхід до вибору Flux. Додавайте його тільки тоді, коли вже написано багато компонентів.**

React-компоненти організовані в ієрархію. У більшості випадків ваша модель теж так організована. В такому разі від Flux небагато користі. Бувають випадки, коли ваша модель організована інакше. Вам варто глянути в бік Flux, коли ваші React-компоненти починають отримувати явно сторонні властивості (`props`) чи невелика кількість компонентів перетворюється у щось дуже складне.

**Ви зрозумієте, коли вам знадобиться Flux. Якщо ви не впевнені, чи потрібен він вам, то скоріше за все непотрібен.**

Якщо ви вирішили використовувати Flux, [Redux](http://redux.js.org/) - найпопулярніша Flux бібліотека з хорошою документацією. Навколо *неймовірна кількість* інших варіантів і багато з них ви забажаєте спробувати, але я раджу вам користуватися найпопулярнішою бібліотекою.

## Вивчення вбудованих стилів

До появи React багато людей повторно використовували CSS-стилі зі складними таблицями стилів, створеними препроцесорами на кшталт SASS. Оскільки React спростив написання багаторазових компонентів, ваші стилі можуть бути не такими складними. Багато хто з суспільства (я також) пробують взагалі відмовитися від стилів.

Це досить безумна ідея з ряду причин. Ускладнюються медіа-запити (media queries) і цілком можливо, що використання цієї техніки обмежується швидкодією. **Беручись за React, використовуйте стилі, як звикли.**

Ознайомившись з тим, як працює React, можете спробувати інші техніки. Одна з популярних - [БЕМ](https://uk.bem.info/). Я рекомендую потрохи відмовлятися від CSS препроцесора, адже React пропонує повторно використовувати стилі у більш гнучкий спосіб (через повторне використання компонентів) і ваш JavaScript пакувальник зможе згенерувати для вас ефективніші таблиці стилів (я розповідав [про це на OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). З урахуванням сказаного, React, як і будь-яка інша JavaScript-бібліотека, буде достатньо хорошо працювати у поєднанні з CSS препроцесором.

Як варіант, можете спробувати [CSS Modules](http://glenmaddern.com/articles/css-modules), точніше кажучи [react-css-modules](https://github.com/gajus/react-css-modules). Із CSS Modules ви, як і раніше, будете писати CSS (або SASS/LESS/Stylus), але ви  зможете організувати CSS файли так, ніби це вбудовані стилі в React. Вам ні до чого перейматись іменуванням класів, як у БЕМ, - це зробить за вас система модулів.

## Вивчення рендера на боці сервера

Рендер на боці сервера часто називають "універсальним" чи "ізоморфним" JS. Це значить, що ви можете взяти ваші React-компоненти і відрендерити їх у статичний HTML на боці сервера. Це позитивно вплине на сприйняття швидкодії сайту при завантаженні, оскільки користувачу не доведеться чекати завантаження JS, щоб побачити початковий UI, а React може використати вже відрендерений на боці сервера HTML і не генерувати його на боці кліента.

Вам потрібно рендерити на сервері, якщо ви помітили, що початковий рендер надто повільний чи ви хочете покращити ранжування сайту пошуковою системою. Хоч це і правда, що Google індексує вміст, відрендерений на клієнті, станом на січень 2016 року усі виміри показали негативний вплив такого рендерингу на ранжування, можливо через його повільність.

Для того щоб правильно організувати рендер на боці сервера також потрібно чимало інструментарію. Так як React-компоненти, написані без гадки про серверний рендеринг, підтримуються в цілому прозоро, рекомендується спочатку написати застосунок, а потім приділити увагу рендеру на боці сервера. Вам не доведеться переписувати всі ваші компоненти, якщо ви вирішите рендерити їх на сервері.

## Вивчення Immutable.js

[Immutable.js](https://facebook.github.io/immutable-js/) надає набір структур данних, з допомогою яких можна вирішити певні проблеми швидкодії застосунку, розробленого з використанням React. Це відмінна бібліотека і ви скоріше за все будете застосовувати її не раз по мірі розростання ваших застосунків, але вона зовсім непотрібна, поки заміри швидкодії не переконають вас у протилежному.

## Вивчення Relay, Falcor та ін.

З допомогою цих технологій ви скоротите кількість AJAX запитів. Вони все ще незрілі, так що за відсутності проблеми із кількістю AJAX запитів, Relay чи Falcor вам не потрібні.


================================================
FILE: README-vi.md
================================================
# react-howto

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 đó.

* 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
* 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.
* Có quá nhiều marketing ảo giả tạo dưới dạng các hướng dẫn về React.

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.

## Tại sao bạn nên nghe theo tôi?

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ỉ?

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.

## Làm thế nào để tương tác với hệ sinh thái của React

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ự.

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**:

* [Thư viện React](#tìm-hiểu-về-react)
* [`npm`](#tìm-hiểu-về-npm)
* [JavaScript “bundlers”](#tìm-hiểu-về-các-công-cụ-đóng-gói-javascript)
* [ES6](#tìm-hiểu-về-es6)
* [Routing](#tìm-hiểu-về-routing)
* [Flux](#tìm-hiểu-về-flux)

**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.

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**.

* [Inline styles](#tìm-hiểu-về-inline-styles)
* [Server rendering](#tìm-hiểu-về-server-rendering)
* [Immutable.js](#tìm-hiểu-về-immutablejs)
* [Relay, Falcor, etc](#tìm-hiểu-về-relay-falcor-etc)

## Tìm hiểu về React

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.**

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).

## Tìm hiểu về `npm`

`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.

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`.

## Tìm hiểu về các công cụ đóng gói Javascript

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>`.

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.

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.

## Tìm hiểu về ES6

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.

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.

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()`.

## Tìm hiểu về routing

"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ởi **router**.

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.

**Đừ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.

## Tìm hiểu về Flux

Chắc hẳn bạn đã từng nghe về Flux. Có **quá nhiều** thông tin không đúng về Flux.

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.**

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.

**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.**

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.

## Tìm hiểu về inline styles

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 components 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 đó.

Đâ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**.

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.

## Tìm hiểu về server rendering

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.

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.

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ó.

## Tìm hiểu về Immutable.js

[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á.

## Tìm hiểu về Relay, Falcor etc

Đâ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.


================================================
FILE: README-zh.md
================================================
# 如何学习React

如果你是一个 React (或者前端) 新手, 出于以下的原因, 你可能会对这个生态圈感到困惑:

* React 的目标群体历来是喜欢尝试新事物的开发者和前端专家.
* Facebook 开源的内容是应用在他们的实际应用中, 因此他们没有关注那些比 Facebook 小的工程需求.
* 现有的 React 指引水平参差不齐.

在本文中, 我会假设你已有使用 HTML, CSS 和 JavaScript 开发网页的基础.

## 为什么要听我的?

关于 React, 现在已经有大量的相互冲突的建议了, 为什么要听我的?

因为我是在 Facebook 构建并开源 React 的最初成员之一. 现在我离开了 Facebook 并加入了一家初创公司, 所以我也不会站在 Facebook 的立场上来表态.

## 如何踏入 React 生态圈

所有的软件都是建立在某个技术栈之上的, 你需要对整个技术栈有足够深入的理解, 才能建造你的应用. 为什么 React 生态圈的工具似乎总让人感觉压力山大呢, 因为它总是以错误的顺序被解释:

你应该按照以下的顺序进行学习, **而不是跳着学或者同时学习**:

* [React](#user-content-学习-react-本身)
* [`npm`](#user-content-学习-npm)
* [JavaScript “打包工具”](#user-content-学习-javascript-打包工具)
* [ES6](#user-content-学习-es6)
* [Routing](#user-content-学习路由-routing)
* [Flux](#user-content-学习-flux)


**你不需要把这些都学完才去使用 React.** 只需要在你遇到问题需要解决的时候, 才进入下一步的学习.

另外, 在 React 社区中, 有一些前沿主题是经常被提及到的, 以下的这些主题很有意思, 但也很难弄懂, 所以它们远没有上面的主题流行, **大多数应用也不需要用到这些.**

* [内联样式](#user-content-学习内联样式)
* [服务器端渲染](#user-content-学习服务器端渲染)
* [Immutable.js](#user-content-学习-immutablejs)
* [Relay, Falcor 等](#user-content-学习-relay-falcor-等)

## 学习 React 本身

有一种常见的误解是: 你需要花费大量时间在配置工具上, 然后才开始学习 React. 在官方文档里, 你可以找到 [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm). 只需要保存为 `.html` 文件, 你就可以马上开始学习了. **这个步骤不需要任何工具, 你也无需额外学习工具使用, 直到你能熟练掌握 React 基础.**

我依然觉得, 学习 React 最简单的方法是通过官方教程 [the official tutorial](https://facebook.github.io/react/docs/tutorial.html).

## 学习 `npm`

`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 的更多内容

在 React 生态圈中, 大部分可重用的组件、库和工具遵循 `CommonJS` 模块规范, 可通过 `npm` 来安装.

## 学习 JavaScript 打包工具

出于若干技术原因, `CommonJS` 模块 (也就是 `npm` 里的所有内容) 不能直接用到浏览器. 你需要一个 JavaScript “打包工具(bundler)” 来把这些模块打包成 `.js` 文件, 使你可以在网页中通过 `<script>` 标签引入它们.

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).

要记住的一点: `CommonJS` 使用了 `require()` 函数来引入模块, 因此许多人对此感到疑惑, 并认为需要导入 `require.js` 到工程里. 出于若干技术原因, 我建议你避免使用 `require.js`. 它在 React 生态圈并不流行.

## 学习 ES6

在 JSX (你会在 React tutorial 中学习到) 以外, 你可能会注意到 React 例子中一些有趣的语法. 这被称为 ECMAScript6, 是 JavaScript 的最新版本. 由于 ES6 很新, 你可能还没学习到, 浏览器也可能尚未兼容, 但别担心, 通过合适的配置, 你的打包工具会为你自动转换成兼容代码.

如果你只想要使用 React 来把事情做完, **你可以跳过 ES6 的学习,** 或者留到以后再学习.

你可能会看到一些讨论说更适合用 ES6 的 class 来创建 React 组件. 这并不是真的, 大多数人 (包括 Facebook) 用的还是 `React.createClass()`.

## 学习路由 (routing)

“单页面应用” 是时下的技术热点. 当网页加载完成, 用户点击链接或者按钮的时候, JavaScript 会更新页面和改变地址栏, 但网页不会刷新. 地址栏的管理就是通过 **路由(router)** 来完成的.

目前 React 生态圈最受欢迎的路由解决方案是 [react-router](https://github.com/rackt/react-router). 如果你正在创建一个单页面应用, 有什么理由不去使用它呢?

**如果你创建的并非单页面应用, 请不要使用路由.** 无论如何, 大部分项目都是从大型应用中的小组件开始的.

## 学习内联样式

在 React 出现之前, 很多人通过像 SASS 这样的预处理器来重用复杂的 CSS 样式表. 鉴于 React 使开发可重用组件变得容易, 你的样式表可以变得没那么复杂了. 社区中许多人 (包括我) 正尝试完全抛弃样式表.

由于一些原因, 其实这是个相当疯狂的主意. 这让媒体查询 (media quries) 更加困难了, 而且这种技术可能有性能上的局限性. **当你开始用 React 的时候, 只要用你平常使用的方法去写就好了.**

一旦你找到了用 React 开发的感觉, 你就可以关注那些可作为替代的技术了. 其中一种流行技术是 [BEM](https://en.bem.info/). 我建议你逐渐停用 CSS 预处理器, 因为 React 给了你一种更强大的方式去重用样式 (通过重用组件), 并且 JavaScript 打包工具可以为你生成更高效的样式表 (我曾经[在 OSCON 上发表过关于这个的演讲](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). 说了这么多, 总之 React 就像其他 JavaScript 库一样, 可以和 CSS 预处理器很好地配合工作.

另一种可选项是 [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 那样的方法学去管理类名, 因为模块系统在底层已经帮你处理好了.

## 学习服务器端渲染

服务器端渲染经常被称为 "通用应用" 或 "同构应用". 这意味着你可以用 React 组件在服务器端渲染出静态 HTML. 这样做可以提高初始化加载的性能, 因为用户不用等到 JS 下载完才看到初始界面, 并且 React 可以重用服务器端渲染出的 HTML, 无需客户端重新生成.

如果你发现首屏渲染速度过慢, 或者想提高网站在搜索引擎的排行, 你就需要服务器端渲染了. 尽管 Google 现在也会索引客户端渲染的内容, 但截至 2016 年 1 月, 这样做仍被证实会对排行有负面影响, 这可能是由于客户端渲染的性能问题所造成的.

服务器端渲染还需要许多工具的辅助, 因为显然 React 组件不是在考虑服务器端渲染的情况下写出来的, 你应该先构建你的应用, 之后再关心服务器端渲染的问题. 不用担心, 你不需要重写所有组件去支持它.

## 学习 Flux

你可能听过 Flux, 不过关于 Flux 有大量的错误资讯.

许多人一坐下来刚开始构建应用, 就认为需要用 Flux 来定义他们的数据模型. **这样采用 Flux 是不对的, Flux 应该在大量组件被建立完成以后才被引入.**

React 组件之间存在层级关系. 在很多时候, 你的数据模型也跟随这种层级. 这种情况下, Flux 不会给你很大帮助. 但有些时候, 你的数据模型没有层次, 当你的 React 组件开始接受没有关联的 `props` 的时候, 或者当小部分组件开始变得复杂的时候, 你才可能需要看看 Flux.

**你会知道什么时候需要用 Flux. 如果你不确定是否需要用它, 你就不需要它.**

如果你决定使用 Flux, 现在最流行的、文档最全的 Flux 库是 [Redux](http://redux.js.org/). 当然也有许多其他选择, 你或者会有兴趣尝试使用它们, 但我的建议是只需要用最流行的 Redux 就足够了.

## 学习 Immutable.js

[Immutable.js](https://facebook.github.io/immutable-js/) 提供了一系列的数据结构, 以帮助解决构造 React 应用时的某些性能问题. 这是一个很棒的库, 你可能会在应用发展的过程里大量用到它, 但直到你在意识到性能问题以前, 它是完全不必要的.

## 学习 Relay, Falcor 等

这些技术可以帮你减少 AJAX 请求数, 它们仍然是非常前沿的, 所以如果你没有遇到过多 AJAX 请求的问题, 就不需要用到 Relay 或者 Falcor.


================================================
FILE: README.md
================================================
# react-howto

If you’re new to React (or frontend in general) you may find the ecosystem confusing. There are a few reasons for this.

* React has historically been targeted at early-adopters and experts
* Facebook only open-sources what it actually uses, so it doesn’t focus on tooling for smaller-than-Facebook projects
* There’s a lot of bad marketing masquerading as React guides

Throughout this document, I’ll assume you’ve built a web page with HTML, CSS and JavaScript.

## Why should you listen to me?

There’s a ton of conflicting advice about React out there; why listen to me?

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.

## How to tackle the React ecosystem

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.

You should learn, in this order, **without skipping ahead or learning concurrently**:

* [React itself](#learning-react-itself)
* [`npm`](#learning-npm)
* [JavaScript “bundlers”](#learning-javascript-bundlers)
* [ES6](#learning-es6)
* [Routing](#learning-routing)
* [Flux](#learning-flux)

**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.

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**.
* [Inline styles](#learning-inline-styles)
* [Server rendering](#learning-server-rendering)
* [Immutable.js](#learning-immutablejs)
* [Relay, Falcor, etc](#learning-relay-falcor-etc)

## Learning React itself

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.**

I still think the easiest way to learn React is [the official tutorial](https://facebook.github.io/react/docs/tutorial.html).

## Learning `npm`

`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.

Most reusable components, libraries and tools in the React ecosystem are available as `CommonJS` modules and are installed with `npm`.

## Learning JavaScript bundlers

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.

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.

React also now offers [an officially supported CLI tool called Create React App](https://github.com/facebookincubator/create-react-app). It lets you create React projects powered by `webpack` without any configuration. It has its limitations, but it can serve as a great starting point, and its updates will add more features over time. It also offers an "ejection" feature that copies all configs and dependencies into your project so you have full control over them.

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.

## Learning ES6

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.

If you just want to get things done with React, **you can skip learning ES6**, or try to pick it up along the way.

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()`.

## Learning routing

“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**.

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.

**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.

## Learning Flux

You’ve probably heard of Flux. There’s a *ton* of misinformation about Flux out there.

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.**

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.

**You’ll know when you need Flux. If you aren’t sure if you need it, you don’t need it.**

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.

## Learning inline styles

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.

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.**

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.

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.

## Learning server rendering

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.

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.

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.

## Learning Immutable.js

[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. 

## Learning Relay, Falcor etc

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.