From deab3c2a6cf00b37866e7eb789087f583def98c6 Mon Sep 17 00:00:00 2001 From: nelsonic Date: Fri, 15 Jan 2016 22:27:29 +0000 Subject: [PATCH 1/5] adds intro videos first in readme --- README.md | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 53 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index da86bc4..cbada30 100644 --- a/README.md +++ b/README.md @@ -4,12 +4,33 @@ Learn React.js for *high performance* JavaScript applications. ## Start + +### Videos: + +Introduction to React.js (**2 hours**) +[![Introduction to React.js](https://cloud.githubusercontent.com/assets/194400/12367017/f114d87a-bbd6-11e5-9e7d-2510aa66ca57.png)](https://youtu.be/XxVg_s8xAms "Introduction to React.js") + +Good history lesson. + +**Pete Hunt**'s ***React: Rethinking Best Practices*** +gives a good (*although biased*) overview of how React is different: +[![Pete Hunt: React: Rethinking best practices -- JSConf EU 2013](https://cloud.githubusercontent.com/assets/194400/12365803/050e1ff6-bbcf-11e5-8f27-80884b7530c4.png)](https://youtu.be/x7cQ3mrcKaY "Pete Hunt: React: Rethinking best practices -- JSConf EU 2013") + +#### Key Takeaways: + ++ ***Components***, not Templates ++ Re-render, ***don't mutate*** ++ **Virtual DOM** is *simple* and *fast* + + +### Reading: + - Getting started: http://facebook.github.io/react/docs/getting-started.html (recommends using [JSX](http://jsx.github.io) which is quite bleeding-edge) - Tutorial: http://facebook.github.io/react/docs/tutorial.html -## Background +## Overview React is a JavaScript library for building user interfaces. @@ -34,7 +55,7 @@ boilerplate and is easier to reason about than traditional data binding. ### Video -+ *Introduction* to React.js: https://www.youtube.com/watch?v=XxVg_s8xAms ++ *Introduction* to React.js: https://www.youtube.com/watch?v=XxVg_s8xAms (*linked to above*) + *Thinking* in React: http://tagtree.tv/thinking-in-react (click "maybe later" for video to start) + Main List: https://facebook.github.io/react/docs/videos.html + Building UIs with ReactJS: http://youtu.be/lAn7GVoGlKU?t=51s @@ -82,3 +103,33 @@ specifically: http://fb.me/react-0.11.2.min.js ## React Native - React.js Conf 2015 Keynote: http://youtu.be/KVZ-P-ZI6W4 + + +## Background Reading + ++ React vs. Web Components (Polymer): +http://programmers.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer ++ "***React Is A Terrible Idea***": +https://www.pandastrike.com/posts/20150311-react-bad-idea ++ Thinking in React, a step by step screencast tutorial: +https://youtu.be/mFEoarLnnqM + http://tagtree.tv/thinking-in-react +(*note: uses older version of React...*) + + +## The Bad Parts + +### Inline Styles + +[***Inline Styles***](http://facebook.github.io/react/tips/inline-styles.html) +Facebook *officially* recommends that people define their +style as a JavaScript Object e.g: +```js +var divStyle = { + color: 'white', + backgroundImage: 'url(' + imgUrl + ')', + WebkitTransition: 'all', // note the capital 'W' here + msTransition: 'all' // 'ms' is the only lowercase vendor prefix +}; + +ReactDOM.render(
Hello World!
, mountNode); +``` From 912e5b83e917a1b318c854768f0a89a540642c6c Mon Sep 17 00:00:00 2001 From: nelsonic Date: Fri, 15 Jan 2016 22:41:41 +0000 Subject: [PATCH 2/5] adds section on "The Bad Parts" of React ... --- README.md | 72 +++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 54 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index cbada30..ae329bf 100644 --- a/README.md +++ b/README.md @@ -2,15 +2,38 @@ Learn React.js for *high performance* JavaScript applications. -## Start + +## Why? + +Deciding which framework/library to adopt for your Web App can be +a *daunting* task. There are *litterally* hundreds of of +Frameworks available + + + + +We had a few criteria for choosing a + +## *What*? + ### Videos: -Introduction to React.js (**2 hours**) +#### Intro to React + +Introduction to React.js (**2 hours**) - A good history lesson of why *Facebook* built React. [![Introduction to React.js](https://cloud.githubusercontent.com/assets/194400/12367017/f114d87a-bbd6-11e5-9e7d-2510aa66ca57.png)](https://youtu.be/XxVg_s8xAms "Introduction to React.js") -Good history lesson. +#### Hot Reloading with Time Travel + +If you have built web apps and felt the pain of having to +re-start each time a change is made you will identify with this: + +[![Live React: Hot Reloading with Time Travel](https://cloud.githubusercontent.com/assets/194400/12371630/f7c3c758-bc30-11e5-949a-7b8c9f957269.png)](https://youtu.be/xsSnOQynTHs "Live React: Hot Reloading with Time Travel") + + +#### Rethinking Best Practice **Pete Hunt**'s ***React: Rethinking Best Practices*** gives a good (*although biased*) overview of how React is different: @@ -114,22 +137,35 @@ https://www.pandastrike.com/posts/20150311-react-bad-idea + Thinking in React, a step by step screencast tutorial: https://youtu.be/mFEoarLnnqM + http://tagtree.tv/thinking-in-react (*note: uses older version of React...*) ++ WebPack Started for Designers: +https://github.com/ArmendGashi/Webpack-starter-for-designers ++ React.js isn’t terrible, but it’s not perfect either: https://medium.com/@MostlyHarmlessD/react-js-isn-t-terrible-but-it-s-not-perfect-either-8e0065cb2bf8 ++ React + Performance = ? (*in-depth article about React vs. Vanilla JS perf): https://aerotwist.com/blog/react-plus-performance-equals-what/ ++ ***Slant*** *Comparison* of Web UI Frameworks: +http://www.slant.co/topics/3286/~javascript-libraries-for-building-a-ui (*Riot still beats React!*) + +## Good Features ++ Good Developer Tools & Workflow ## The Bad Parts -### Inline Styles - -[***Inline Styles***](http://facebook.github.io/react/tips/inline-styles.html) -Facebook *officially* recommends that people define their -style as a JavaScript Object e.g: -```js -var divStyle = { - color: 'white', - backgroundImage: 'url(' + imgUrl + ')', - WebkitTransition: 'all', // note the capital 'W' here - msTransition: 'all' // 'ms' is the only lowercase vendor prefix -}; - -ReactDOM.render(
Hello World!
, mountNode); -``` +React was ***not*** our ***first choice*** for +building web applications because it has *several* +conventions which are *traditionally* considered "***anti-patterns***": ++ "in-line styles" (*in markup*) ++ "CSS in JS" (*see below*) ++ "in-line `onClick` event handlers" ++ Use of `this` context object/keyword *everywhere* (*why is this bad?*) ++ Components mix HTML/JSX Templates in JavaScript + +We *understand* and *acknowledge* that in Facebook's case +it makes sense to include all the code (HTML/JSX, CSS & JavaScript) +in a *single place* as a *Component*. +When you have *many* (*tens/hundreds*) of people +editing your app it can make sense to have everything in +the same place. + +We think React Components *can* (*should*) be written +with [***accessibility***] in mind and that's where our +example code differs from that of other tutorials. From 1f81cfc32faad2e33128018d55ffbde6dfbb2556 Mon Sep 17 00:00:00 2001 From: nelsonic Date: Fri, 15 Jan 2016 22:48:32 +0000 Subject: [PATCH 3/5] adds example of inline (JS) styles to readme "Bad Parts" section --- README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/README.md b/README.md index ae329bf..1014042 100644 --- a/README.md +++ b/README.md @@ -169,3 +169,24 @@ the same place. We think React Components *can* (*should*) be written with [***accessibility***] in mind and that's where our example code differs from that of other tutorials. + +### Inline Styles + +[***Inline Styles***](http://facebook.github.io/react/tips/inline-styles.html) +Facebook *officially* recommends that people define their +style as a JavaScript Object e.g: +```js +var divStyle = { + color: 'white', + backgroundImage: 'url(' + imgUrl + ')', + WebkitTransition: 'all', // note the capital 'W' here + msTransition: 'all' // 'ms' is the only lowercase vendor prefix +}; + +ReactDOM.render(
Hello World!
, mountNode); +``` +![react-css-in-js](https://cloud.githubusercontent.com/assets/194400/12389043/5fea3058-bdce-11e5-97ab-d412bc4a40ef.png) + +> Read: ***Please, Please Don’t Use “CSS in JS***” *by* [Alex Sharp](https://github.com/ajsharp): +https://medium.com/@ajsharp/please-please-don-t-use-css-in-js-ffeae26f20f +> and: https://speakerdeck.com/vjeux/react-css-in-js From 98374d3ca4bf9bce8316de9348cb6c5ba5284bc3 Mon Sep 17 00:00:00 2001 From: nelsonic Date: Sat, 16 Jan 2016 00:57:44 +0000 Subject: [PATCH 4/5] expands React Native section, adds link to "Things I wish I knew" (closes https://github.com/dwyl/learn-react/issues/16 ) and advises people to contact @nikhilaravi @jrans @besarthoxhaj @izaakrogan about their expeience shipping a React Native iOS App! --- README.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 1014042..2a5f317 100644 --- a/README.md +++ b/README.md @@ -125,8 +125,17 @@ specifically: http://fb.me/react-0.11.2.min.js ## React Native -- React.js Conf 2015 Keynote: http://youtu.be/KVZ-P-ZI6W4 +React Native enables you to build on native platforms using a consistent developer experience based on JavaScript and React. ++ React.js Conf 2015 Keynote: http://youtu.be/KVZ-P-ZI6W4 ++ https://facebook.github.io/react-native/ ++ Things I wish I were Told About React Native: http://ruoyusun.com/2015/11/01/things-i-wish-i-were-told-about-react-native.html + +> Tip: *Ask* [Niki](https://github.com/nikhilaravi), +[Jack](https://github.com/jrans), +[Bes](https://github.com/besarthoxhaj) +& [Izaak](https://github.com/izaakrogan) about their +*experience* using React Native to *ship* their first ***iOS App***! ## Background Reading From 2b5d62110c8f98db798ce5f37ac24a97f5444816 Mon Sep 17 00:00:00 2001 From: nelsonic Date: Sat, 16 Jan 2016 01:03:49 +0000 Subject: [PATCH 5/5] adds tl;dr section noting that React is a *temporary* non-standards-based approach to building Web Components --- README.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 2a5f317..b6dde62 100644 --- a/README.md +++ b/README.md @@ -160,7 +160,9 @@ http://www.slant.co/topics/3286/~javascript-libraries-for-building-a-ui (*Riot s ## The Bad Parts React was ***not*** our ***first choice*** for -building web applications because it has *several* +building web applications because it is not built around the +**Web Components** ***Standard*** (*the way Polymer is...*) +and has *several* conventions which are *traditionally* considered "***anti-patterns***": + "in-line styles" (*in markup*) + "CSS in JS" (*see below*) @@ -179,6 +181,7 @@ We think React Components *can* (*should*) be written with [***accessibility***] in mind and that's where our example code differs from that of other tutorials. + ### Inline Styles [***Inline Styles***](http://facebook.github.io/react/tips/inline-styles.html) @@ -199,3 +202,13 @@ ReactDOM.render(
Hello World!
, mountNode); > Read: ***Please, Please Don’t Use “CSS in JS***” *by* [Alex Sharp](https://github.com/ajsharp): https://medium.com/@ajsharp/please-please-don-t-use-css-in-js-ffeae26f20f > and: https://speakerdeck.com/vjeux/react-css-in-js + +### tl;dr + +We consider React to be a "*temporary solution*" to the +problem of building re-useable web components that can be +rendered on the Server and (*Progressively*) Enhanced on the Client. +We *expect* a new *Standards-based* Approach to emerge in the +next 18 months and will adopt it with open arms... +(*if you know where such a framework/library/pattern is + being developed please share a link with us!*)