diff --git a/README-cs.md b/README-cs.md index 3e0d0ca..1260680 100644 --- a/README-cs.md +++ b/README-cs.md @@ -14,7 +14,6 @@ Existuje spousta protichůdných rad ohledně Reactu. Proč byste měli dát zro 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í. @@ -57,7 +56,6 @@ Příkladem JS bundlerů je `webpack` a `browserify`. Oba jsou dobrou volbou, al 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. @@ -66,7 +64,6 @@ Pokud chcete jednoduše začít vyvíjet v Reactu, **můžete učení se ES6 syn 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**. @@ -95,6 +92,8 @@ Jde o trochu šílenou myšlenku z mnoha důvodů. Komplikuje to media queries a 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. diff --git a/README-de.md b/README-de.md new file mode 100644 index 0000000..a650581 --- /dev/null +++ b/README-de.md @@ -0,0 +1,111 @@ +# 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 `