Merge pull request #1 from ReactTraining/master

Updating My Original

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    "es2015",
+    "stage-1",
+    "react"
+  ],
+  "plugins": [
+    "transform-object-assign"
+  ]
+}

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -1,35 +1,33 @@
 {
-  "extends": "eslint:recommended",
-  "ecmaFeatures": {
-    "jsx": true,
-    "modules": true
-  },
+  "parser": "babel-eslint",
   "env": {
     "browser": true,
-    "node": true,
-    "es6": true
-  },
-  "parser": "babel-eslint",
-  "rules": {
-    "array-bracket-spacing": [ 2, "always" ],
-    "comma-dangle": [ 2, "never" ],
-    "eol-last": 2,
-    "indent": [ 2, 2, { "SwitchCase": 1 } ],
-    "jsx-quotes": [ 2, "prefer-double" ],
-    "no-multiple-empty-lines": 2,
-    "no-unused-vars": 1,
-    "no-var": 2,
-    "object-curly-spacing": [ 2, "always" ],
-    "quotes": [ 2, "single", "avoid-escape" ],
-    "react/jsx-uses-react": 1,
-    "react/jsx-no-undef": 2,
-    "react/wrap-multilines": 2,
-    "semi": [ 2, "never" ],
-    "strict": 0,
-    "space-before-blocks": [ 2, "always" ],
-    "space-before-function-paren": [ 2, { "anonymous": "always", "named": "never" } ]
+    "node": true
   },
   "plugins": [
+    "import",
     "react"
-  ]
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:react/recommended"
+  ],
+  "settings": {
+    "import/resolver": "webpack"
+  },
+  "rules": {
+    "array-bracket-spacing": [ 1, "always" ],
+    "comma-dangle": [ 1, "never" ],
+    "eqeqeq": [ 2, "smart" ],
+    "jsx-quotes": [ 1, "prefer-double" ],
+    "no-unused-vars": 0,
+    "object-curly-spacing": [ 1, "always" ],
+    "quotes": [ 1, "single", "avoid-escape" ],
+    "react/jsx-space-before-closing": [ 1, "never" ],
+    "react/no-did-mount-set-state": 0,
+    "react/prop-types": 1,
+    "semi": [ 1, "never" ],
+    "space-before-blocks": [ 1, "always" ]
+  }
 }

.gitignore

@@ -1,6 +1,6 @@
 subjects/index.html
-subjects/**/index.html
-subjects/**/solution.html
 subjects/**/lecture.html
+subjects/**/exercise.html
+subjects/**/solution.html
 !subjects/**/backbone-todomvc/index.html
 node_modules

.travis.yml

@@ -0,0 +1,7 @@
+language: node_js
+node_js:
+- stable
+branches:
+  only:
+  - master
+  - /^greenkeeper-/

README.md

@@ -1,25 +1,25 @@
-## Welcome to React.js Training!
+## Welcome to React Training!
 
-This repo contains the course material for [React.js Training](https://reactjs-training.com/). Before attending the training, make sure you can run this repository.
+This repo contains the course material for [React Training](https://reacttraining.com/). Before attending the training, please make sure you can run this repository.
 
-First, install [git](http://git-scm.com/downloads) and [node.js](https://nodejs.org/). Then:
+First, install [git](http://git-scm.com/downloads) and the latest stable version of [node](https://nodejs.org/). Then:
 
 ```sh
-$ git clone https://github.com/ReactJSTraining/react-subjects.git
+$ git clone https://github.com/ReactTraining/react-subjects.git
 $ cd react-subjects
 $ npm install
 $ npm start
 ```
 
-Then open your browser to `http://localhost:8080`. You should see a list of subjects.
+Then open your browser to [http://localhost:8080](http://localhost:8080). You should see a list of subjects.
 
-You might also want to read our [JavaScript Primer](https://github.com/ReactJSTraining/react-subjects/blob/master/JavaScriptPrimer.md) before attending the workshop. It's a refresher on some of the newer bits of JavaScript you'll want to be familiar with in order to get the most out of the experience.
+**IMPORTANT:** Please read the [JavaScript Primer](https://github.com/ReactTraining/react-subjects/blob/master/JavaScriptPrimer.md) before attending the workshop. It's a refresher on some of the newer bits of JavaScript you'll want to be familiar with in order to get the most out of the experience.
 
 ### Troubleshooting
 
 A few common problems:
 
-- You're having problems cloning the repository. Some corporate networks block port 22, which git uses to communicate with GitHub over SSH. Instead of using SSH, clone the repo over HTTPS. Use the following command to tell git to always use `https` instead of `git`:
+- **You're having problems cloning the repository.** Some corporate networks block port 22, which git uses to communicate with GitHub over SSH. Instead of using SSH, clone the repo over HTTPS. Use the following command to tell git to always use `https` instead of `git`:
 
 ```sh
 $ git config --global url."https://".insteadOf git://
@@ -29,13 +29,13 @@ $ git config --global url."https://".insteadOf git://
   insteadOf = git://
 ```
 
-- You're having trouble installing node. We recommend using [nvm](https://github.com/creationix/nvm). nvm makes it really easy to use multiple versions of node on the same machine painlessly. After you install nvm, install node version 4 with the following command:
+- **You're having trouble installing node.** We recommend using [nvm](https://github.com/creationix/nvm). nvm makes it really easy to use multiple versions of node on the same machine painlessly. After you install nvm, install the latest stable version of node with the following command:
 
 ```sh
-$ nvm use default 4
+$ nvm use default stable
 ```
 
-- You don't have permissions to install stuff. You might see an error like `EACCES` during the `npm install` step. If that's the case, it probably means that at some point you did an `sudo npm install` and installed some stuff with root permissions. To fix this, you need to forcefully remove all files that npm caches on your machine and re-install without sudo.
+- **You don't have permissions to install stuff.** You might see an error like `EACCES` during the `npm install` step. If that's the case, it probably means that at some point you did an `sudo npm install` and installed some stuff with root permissions. To fix this, you need to forcefully remove all files that npm caches on your machine and re-install without sudo.
 
 ```sh
 $ sudo rm -rf node_modules
@@ -49,3 +49,7 @@ $ sudo rm -rf /usr/local/lib/node_modules
 # Then (look ma, no sudo!):
 $ npm install
 ```
+
+### License
+
+This material is available for private, non-commercial use under the [GPL version 3](http://www.gnu.org/licenses/gpl-3.0-standalone.html). If you would like to use this material to conduct your own workshop, please contact us at [email protected]

Syllabus.md

@@ -0,0 +1,209 @@
+# Syllabus
+
+This document contains a list of subjects we cover in our React training workshops. The stuff near the top is generally part of our "React Fundamentals" workshop and the stuff further down we generally cover in "Advanced React" workshops.
+
+For any workshop, please be sure you are familiar with the material in our [JavaScript primer](https://github.com/ReactJSTraining/react-subjects/blob/master/JavaScriptPrimer.md) before attending.
+
+## Eliminating Time
+
+Solutions are nonsense without understanding the problems they solve. We'll take a trip down memory lane to shine a light on the stuff that led to all the bugs we've written in the past to prime us to see clearly how React is going to help.
+
+Objectives:
+- Understand the problems React solves
+- Get people thinking about [the conceptual gap between the static program and the dynamic process][Dijkstra], and what it means to "eliminate time" in their apps
+
+[Dijkstra]: https://en.wikiquote.org/wiki/Edsger_W._Dijkstra
+
+
+## Rendering with React
+
+We'll explore the lowest level of React: rendering UI. We'll take a look at what the "Virtual DOM" and JSX are, brush up on some JavaScript array methods, and do our first coding exercise.
+
+Objectives:
+- Render UI with React
+- Transform and massage data into UI
+- Become familiar with JSX
+- Brush up on JavaScript expressions and scope
+
+
+## Components
+
+Components are the building blocks of UI in React. We'll discuss a few parts of a component's lifecycle, it's interface with the rest of the application, component state, encapsulation, and how to make components reusable.
+
+Objectives:
+- Define components
+- Determine good values for component state
+- Interface with the rest of the world (props)
+- Use propTypes as "runnable documentation"
+- Handle user interaction
+
+
+## Props vs. State
+
+One of the first questions that comes up when you start using React is "when do I use state, and when do I use props?" We'll explore an app with changing requirements that lets us experience state moving to props and why. We'll discuss how data flows, or rather, how components communicate with each other. Finally, we'll explore how component composition helps answer the "props vs. state" question.
+
+Objectives:
+- Understand the difference between props and state
+- Know when to use props vs. state
+- Pass data up and down the view hierarchy
+- Compose generic components into specialized components
+
+
+## Imperative to Declarative
+
+React is "declarative". What does that mean? What is imperative code? We'll answer these questions, and show the power that comes from shifting your imperative code into declarative components using more of the React component lifecycle.
+
+Objectives:
+- Turn imperative code into declarative code
+- Experience the benefits that come from declarative programming
+- Learn to use existing JS libraries declaratively
+- Use more of the React component lifecycle
+- Understand how and when to use `ref`s
+
+
+## Forms
+
+Solidify your [declarative](#imperative-to-declarative) understanding by working with forms in React. We'll discuss the various use-cases for forms and how to handle them in React.
+
+Objectives:
+- Understand [controlled vs. uncontrolled](https://facebook.github.io/react/docs/forms.html) components
+- Work with forms
+
+
+## Testing
+
+Testing UI has never been this straightforward. You'll learn how to test any UI interaction your app has.
+
+Objectives:
+- Test stateless components
+- Test stateful components
+- Simulate events
+
+
+## Compound Components
+
+Some components get really, really big. Not only do their render methods get large, but as more people try to use the component, the props it takes grow as well. Eventually you end up with way too many properties and a really difficult component to work with that has to change with every new use-case you throw at it. There's a better way with compound components.
+
+Objectives:
+- Create reusable components by compounding related components together
+- Dynamically flow data between components
+
+
+## Controlled Compound Components
+
+Some reusable components are a lot like form elements and need to be controlled or uncontrolled. We'll examine techniques to implement components with this kind of behavior.
+
+Objectives:
+- Create a component that can be controlled or uncontrolled
+
+Prerequisites:
+- [Compound Components](#compound-components)
+- [Forms](#forms)
+
+
+## Context
+
+Context is an advanced, slightly-unstable, and powerful tool that solves a handful of use-cases really elegantly. We'll discuss when and why it's a good solution, and when it's not.
+
+Objectives:
+- Learn to use context
+- Learn when it's useful and when to use a different pattern
+
+Prerequisites:
+- [Compound Components](#compound-components)
+
+
+## Higher Order Components
+
+Higher order components allow you to compose behavior into components without inheritence or modifying the component itself with a wide range of use-cases.
+
+Objectives:
+- Create a higher order component
+- Understand when to use a higher order component
+
+
+## Render Props
+
+As we begin to make more things declarative we run into code that seems unlikely to be made declarative.  We'll explore this pattern and see how it allows us to make anything in our app declarative.
+
+Objectives:
+- Learn to use render props
+- Learn when they are most useful
+
+
+## Performance and Render Optimizations
+
+As your app grows you'll eventually hit some slow interactions. We'll explore how to identify the bottlenecks and how to fix them. We'll also see how React can help us avoid the bottlenecks in the first place.
+
+Objectives:
+- Identify performance bottlenecks
+- Learn how to do "windowing" with React
+
+
+## Animation
+
+We'll showcase several ways to do animation including imperatively with 3rd-party animation libs like jQuery and declaratively with [react-motion](https://github.com/chenglou/react-motion).
+
+Objectives:
+- Animate elements
+
+Prerequisites:
+- [Imperative to Declarative](#imperative-to-declarative)
+- [Render Props](#render-props)
+
+
+## Routing
+
+Keep your application UI and the URL in sync, no more broken back buttons. We'll introduce some basic uses of [React Router](https://github.com/ReactTraining/react-router), and how it helps you weave together your components into an application with multiple screens.
+
+Objectives:
+- Understand principles of client-side "routing"
+- Understand use-cases for routing
+- Create UI at specific URLs
+- Transition between screens
+
+Prerequisites:
+- [Render Props](#render-props)
+
+
+## Server Rendering
+
+React lets you render your components server-side for improved SEO and performance. In this section we'll discuss the techniques and trade-offs of rendering your React components on the server. We'll also transition a fully client-side app to server-side rendering, and discuss the use cases we solve each step of the way.
+
+Objectives:
+- Understand principles of server-side rendering and when it's useful
+- Render components server-side
+- Fetch data before rendering server-side
+- Seamlessly transition to the client page without replacing HTML already in the page
+
+
+## Redux
+
+Redux is a library for managing application state that can be useful when using React. We'll work on a real Redux app that makes requests to a real server and explore some techniques for managing shared state client-side.
+
+Objectives:
+- Understand one-way data flow
+- Understand Redux concepts like stores and actions
+- Implement a feature using Redux
+- Handle latency and errors using Redux
+
+
+## Implementing Redux
+
+The react-redux bindings make use of several advanced features of React including [context](#context) and [higher-order components](#higher-order-components). We'll use both of these concepts to build our own "mini Redux" and discover how Redux really works behind the scenes.
+
+Objectives:
+- Use higher-order components to put stuff on context
+- Use context to pass state down the hierarchy
+
+Prerequisites:
+- [Context](#context)
+- [Higher Order Components](#higher-order-components)
+
+
+## Migrating to React
+
+This section is designed for teams that want to migrate, instead of rewrite, their existing app to React in a way that won't block everyone else on the team. You'll be writing and shipping your new code incrementally. We'll also discuss how to integrate with existing JS libs as you encounter them in your app.
+
+Objectives:
+- Learn how to integrate React into an existing code-base