update

Author: bgoonz

learn-react-master/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# Commenting this out is preferred by some people, see
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
+node_modules
+
+# Users Environment Variables
+.lock-wscript

learn-react-master/README.md

@@ -0,0 +1,84 @@
+![React Intro](http://i.imgur.com/yH3JkIH.png)
+
+Learn React.js for *high performance* JavaScript applications.
+
+## Start
+
+- 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
+
+React is a JavaScript library for building user interfaces.
+
++ **Just the UI:** Lots of people use React as the V in MVC.
+Since React makes no assumptions about the rest of your technology stack,
+it's easy to try it out on a small feature in an existing project.
++ **Virtual DOM:** React uses a *virtual DOM* diff implementation
+for ultra-high performance. It can also render on the server using
+Node.js — no heavy browser DOM required.
+  * This means that every time something changes, React creates a _virtual_ DOM tree, checks for the differences between that and the existing DOM and then re-renders **only the differences** to the DOM
++ **Data flow:** React implements one-way reactive data flow which reduces
+boilerplate and is easier to reason about than traditional data binding.
+
+
+### Reading
+
++ Main Site: http://facebook.github.io/react/
++ Getting Started: http://facebook.github.io/react/docs/getting-started.html
++ Thinking in React: http://facebook.github.io/react/docs/thinking-in-react.html
++ Overview (Flux): http://facebook.github.io/flux/docs/overview.html
++ GitHub: https://github.com/facebook/react
+
+### Video
+
++ *Introduction* to React.js: https://www.youtube.com/watch?v=XxVg_s8xAms
++ *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
++ *High performance* functional programming with **React** *and* **Meteor**:
+https://www.youtube.com/watch?v=qqVbr_LaCIo
++ React's Architecture: https://www.youtube.com/watch?v=eCf5CquV_Bw
++ Getting Started with React.js: ~~ https://www.youtube.com/watch?v=6ho8aOPUYxs ~~
+http://code.tutsplus.com/courses/getting-started-with-reactjs
+(I Paid the $15 for the course - let me know if you need access)
+
+
+
+## What?
+
+react.min.js (minified!) is ***124kb***!
+see: http://facebook.github.io/react/downloads.html
+specifically: http://fb.me/react-0.11.2.min.js
+
+### Resources
+
+- Great list of React.js resources: https://github.com/enaqx/awesome-react
+
+### Components not Templates
+
+> http://css-tricks.com/modular-future-web-components
+
+### Server-Side Rendering
+
++ https://www.npmjs.com/package/react-server-example
++ http://maketea.co.uk/2014/06/30/building-robust-web-apps-with-react-part-4.html
+
+
+## Testing with JEST
+
++ GitHub Repo for Jest CLI: https://github.com/facebook/jest
++ Get Started: http://facebook.github.io/jest/docs/getting-started.html
++ Tutorial: https://facebook.github.io/jest/docs/tutorial.html
++ API: https://facebook.github.io/jest/docs/api.html
++ Testing Flux Apps: http://facebook.github.io/react/blog/2014/09/24/testing-flux-applications.html
+
+### Test Coverage
+
++ http://stackoverflow.com/questions/28283371/how-to-get-test-coverage-from-jest-while-testing-react-js-app
+
+## React Native
+
+- React.js Conf 2015 Keynote: http://youtu.be/KVZ-P-ZI6W4

learn-react-master/index.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset=utf-9>
+  <title>First Component</title>
+  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+
+  <!-- container node -->
+  <div id="app"></div>
+
+  <script src="http://fb.me/react-0.12.2.js"></script>
+  <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
+  <script type="text/jsx">
+    /** @jsx React.DOM */
+
+    var MessageBox = React.createClass({
+
+      handleAdd: function(e){
+        console.log(this); 
+        var newMessage = this.refs.newMessage.getDOMNode().value;
+        var newMessages = this.state.messages.concat([newMessage]);
+        this.setState({
+          messages: newMessages
+        });
+      },
+
+      getInitialState: function() {
+        return {
+          isVisible: true,
+          messages: [
+          'I like the world',
+          'Coffee flavored ice cream is highly underrated',
+          'My spoon is too big',
+          'Tuesday is coming. Did you bring your coat?',
+          'I am a banana'
+          ]
+        }
+      },
+
+      render: function() {
+
+        var inlineStyles = {
+          display: this.state.isVisible ? 'block' : 'none'
+        };
+
+        var messages = this.state.messages.map(function(message) {
+          return <SubMessage message={message} />
+        })
+
+        return (
+          <div className="container jumbotron" style={inlineStyles}>
+            <h2>Hello, World</h2>
+            <input ref="newMessage" type="text" />
+            <button className="btn btn-primary" onClick={this.handleAdd}>Add</button>
+            { messages }
+          </div>
+        );
+      }
+    });
+
+    var SubMessage = React.createClass({
+      handleDelete: function(e) {
+
+      },
+
+      propTypes: function() {
+        message: React.PropTypes.string.isRequired
+      },
+
+      getDefaultProps: function () {
+        return {
+          message: "Its good to see you"
+        }
+      },
+
+      render: function() {
+        return (
+          <div>{this.props.message}</div>
+        )
+      }
+    });
+
+    var reactComponent = React.render(
+      <MessageBox />,
+      document.getElementById('app'),
+      function after() {
+        console.log('hai after render!');
+      }
+    )
+
+  </script>
+</body>
+</html>

learn-react-master/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "learn-react",
+  "version": "1.0.0",
+  "description": "learn how to use react.js for full-stack JS apps",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nelsonic/learn-react.git"
+  },
+  "keywords": [
+    "react.js",
+    "full-stack"
+  ],
+  "author": "@nelsonic <contact.nelsonic@gmail.com> (https://github.com/nelsonic)",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/nelsonic/learn-react/issues"
+  },
+  "homepage": "https://github.com/nelsonic/learn-react",
+  "dependencies": {
+    "react": "^0.12.2"
+  }
+}

learning-react-second-edition/.gitignore

@@ -0,0 +1,45 @@
+
+.DS_Store
+.idea/
+
+jest
+
+chapter-12/color-organizer/dist/
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history

learning-react-second-edition/README.md

@@ -0,0 +1,25 @@
+# Learning React: Second Edition ⚛️
+
+This repository contains the files for the book _Learning React_ by [Alex Banks](https://twitter.com/moontahoe) and [Eve Porcello](https://twitter.com/eveporcello) of [Moon Highway](https://moonhighway.com).
+
+|                                                                                                                              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ![Learning React Book Cover](https://raw.githubusercontent.com/MoonHighway/learning-react/second-edition/learning-react.jpg) | If you want to learn how to build efficient React applications, this is your book. This updated edition provides best practices and patterns for writing modern React code including a deep dive on React Hooks.<br><br> **Get the book**: [Amazon](https://www.amazon.com/Learning-React-Modern-Patterns-Developing/dp/1492051721) - [O'Reilly](http://shop.oreilly.com/product/0636920252894.do)<br>**Get React Training**: [Moon Highway](http://www.moonhighway.com)<br><br> |
+| ![Learning React Book v1](https://raw.githubusercontent.com/MoonHighway/learning-react/second-edition/learning-react-v1.jpg) | *Looking for the first edition files? Check out the [first-edition branch](https://github.com/MoonHighway/learning-react/tree/master).*|
+
+> "This is the React book that’s been missing from the frontend community. Alex and Eve not only discuss React in-depth but cover foundational JavaScript concepts, testing, state management, and more. Plus, they do so with approachable language and humor. I cannot recommend Learning React highly enough." - [Emma Bostian](https://twitter.com/emmabostian), Software Engineer at Spotify
+
+### Table of Contents
+
+- **Chapter 1** : [Welcome To React](https://github.com/MoonHighway/learning-react/tree/second-edition/chapter-01)
+- **Chapter 2** : [Emerging JavaScript](https://github.com/MoonHighway/learning-react/tree/second-edition/chapter-02)
+- **Chapter 3** : [Functional Programming with JavaScript](https://github.com/MoonHighway/learning-react/tree/second-edition/chapter-03)
+- **Chapter 4** : [Pure React](https://github.com/MoonHighway/learning-react/tree/second-edition/chapter-04)
+- **Chapter 5** : [React with JSX](https://github.com/MoonHighway/learning-react/tree/second-edition/chapter-05)
+- **Chapter 6** : [React State Management](https://github.com/MoonHighway/learning-react/tree/second-edition/chapter-06)
+- **Chapter 7** : [Enhancing Components with Hooks](https://github.com/MoonHighway/learning-react/tree/second-edition/chapter-07)
+- **Chapter 8** : [Incorporating Data](https://github.com/MoonHighway/learning-react/tree/second-edition/chapter-08)
+- **Chapter 9** : [Suspense](https://github.com/MoonHighway/learning-react/tree/second-edition/chapter-09)
+- **Chapter 10** : [Testing](https://github.com/MoonHighway/learning-react/tree/second-edition/chapter-10)
+- **Chapter 11** : [React Router](https://github.com/MoonHighway/learning-react/tree/second-edition/chapter-11)
+- **Chapter 12** : [React and the Server](https://github.com/MoonHighway/learning-react/tree/second-edition/chapter-12)

learning-react-second-edition/chapter-01/readme.md

@@ -0,0 +1,81 @@
+# Chapter 1 : Introduction
+
+The widespread use of React on large websites shows that it is stable enough to use at scale. React is ready.
+
+## Installing Node.js and NPM
+
+When working with Node and React, you will need to use the command line. On the Mac, this is called the Terminal. On a PC,
+it is called the Command Prompt. Run the following commands to check your current version on node and npm. If needed,
+instructions on how to install or upgrade are below.
+
+First, check to see if you have Node.js installed:
+
+```
+$ node -v
+```
+
+If this returns a version number, Node.js is installed. If the command is not found, you'll need to [install Node.js](https://nodejs.org/en/) from the Node.js website. Download the installer, run it, and follow the instructions.
+
+---
+
+Next, check your version of npm:
+
+```
+$ npm -v
+```
+
+Then, if you are running anything less than version 8, you will need to update npm:
+
+### Update npm on Mac
+
+```
+$ sudo npm update -g npm
+```
+
+### Update npm on PC
+
+Make sure to run the Command Prompt with administrator privileges:
+
+```
+$ npm update -g npm
+```
+
+##### Optionally install Yarn
+
+Yarn is a package manager created at Facebook. It is a compatible alternative to npm. Yarn's use is not required,
+but you can optionally install it if you like:
+
+```
+$ sudo npm install -g yarn
+```
+
+Finally, there are some nice options for switching Node versions. This is not required, but you can
+optionally install one of these version mangers:
+
+- [Install Node Version Manager - mac only (optional)](https://github.com/creationix/nvm)
+- [Install NVM-Windows - pc only (optional)](https://github.com/coreybutler/nvm-windows)
+
+---
+
+## Installing the React Tools
+
+Next, install the React developer tools:
+
+- Development Tools ([Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) |
+  [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/))
+
+## Working with the Files
+
+This repository links to samples hosted on various platforms, so that you can immediately begin interacting with the files. For smaller samples, we've linked to JSBins to allow you to run the sample with limited overhead. We also have links to CodeSandboxes and other repos if the samples are more in-depth.
+
+## React Resources
+
+Finally, we have some links to resources and official documentation for the libraries that we will be using:
+
+- [React Documentation](https://facebook.github.io/react/index.html)
+- [React Source](https://github.com/facebook/react)
+- [React Blog](https://facebook.github.io/react/blog/)
+- [React NPM](https://www.npmjs.com/package/react)
+- [webpack Documentation](https://webpack.js.org/)
+- [Jest Documentation](https://facebook.github.io/jest/)
+- [React Router Documentation](https://reacttraining.com/react-router/)