From f2d6a86d75fe91dcf6d3d773618656d8c0040d5c Mon Sep 17 00:00:00 2001 From: tajo Date: Wed, 17 Feb 2016 21:55:51 -0500 Subject: [PATCH 01/90] Czech: Add information about CSS modules --- README-cs.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) 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. From 284ae3c2c19631f89dcc3699d82866ddc875ed3d Mon Sep 17 00:00:00 2001 From: Zhangjd Date: Thu, 18 Feb 2016 18:50:40 +0800 Subject: [PATCH 02/90] Update README-zh.md --- README-zh.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README-zh.md b/README-zh.md index 891d3ca..1686bc5 100644 --- a/README-zh.md +++ b/README-zh.md @@ -81,6 +81,8 @@ JavaScript 打包工具包括有 `webpack` 和 `browserify`. 它们都是好的 一旦你找到了用 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 那样的方法学去管理类名, 因为模块系统在底层已经帮你处理好了. + ## 学习服务器端渲染 服务器端渲染经常被称为 "universal" 或 "isomorphic" JS. 这意味着你可以用 React 组件在服务器端渲染出静态 HTML. 这样做可以提高初始化加载的性能, 因为用户不用等到 JS 下载完才看得见初始界面, 并且 React 可以重用服务器端渲染出的 HTML, 无需客户端重新生成. From 8b0414ac051761388f33f72ac8c7447b461ebaa2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20K=C3=B6gel?= Date: Sat, 20 Feb 2016 12:34:23 +0100 Subject: [PATCH 03/90] README-de.md: add German translation. --- README-de.md | 111 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 README-de.md diff --git a/README-de.md b/README-de.md new file mode 100644 index 0000000..a3b5217 --- /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 weitverbreitet 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 `