diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 68ffd3bce..000000000
--- a/.babelrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "presets": [
- "es2015",
- "stage-1",
- "react"
- ],
- "plugins": [
- "transform-object-assign"
- ]
-}
diff --git a/.editorconfig b/.editorconfig
deleted file mode 100644
index 4a7ea3036..000000000
--- a/.editorconfig
+++ /dev/null
@@ -1,12 +0,0 @@
-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
diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 63585f08e..000000000
--- a/.eslintignore
+++ /dev/null
@@ -1 +0,0 @@
-subjects/migrating-to-react/backbone-todomvc
diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index 45ec85f00..000000000
--- a/.eslintrc
+++ /dev/null
@@ -1,33 +0,0 @@
-{
- "parser": "babel-eslint",
- "env": {
- "browser": true,
- "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" ]
- }
-}
diff --git a/.gitignore b/.gitignore
index 00026d63b..ded057a5e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,3 @@
-subjects/index.html
-subjects/**/lecture.html
-subjects/**/exercise.html
-subjects/**/solution.html
-!subjects/**/backbone-todomvc/index.html
node_modules
+yarn-error.log
+public/**/*.html
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index d2091e4df..000000000
--- a/.travis.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-language: node_js
-node_js:
-- stable
-branches:
- only:
- - master
- - /^greenkeeper-/
diff --git a/JavaScriptPrimer.md b/JavaScriptPrimer.md
index 221fb98e9..3372bbcfd 100644
--- a/JavaScriptPrimer.md
+++ b/JavaScriptPrimer.md
@@ -7,44 +7,44 @@ Note: All of the syntax discussed here is actually part of the JavaScript spec,
JavaScript has always had `var`:
```js
-var name = 'Ryan'
+var name = "Michael";
```
`var` can be hard to manage especially because of it's "function scoping", so now we've got two other ways to define values that have "block scope":
```js
// var does not have block scope
-var name = 'Ryan'
+var name = "Michael";
if (true) {
- var name = 'Michael'
- name // 'Michael'
+ var name = "Bruce";
+ name; // 'Bruce'
}
-name // 'Michael'
+name; // 'Bruce'
// let has block scope
-let name = 'Ryan'
+let name = "Michael";
if (true) {
- let name = 'Michael'
- name // 'Michael'
+ let name = "Bruce";
+ name; // 'Bruce'
}
-name // 'Ryan'
+name; // 'Michael'
// const has block scope too
-const name = 'Ryan'
+const name = "Michael";
if (true) {
- const name = 'Michael'
- name // 'Michael'
+ const name = "Bruce";
+ name; // 'Bruce'
}
-name // 'Ryan'
+name; // 'Michael'
// let can be reassigned
-let isOpen = true
-isOpen = false
-isOpen // false
+let isOpen = true;
+isOpen = false;
+isOpen; // false
// const cannot be reassigned
-const isOpen = true
-isOpen = false // throws error
+const isOpen = true;
+isOpen = false; // throws error
```
We find block scope to make more sense to people and is generally more useful, therefore we don't use `var`.
@@ -56,17 +56,17 @@ In practice, nearly everything is `const`.
## String templates
```js
-const something = 'ugly stuff'
-const str = 'instead of ' + something + ' like this'
+const something = "ugly stuff";
+const str = "instead of " + something + " like this";
-const something = 'lovely stuff'
-const str = `you can do ${something} like this`
+const something = "lovely stuff";
+const str = `you can do ${something} like this`;
const str = `
also
multiline
is totally cool
-`
+`;
```
## Concise object methods
@@ -82,7 +82,7 @@ const obj = {
youCanDoThis() {
// do stuff
}
-}
+};
```
## Arrow functions
@@ -91,33 +91,32 @@ Arrow functions remove the context from a function, meaning the function has no
```js
const obj = {
- url: '/api/stuff',
+ url: "/api/stuff",
fetch(users) {
- users.forEach((user) => {
+ users.forEach(user => {
// `this` is the `this` from outside this function because
// there is no context inside an arrow function
- getUser(`${this.url}/${user.id}`)
- })
+ getUser(`${this.url}/${user.id}`);
+ });
}
-}
+};
```
Also, if the other side of an arrow function is an expression, it acts like an implicit return:
```js
-const add = function(x, y) { return x + y }
+const add = function(x, y) {
+ return x + y;
+};
// becomes
-const add = (x, y) => { return x + y }
+const add = (x, y) => {
+ return x + y;
+};
// which can be shorter with explicit expression return
-const add = (x, y) => x + y
-
-// if we want multiline, we can create an expression with ()
-const add = (x, y) => (
- x + y
-)
+const add = (x, y) => x + y;
```
## Arrays
@@ -125,55 +124,57 @@ const add = (x, y) => (
We do a lot with arrays, here are a few methods we use often:
```js
-const numbers = [ 1, 2, 3, 4, 5 ]
+const numbers = [1, 2, 3, 4, 5];
// map converts an array to a new, transformed array
-const doubled = numbers.map((number) => {
- return number * 2
-})
-doubled // [ 2, 4, 6, 8, 10 ]
+const doubled = numbers.map(number => {
+ return number * 2;
+});
+doubled; // [ 2, 4, 6, 8, 10 ]
// filter, return false to remove from an array
-const lessThan3 = numbers.filter((n) => {
- return n < 3
-})
-lessThan3 // [ 1, 2 ]
+const lessThan3 = numbers.filter(n => {
+ return n < 3;
+});
+lessThan3; // [ 1, 2 ]
// remember, that can be super short
-const lessThan3 = numbers.filter(n => n < 3)
+const lessThan3 = numbers.filter(n => n < 3);
```
## Destructuring
```js
-const obj = { x: 1, y: 2 }
+const obj = { x: 1, y: 2 };
// instead of:
-const x = obj.x
-const y = obj.y
+const x = obj.x;
+const y = obj.y;
// we can "destructure" the values off
-const { x, y } = obj
-x // 1
-y // 2
+const { x, y } = obj;
+x; // 1
+y; // 2
// you can use this all over the place, like function parameters
-function add({x, y}) { return x + y}
-add({x: 3, y: 4}) // 7
+function add({ x, y }) {
+ return x + y;
+}
+add({ x: 3, y: 4 }); // 7
```
## Modules
```js
// instead of cjs
-var React = require('react')
+var React = require("react");
// we use ES modules
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React from "react";
+import ReactDOM from "react-dom";
// and with destructuring to boot!
-import { render } from 'react-dom'
+import { render } from "react-dom";
```
Our training material then uses [Webpack](https://webpack.github.io/), a module bundler, to graph the dependencies and create a build so that this works in browsers that don't yet support some of these features natively.
diff --git a/README.md b/README.md
index 44678f4b5..7ad0968c8 100644
--- a/README.md
+++ b/README.md
@@ -5,13 +5,13 @@ This repo contains the course material for [React Training](https://reacttrainin
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/ReactTraining/react-subjects.git
-$ cd react-subjects
+$ git clone https://github.com/ReactTraining/react-workshop.git
+$ cd react-workshop
$ npm install
$ npm start
```
-Then open your browser to [http://localhost:8080](http://localhost:8080). You should see a list of subjects.
+Your web browser should open to [http://localhost:8080](http://localhost:8080)where you'll see a list of subjects.
**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.
@@ -19,7 +19,7 @@ Then open your browser to [http://localhost:8080](http://localhost:8080). You sh
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,19 +29,19 @@ $ 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 the latest stable version of node 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 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
# If you installed node with nvm (suggested):
-$ sudo rm -rf ~/.npm
+$ sudo rm -rf ~/.npm
# If you installed node with Homebrew:
$ sudo rm -rf /usr/local/lib/node_modules
diff --git a/Syllabus.md b/Syllabus.md
deleted file mode 100644
index 6795dba81..000000000
--- a/Syllabus.md
+++ /dev/null
@@ -1,209 +0,0 @@
-# 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
diff --git a/package.json b/package.json
index f3def1cc2..c55dc9b99 100644
--- a/package.json
+++ b/package.json
@@ -1,71 +1,62 @@
{
- "description": "Course material for http://reacttraining.com",
- "repository": "ReactTraining/react-subjects",
+ "private": true,
+ "name": "react-workshop",
+ "description": "Lectures and exercises for React Training workshops",
+ "repository": "ReactTraining/react-workshop",
+ "homepage": "https://reacttraining.com",
+ "author": "React Training LLC",
"license": "GPL-3.0",
- "authors": [
- "Ryan Florence",
- "Michael Jackson"
- ],
"scripts": {
- "start": "node ./scripts/build.js && webpack-dev-server --inline --content-base subjects",
- "server-exercise": "supervisor -- -r babel-register subjects/ServerRendering/exercise/server.js",
- "server-solution": "supervisor -- -r babel-register subjects/ServerRendering/solution/server.js",
- "start-api": "node api.js",
- "lint": "eslint subjects/**/*.js",
- "test": "npm run lint"
+ "start": "node ./scripts/build.js && webpack-dev-server --inline --content-base public",
+ "ssr-exercise": "supervisor -- -r babel-register 'subjects/14-Server-Rendering/exercise/server.js'",
+ "ssr-solution": "supervisor -- -r babel-register 'subjects/14-Server-Rendering/solution/server.js'"
},
"dependencies": {
"angular": "1.5.8",
- "assert": "1.4.1",
+ "babel-core": "^6.23.1",
"babel-loader": "^6.2.4",
- "babel-plugin-transform-object-assign": "^6.5.0",
- "babel-preset-es2015": "^6.6.0",
+ "babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.5.0",
- "babel-preset-stage-1": "^6.5.0",
+ "babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.9.0",
"backbone": "^1.2.3",
"body-parser": "^1.15.2",
"bootstrap": "^3.3.4",
"bootstrap-webpack": "0.0.5",
+ "create-react-class": "^15.6.3",
"css-loader": "^0.23.1",
"events": "^1.0.2",
- "expect": "^1.13.4",
+ "expect": "^23.0.0",
"exports-loader": "^0.6.3",
- "expose-loader": "^0.7.1",
+ "expose-loader": "0.7.1",
"express": "^4.14.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"firebase": "^2.4.2",
- "flux": "^2.0.1",
"form-serialize": "0.7.1",
- "immstruct": "^2.0.0",
- "immutable": "^3.7.3",
"imports-loader": "0.6.5",
"invariant": "^2.1.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.1.0",
"jsonp": "0.2.0",
- "key-mirror": "^1.0.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
- "match-sorter": "^1.5.0",
"md5": "2.1.0",
- "mkdirp": "^0.5.0",
+ "mkdirp": "^0.5.1",
"mocha": "3.0.2",
"mustache": "^2.2.1",
+ "open-browser-webpack-plugin": "^0.0.5",
+ "prop-types": "^15.5.10",
"purecss": "0.6.0",
- "react": "^15.1.0",
+ "react": "^16.3.2",
"react-addons-css-transition-group": "^15.1.0",
- "react-addons-perf": "^15.1.0",
- "react-addons-test-utils": "^15.1.0",
"react-addons-transition-group": "^15.1.0",
- "react-dom": "^15.1.0",
+ "react-dom": "^16.3.2",
"react-motion": "^0.4.2",
- "react-point": "^2.1.0",
- "react-redux": "^4.4.5",
- "react-router": "^4.0.0-alpha.4",
+ "react-redux": "^5.0.2",
+ "react-router-dom": "^4.0.0",
"react-tween-state": "0.1.5",
- "redux": "3.0.4",
+ "redux": "^3.6.0",
"redux-logger": "2.2.1",
"redux-thunk": "1.0.0",
"sort-by": "^1.1.0",
@@ -76,11 +67,7 @@
"webpack": "^1.7.3",
"webpack-dev-server": "^1.8.0"
},
- "devDependencies": {
- "babel-eslint": "^6.1.2",
- "eslint": "^3.2.2",
- "eslint-import-resolver-webpack": "^0.5.1",
- "eslint-plugin-import": "^1.13.0",
- "eslint-plugin-react": "^6.0.0"
+ "prettier": {
+ "printWidth": 72
}
}
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 000000000..9298d05ce
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/shared.css b/public/shared.css
new file mode 100644
index 000000000..6aaf9ab10
--- /dev/null
+++ b/public/shared.css
@@ -0,0 +1,27 @@
+html {
+ box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+ box-sizing: inherit;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ background: white;
+}
+
+a:link,
+a:visited {
+ color: rebeccapurple;
+ text-decoration: none;
+}
+a:link:hover {
+ text-decoration: underline;
+}
+
+.hot {
+ color: red;
+}
diff --git a/scripts/build.js b/scripts/build.js
index 21f2a12ff..7d1fd6a07 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -1,87 +1,90 @@
-const fs = require('fs')
-const path = require('path')
-const React = require('react')
-const ReactDOMServer = require('react-dom/server')
+const fs = require("fs");
+const path = require("path");
+const mkdirp = require("mkdirp");
+const React = require("react");
+const ReactDOMServer = require("react-dom/server");
-function createMarkup(mainBundle) {
- return ReactDOMServer.renderToStaticMarkup(
- React.DOM.html({},
- React.DOM.head({},
- React.DOM.link({ rel: 'stylesheet', href: '/shared.css' })
- ),
- React.DOM.body({},
- React.DOM.div({ id: 'app' }),
- React.DOM.script({ src: '/__build__/shared.js' }),
- React.DOM.script({ src: '/__build__/' + mainBundle + '.js' })
- )
- )
- )
+function writeFile(file, contents) {
+ mkdirp.sync(path.dirname(file));
+ fs.writeFileSync(file, contents);
}
-const RootDir = path.resolve(__dirname, '..')
-const SubjectsDir = path.join(RootDir, 'subjects')
-
-const Subjects = {
- HelloWorld: 'Hello World',
- Rendering: 'Rendering',
- Components: 'Components',
- PropsVsState: 'Props vs. State',
- ImperativeToDeclarative: 'Imperative to Declarative',
- Forms: 'Forms',
- Testing: 'Testing',
- CompoundComponents: 'Compound Components',
- Context: 'Context',
- HigherOrderComponents: 'Higher Order Components',
- RenderProps: 'Render Props',
- RenderOptimizations: 'Performance and Render Optimizations',
- TweenState: 'TweenState',
- Animation: 'Animation',
- Routing: 'Routing',
- ServerRendering: 'Server Rendering',
- JSONTable: 'JSON Table',
- Select: 'Select',
- Slider: 'Slider',
- Calculator: 'Calculator',
- ChatApp: 'Chat App',
- Cursors: 'Cursors',
- MigratingToReact: 'Migrating to React',
- Redux: 'Redux',
- MiniRedux: 'Implementing Redux'
+function renderPage(element) {
+ return (
+ "" + ReactDOMServer.renderToStaticMarkup(element)
+ );
}
-const SubjectDirNames = Object.keys(Subjects)
+const e = React.createElement;
-const markup = ReactDOMServer.renderToStaticMarkup(
- React.DOM.html({},
- React.DOM.head({},
- React.DOM.link({ rel: 'stylesheet', href: '/shared.css' })
+function HostPage({ chunk, data, title = "React Training" }) {
+ return e(
+ "html",
+ null,
+ e(
+ "head",
+ null,
+ e("meta", { charSet: "utf-8" }),
+ e("meta", {
+ name: "viewport",
+ content: "width=device-width, initial-scale=1"
+ }),
+ e("title", null, title),
+ e("link", { rel: "icon", href: "/favicon.ico?react-workshop" }),
+ e("link", { rel: "stylesheet", href: "/shared.css" }),
+ data &&
+ e("script", {
+ dangerouslySetInnerHTML: {
+ __html: `window.__DATA__ = ${JSON.stringify(data)}`
+ }
+ })
),
- React.DOM.body({ id: 'index' },
- React.DOM.table({ cellSpacing: 0, cellPadding: 0 },
- React.DOM.tbody({},
- SubjectDirNames.map(function (dir, index) {
- return React.DOM.tr({ key: dir, className: (index % 2) ? 'odd' : 'even' },
- React.DOM.td({ className: 'lecture-link' },
- React.DOM.a({ href: '/' + dir + '/lecture.html' }, Subjects[dir])
- ),
- React.DOM.td({ className: 'exercise-link' },
- React.DOM.a({ href: '/' + dir + '/exercise.html' }, 'exercise')
- ),
- React.DOM.td({ className: 'solution-link' },
- React.DOM.a({ href: '/' + dir + '/solution.html' }, 'solution')
- )
- )
- })
- )
- )
+ e(
+ "body",
+ null,
+ e("div", { id: "app" }),
+ e("script", { src: "/shared.js" }),
+ e("script", { src: `/${chunk}.js` })
)
- )
-)
+ );
+}
+
+const publicDir = path.resolve(__dirname, "..", "public");
+const subjectsDir = path.resolve(__dirname, "..", "subjects");
+const subjectDirs = fs
+ .readdirSync(subjectsDir)
+ .map(file => path.join(subjectsDir, file))
+ .filter(file => fs.statSync(file).isDirectory());
+
+const subjects = [];
+
+subjectDirs.forEach(dir => {
+ const base = path.basename(dir);
+ const match = base.match(/^(\d+)-(.+)$/);
+ const subject = {
+ number: match[1],
+ name: match[2].replace(/-/g, " ")
+ };
+
+ ["lecture", "exercise", "solution"].forEach(name => {
+ if (fs.existsSync(path.join(dir, `${name}.js`))) {
+ console.log(`Building /${base}/${name}.html...`);
+
+ writeFile(
+ path.join(publicDir, base, `${name}.html`),
+ renderPage(e(HostPage, { chunk: `${base}-${name}` }))
+ );
+
+ subject[name] = `/${base}/${name}.html`;
+ }
+ });
+
+ subjects.push(subject);
+});
-fs.writeFileSync(path.join(SubjectsDir, 'index.html'), markup)
+console.log(`Building /index.html...`);
-SubjectDirNames.forEach(function (dir) {
- fs.writeFileSync(path.join(SubjectsDir, dir, 'lecture.html'), createMarkup(dir + '-lecture'))
- fs.writeFileSync(path.join(SubjectsDir, dir, 'exercise.html'), createMarkup(dir + '-exercise'))
- fs.writeFileSync(path.join(SubjectsDir, dir, 'solution.html'), createMarkup(dir + '-solution'))
-})
+writeFile(
+ path.join(publicDir, "index.html"),
+ renderPage(e(HostPage, { chunk: "index", data: { subjects } }))
+);
diff --git a/subjects/Flux/Flux.png b/slides/Flux.png
similarity index 100%
rename from subjects/Flux/Flux.png
rename to slides/Flux.png
diff --git a/slides/Redux.gif b/slides/Redux.gif
new file mode 100644
index 000000000..6da63cddc
Binary files /dev/null and b/slides/Redux.gif differ
diff --git a/subjects/.babelrc b/subjects/.babelrc
new file mode 100644
index 000000000..4e73ad6ca
--- /dev/null
+++ b/subjects/.babelrc
@@ -0,0 +1,7 @@
+{
+ "presets": [
+ "env",
+ "stage-2",
+ "react"
+ ]
+}
diff --git a/subjects/HelloWorld/exercise.js b/subjects/00-Hello-World/exercise.js
similarity index 68%
rename from subjects/HelloWorld/exercise.js
rename to subjects/00-Hello-World/exercise.js
index 7c11b17ae..68f67358a 100644
--- a/subjects/HelloWorld/exercise.js
+++ b/subjects/00-Hello-World/exercise.js
@@ -4,11 +4,11 @@
// - change the contents of the render function and save the file
// - see the updates automatically in your browser without refreshing!
////////////////////////////////////////////////////////////////////////////////
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React from "react";
+import ReactDOM from "react-dom";
function App() {
- return
Hello world!
+ return
Hello world!
;
}
-ReactDOM.render(, document.getElementById('app'))
+ReactDOM.render(, document.getElementById("app"));
diff --git a/subjects/00-Hello-World/lecture.js b/subjects/00-Hello-World/lecture.js
new file mode 100644
index 000000000..e73e51b73
--- /dev/null
+++ b/subjects/00-Hello-World/lecture.js
@@ -0,0 +1,382 @@
+import $ from "jquery";
+import { search } from "./utils/searchWikipedia";
+
+const html = `
+
+
Wikipedia
+
+
Loading...
+
+
Results for:
+
+
+
+
+
+
+`;
+
+$("#app").html(html); // <-- component
+
+$("#form")
+ .on("submit", event => {
+ // <-- state change
+ event.preventDefault();
+ const term = $("#input").val(); // <-- state
+ $("#loading").show(); // <-- time
+ $("#meta").hide(); // <-- time
+ $("#results").empty(); // <-- time
+ search(term, (err, results) => {
+ $("#loading").hide(); // <-- time
+ $("#meta").show(); // <-- time
+ $("#title").html(term); // <-- time
+ results.forEach(result => {
+ const li = $("");
+ const html = `
+
+ ${result.title}
+
+
+
+
${result.description}
+
+`;
+ li.html(html); // <-- time
+ if ($("#descending").is(":checked")) {
+ // <-- state
+ li.prependTo($("#results")); // <-- time
+ } else {
+ li.appendTo($("#results")); // <-- time
+ }
+ li.find("button").on("click", () => {
+ // <-- component
+ li.find(".toggler").toggle(); // <-- time
+ const isHidden = li.find(".toggler").is(":hidden"); // <-- state
+ li.find("button").html(isHidden ? "show more" : "hide"); // <-- time
+ });
+ });
+ });
+ })
+ .trigger("submit"); // <-- state change
+
+$("#descending").on("click", event => {
+ // <-- state change
+ $("#results li").each((i, li) => {
+ $("#results").prepend(li); // <-- time
+ });
+});
+
+// What's awesome:
+//
+// I can still bang out this code even after not using jQuery for
+// 4 years.
+//
+// What's not awesome:
+//
+// When our code...
+//
+// - is written as flows
+// - doesn't call out state
+// - has no entry point to change state
+//
+// ...it gets really hard to deal with. After you identify state,
+// and how to change it, you must write code to connect every state
+// to nearly every other state. Every feature requires changes to code
+// in multiple places. Also, it's just too hard to think about for most
+// of us, leading to lots of bugs.
+
+////////////////////////////////////////////////////////////////////////////////
+
+// import Backbone from "backbone";
+// import $ from "jquery";
+// import _ from "underscore";
+// import { search } from "./utils/searchWikipedia";
+
+// const appTemplate = _.template(`
+//
+// <% } %>
+// `),
+
+// events: {
+// "click button": "toggle"
+// },
+
+// initialize() {
+// this.model.set("isOpen", false, { silent: true }); // <-- model ownership?
+// this.listenTo(this.model, "change:isOpen", this.render);
+// },
+
+// toggle() {
+// this.model.set("isOpen", !this.model.get("isOpen")); // <-- KVO web
+// },
+
+// render() {
+// this.$el.html(this.template(this.model.toJSON()));
+// }
+// });
+
+// new AppView({
+// el: "#app",
+// model: new Backbone.Model({
+// title: "Wikipedia",
+// loading: false,
+// term: "tacos",
+// descending: false,
+// results: []
+// })
+// });
+
+// What's awesome
+//
+// - Moved state to models so we can identify what state changes
+// the app.
+// - Moved creating UI into templates, one step closer to being
+// declarative.
+//
+// What's not so awesome
+//
+// - DOM Bombs
+// - kill focus for assistive devices
+// - non-performant
+//
+// - KVO Web
+// - can't predict what will happen if you change state
+// > Events complect communication and flow of control.
+// > ... their fundamental nature, ... is that upon an event
+// > an arbitrary amount of other code is run
+// > http://clojure.com/blog/2013/06/28/clojure-core-async-channels.html
+//
+// - leads to cascading updates
+// - non-performant
+// - to fix leads to knowing how your app changes over time intimately
+//
+// - imperative composition
+// - non-performant
+// - to fix
+// - have to know how your app changes over time intimately
+// - lots of code to manage instances
+// - lots of mistakes
+
+////////////////////////////////////////////////////////////////////////////////
+
+// import angular from "angular";
+// import { search } from "./utils/searchWikipedia";
+
+// document.documentElement.setAttribute("ng-app", "wikipedia");
+
+// document.getElementById("app").innerHTML = `
+//
+// `
+// };
+// });
+
+// What's awesome
+//
+// - fully declarative templates
+// - declarative component composition
+//
+// What's not so awesome
+//
+// - directives and filters are globals
+// - have to think about time with $apply/$watch, etc.
+// - rendering assumptions require you to keep object identity
+// and therefore think about time
+// - and the real kicker: shared mutable state
+//
+// > July 7, 2014
+// >
+// > Vojta brought up some points that we don’t yet have plans to solve
+// > some problems we see in larger apps. In particular, how developers
+// > can reason about data flow within an app.
+// >
+// > Key points: scope hierarchy is a huge pile of shared state that many
+// > components from the application because of two way data-binding it's
+// > not clear what how the data flows because it can flow in all
+// > directions (including from child components to parents) - this makes
+// > it hard to understand the app and understand of impact of model
+// > changes in one part of the app on another (seemingly unrelated) part
+// > of it.
+// https://twitter.com/teozaurus/status/518071391959388160
diff --git a/subjects/HelloWorld/notes.md b/subjects/00-Hello-World/notes.md
similarity index 100%
rename from subjects/HelloWorld/notes.md
rename to subjects/00-Hello-World/notes.md
diff --git a/subjects/00-Hello-World/utils/searchWikipedia.js b/subjects/00-Hello-World/utils/searchWikipedia.js
new file mode 100644
index 000000000..67bc87171
--- /dev/null
+++ b/subjects/00-Hello-World/utils/searchWikipedia.js
@@ -0,0 +1,24 @@
+import jsonp from "jsonp";
+
+const API =
+ "https://en.wikipedia.org/w/api.php?action=opensearch&format=json";
+
+export function search(term, cb) {
+ jsonp(`${API}&search=${term}`, (err, data) => {
+ if (err) {
+ cb(err);
+ } else {
+ const [searchTerm, titles, descriptions, urls] = data;
+ cb(
+ null,
+ titles.sort().map((title, index) => {
+ return {
+ title,
+ description: descriptions[index],
+ url: urls[index]
+ };
+ })
+ );
+ }
+ });
+}
diff --git a/subjects/01-Rendering/exercise.js b/subjects/01-Rendering/exercise.js
new file mode 100644
index 000000000..3cd78f0bb
--- /dev/null
+++ b/subjects/01-Rendering/exercise.js
@@ -0,0 +1,38 @@
+////////////////////////////////////////////////////////////////////////////////
+// Exercise:
+//
+// - Render `DATA.title` in an
+// - Render a
with each of `DATA.items` as an
+// - Now only render an
for mexican food (hint: use DATA.items.filter(...))
+// - Sort the items in alphabetical order by name (hint: use sort-by https://github.com/staygrimm/sort-by#example)
+//
+// Got extra time?
+//
+// - Add a
- )
+ );
}
}
const DATA = [
- { id: 1, name: 'USA', description: 'Land of the Free, Home of the brave' },
- { id: 2, name: 'Brazil', description: 'Sunshine, beaches, and Carnival' },
- { id: 3, name: 'Russia', description: 'World Cup 2018!' }
-]
+ {
+ id: 1,
+ name: "USA",
+ description: "Land of the Free, Home of the brave"
+ },
+ {
+ id: 2,
+ name: "Brazil",
+ description: "Sunshine, beaches, and Carnival"
+ },
+ { id: 3, name: "Russia", description: "World Cup 2018!" }
+];
+
+ReactDOM.render(
+ ,
+ document.getElementById("app")
+);
-ReactDOM.render(, document.getElementById('app'), function () {
- require('./tests').run(this)
-})
+require("./tests").run();
diff --git a/subjects/02-Components/lecture.js b/subjects/02-Components/lecture.js
new file mode 100644
index 000000000..ffb9909bc
--- /dev/null
+++ b/subjects/02-Components/lecture.js
@@ -0,0 +1,70 @@
+import "./styles.css";
+
+import React from "react";
+import ReactDOM from "react-dom";
+
+let isOpen = false;
+
+function handleClick() {
+ isOpen = !isOpen;
+ updateThePage();
+}
+
+function ContentToggle() {
+ let summaryClassName = "content-toggle-summary";
+
+ if (isOpen) {
+ summaryClassName += " content-toggle-summary-open";
+ }
+
+ return (
+
+
+ {isOpen && (
+
+
+ A taco is a traditional Mexican dish composed of a corn or
+ wheat tortilla folded or rolled around a filling.
+
+
+ )}
+
+ );
+}
+
+function updateThePage() {
+ ReactDOM.render(, document.getElementById("app"));
+}
+
+updateThePage();
+
+////////////////////////////////////////////////////////////////////////////////
+// What happens when we want to render 2 s? Shared mutable state!
+
+////////////////////////////////////////////////////////////////////////////////
+// React gives us a component model we can use to encapsulate state at the
+// instance level, so each component instance has its own state. Let's refactor
+// this code to use React components.
+
+////////////////////////////////////////////////////////////////////////////////
+// First, encapsulate the state in an object. Then, add a setState function that
+// we can use to update state and automatically update the page any time it
+// changes.
+
+//////////////////////////////////////////////////////////////////////////////////
+// React gives us setState and automatically re-renders as the state changes.
+
+////////////////////////////////////////////////////////////////////////////////
+// Let's make re-usable and render a few of them. Title and
+// children are properties we can pass in from the parent component.
+
+////////////////////////////////////////////////////////////////////////////////
+// Wrap a few s in a that tracks the # of times
+// it has been toggled and shows a counter. gets an onToggle
+// handler. This is like a "custom event".
+
+////////////////////////////////////////////////////////////////////////////////
+// We can use propTypes to declare the name, type, and even default value of
+// our props. These are like "runnable docs" for our code.
diff --git a/subjects/02-Components/solution.js b/subjects/02-Components/solution.js
new file mode 100644
index 000000000..04311dee9
--- /dev/null
+++ b/subjects/02-Components/solution.js
@@ -0,0 +1,110 @@
+////////////////////////////////////////////////////////////////////////////////
+// Exercise:
+//
+// - Render a tab for each country with its name in the tab
+// - When you click on a tab, make it appear to be active while the others
+// appear inactive
+// - Render the correct content for the selected tab in the panel
+//
+// Got extra time?
+//
+// - Make generic so that it doesn't know anything about
+// country data (Hint: good propTypes help)
+////////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import ReactDOM from "react-dom";
+
+const styles = {};
+
+styles.tab = {
+ display: "inline-block",
+ padding: 10,
+ margin: 10,
+ borderBottom: "4px solid",
+ borderBottomColor: "#ccc",
+ cursor: "pointer"
+};
+
+styles.activeTab = {
+ ...styles.tab,
+ borderBottomColor: "#000"
+};
+
+styles.panel = {
+ padding: 10
+};
+
+class Tabs extends React.Component {
+ state = {
+ activeIndex: 0
+ };
+
+ selectTab(activeIndex) {
+ this.setState({ activeIndex });
+ }
+
+ render() {
+ const { data } = this.props;
+ const { activeIndex } = this.state;
+
+ const tabs = data.map((country, index) => {
+ const isActive = index === activeIndex;
+ const style = isActive ? styles.activeTab : styles.tab;
+
+ return (
+
+// );
+// }
+// }
+
+// ReactDOM.render(, document.getElementById("app"));
+
+//////////////////////////////////////////////////////////////////////////////
+// This is cool, until we screw up the state by clicking the button, then
+// clicking every item to the other state, and then clicking the button again,
+// now that the parent owns the toggle state, we need it know each toggler's
+// state and synchronize it
+
+// class ContentToggle extends React.Component {
+// state = { isOpen: this.props.isOpen };
+
+// handleClick = () => {
+// this.setState({ isOpen: !this.state.isOpen }, () => {
+// if (this.props.onToggle) {
+// this.props.onToggle(this.state.isOpen);
+// }
+// });
+// };
+
+// componentWillReceiveProps(nextProps) {
+// this.setState({ isOpen: nextProps.isOpen });
+// }
+
+// render() {
+// let summaryClassName = "content-toggle-summary";
+
+// if (this.state.isOpen) {
+// summaryClassName += " content-toggle-summary-open";
+// }
+
+// return (
+//
+// );
+// }
+// }
+
+//////////////////////////////////////////////////////////////////////////////
+// Can also write it as a state-less functional component (SFC)
+
+// function ContentToggle(props) {
+// let summaryClassName = "content-toggle-summary";
+
+// if (props.isOpen) {
+// summaryClassName += " content-toggle-summary-open";
+// }
+
+// return (
+//
+//
+//
+// {props.isOpen && props.children}
+//
+//
+// );
+// }
+
+//////////////////////////////////////////////////////////////////////////////
+// - We didn't really get rid of state, we just pushed it up a level
+// - got rid of synchronizing state :)
+// - component is super simple, just a function of its props
+//
+// But its not as portable anymore
+// - Must implement `onToggle` :\
+// - Must manage state in the owner, always :\
+//
+// We can create a controlled component that wraps our pure component.
+
+// class StatefulContentToggle extends React.Component {
+// state = { isOpen: false };
+// render() {
+// return (
+// this.setState({ isOpen })}
+// />
+// );
+// }
+// }
+
+// ReactDOM.render(, document.getElementById("app"));
+
+////////////////////////////////////////////////////////////////////////////////
+// You don't inherit from base classes, you compose by wrapping, just like you
+// compose functions, call one inside of another
diff --git a/subjects/03-Props-vs-State/solution.js b/subjects/03-Props-vs-State/solution.js
new file mode 100644
index 000000000..a205a0bb3
--- /dev/null
+++ b/subjects/03-Props-vs-State/solution.js
@@ -0,0 +1,94 @@
+////////////////////////////////////////////////////////////////////////////////
+// Exercise:
+//
+// Make the "Go to Step 2" button work.
+//
+// In order to do this, you'll have to make tabs a "pure component" so that it
+// no longer manages its own state. Instead add a prop to tell it which tab to
+// show, and then move the state up to the .
+//
+// Also, be sure that clicking on the individual tabs still works.
+////////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+
+import * as styles from "./styles";
+import data from "./data";
+
+class Tabs extends React.Component {
+ static propTypes = {
+ data: PropTypes.array.isRequired,
+ activeIndex: PropTypes.number.isRequired,
+ onChange: PropTypes.func.isRequired
+ };
+
+ selectTab(index) {
+ this.props.onChange(index);
+ }
+
+ renderTabs() {
+ return this.props.data.map((tab, index) => {
+ const style =
+ this.props.activeIndex === index
+ ? styles.activeTab
+ : styles.tab;
+
+ return (
+
+ );
+ }
+}
+
+ReactDOM.render(, document.getElementById("app"));
+
+////////////////////////////////////////////////////////////////////////////////
+// Give the a default value.
+
+// class App extends React.Component {
+// render() {
+// return (
+//
+//
Forms
+//
+//
+// );
+// }
+// }
+
+////////////////////////////////////////////////////////////////////////////////
+// Access the value using event.target.
+
+// class App extends React.Component {
+// handleChange = event => {
+// console.log(event.target.value);
+// };
+
+// render() {
+// return (
+//
+//
Forms
+//
+//
+// );
+// }
+// }
+
+////////////////////////////////////////////////////////////////////////////////
+// Or use a ref.
+
+// class App extends React.Component {
+// handleChange = () => {
+// console.log(this.input.value);
+// };
+
+// render() {
+// return (
+//
+//
Forms
+//
+//
+// );
+// }
+// }
+
+////////////////////////////////////////////////////////////////////////////////
+// Or you can "control" the and have its value in state.
+// What happens if we don't have an `onChange` but provide a value?
+
+// class App extends React.Component {
+// state = {
+// inputValue: "cupcakes"
+// };
+
+// handleChange = () => {
+// this.setState({
+// inputValue: this.input.value
+// });
+// };
+
+// render() {
+// return (
+//
+//
Forms
+//
+//
{JSON.stringify(this.state, null, 2)}
+//
+// );
+// }
+// }
+
+////////////////////////////////////////////////////////////////////////////////
+// When it's controlled, we can setState elsewhere and it stays in sync.
+
+// class App extends React.Component {
+// state = {
+// inputValue: "cupcakes"
+// };
+
+// handleChange = () => {
+// this.setState({
+// inputValue: this.input.value
+// });
+// };
+
+// render() {
+// return (
+//
+//
Forms
+//
+//
{JSON.stringify(this.state, null, 2)}
+//
+// );
+// }
+// }
+
+////////////////////////////////////////////////////////////////////////////////
+// Some forms are transactional, so modeling in state isn't necessary, just
+// use DOM APIs to access the data, like when you need to save off some data
+// somewhere and reset the form, but the values in the form are never
+// important to `render`.
+
+// class App extends React.Component {
+// handleSubmit = event => {
+// event.preventDefault();
+// const values = serializeForm(event.target, { hash: true });
+// console.log(values);
+// };
+
+// render() {
+// return (
+//
+//
Forms
+//
+//
+// );
+// }
+// }
+
+////////////////////////////////////////////////////////////////////////////////
+// If we did want it all in state, we don't have to link up every single
+// element to state, can use