diff --git a/README.md b/README.md index da86bc4..b6dde62 100644 --- a/README.md +++ b/README.md @@ -2,14 +2,58 @@ 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: + +#### Intro to React + +Introduction to React.js (**2 hours**) - A good history lesson of why *Facebook* built React. +[](https://youtu.be/XxVg_s8xAms "Introduction to React.js") + +#### 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: + +[](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: +[](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 +78,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 @@ -81,4 +125,90 @@ 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 + ++ 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...*) ++ 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 + +React was ***not*** our ***first choice*** for +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*) ++ "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. + + +### 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(