Welcome!

Author: ryanflorence

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "eight-k"
+  }
+}

.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+public/flex.jpg

README.md

@@ -0,0 +1,104 @@
+# Welcome to React Training!
+
+This repo contains the course material for [React Training](https://reacttraining.com/). Before attending the training, please make sure you can run this repository.
+
+## Install
+
+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/hooks-workshop.git
+$ cd hooks-workshop
+$ npm install
+$ npm start
+```
+
+You'll be prompted with the exercise you'd like to run, hit "0" to view the full app we'll be working in, then, open a web browser to [http://localhost:300](http://localhost:3000).
+
+```
+$ npm start
+
+> [email protected] start ../hooks-workshop
+> node scripts/start.js
+
+Which exercise?
+
+[1] 01-rendering
+[2] 02-state
+[3] 03-controlled-components
+[4] 04-effects
+[5] 05-data-loading
+[6] 06-data-flow
+[7] 07-compound-components
+[8] 08-app-state
+[9] 09-flicker
+[a] 10-the-feed
+[b] 11-animation
+[c] 12-optimization
+[0] THE FULL APP!
+
+Choose one from list [1...9, a, b, c, 0]:
+```
+
+## Updating
+
+If you've already cloned the repo but you need to get updated code, then follow these steps:
+
+- First, `cd` into the root directory of the repo
+- Then do an `ls` command to ensure you see a `package.json` file listed. If you don't you're not in the root folder of the repo
+- Clear out any dirty files in your git working tree (`git stash` is a safe way to do it, `git reset ---hard` is how to live dangerously)
+- Then run these steps to get the updates:
+
+```sh
+git pull origin master
+npm install
+```
+
+Then you should be able to do your `npm start` again.
+
+## Be Prepared
+
+**IMPORTANT:** Please read our [JavaScript Primer](https://reacttraining.com/blog/javascript-the-react-parts/) 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.
+
+### Windows Machine?
+
+We'll be running commands like the ones from the install/update instructions above. These are _bash_ commands which means if you're on Windows you'll need a bash-enabled command-line tool. If you've installed [Git For Windows](https://gitforwindows.org) then you'll have a command-line tool called Git Bash already. This seems to work out well for doing other bash things that aren't just git specific (like npm).
+
+## 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`:
+
+```sh
+$ git config --global url."https://".insteadOf git://
+
+# This adds the following to your `~/.gitconfig`:
+[url "https://"]
+  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:
+
+```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.
+
+```sh
+$ sudo rm -rf node_modules
+
+# If you installed node with nvm (suggested):
+$ sudo rm -rf ~/.npm
+
+# If you installed node with Homebrew:
+$ 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]](mailto:[email protected]).

Syllabus.md

@@ -0,0 +1,57 @@
+# React Hooks Workshop
+
+## The Lessons
+
+Day 1
+
+- Rendering and Components
+- State
+- Controlled Components
+- Effects
+- Data Loading/subscriptions, custom hooks
+- Data flow, custom events
+
+Day 2
+
+- Compound Components (Tabs, DateFields)
+- useReducer and Context for App Data (useContext)
+- Avoiding flicker (useStateWithCache, useAppState)
+- Bringing it all together with pagination on the Feed page (do all local state, cause you don't want to render 3 and then reorder--gross!)
+- Animation (useCallback on AnimatedText, useTween, AnimatedDialog, coin)
+- Optimizations
+- Review
+
+## Workshop Objectives
+
+After completing, attendees will:
+
+- Have an advanced understanding of building UI with React
+
+  - Composing UI elements
+  - Composing State
+  - Composing Behaviors (side-effects)
+
+- Be able to put together an entire application with
+
+  - Data loading
+  - Routing
+  - Authentication
+
+- Be able to build a data loading strategy
+
+  - Fetch
+  - Realtime
+  - caching
+  - pagination
+
+- Be able to build advanced interactions with
+
+  - Animation
+  - Keyboard support
+  - Assistive Tech (screen reader) Support
+
+- Be able to manage side-effects
+
+  - Document title
+  - Session Storage
+  - Web audio

anatomy.md

@@ -0,0 +1,40 @@
+The anatomy of a React Application:
+
+1. User Interface
+2. Events
+3. State
+   - Persistent
+   - Implicit
+   - Explicit
+4. Effects
+5. Optimizations
+
+Primitives:
+
+1. User Interface
+
+   - Rendering Targets (ReactDOM)
+   - Elements and Components
+   - useRef
+
+2. Events
+
+   - built-in
+   - custom
+
+3. State
+
+   - useState
+   - useReducer
+   - props
+   - cloneElement
+   - context
+
+4. Effects
+
+   - useEffect
+
+5. Optimizations
+   - memo
+   - useMemo
+   - useCallback

config/env.js

@@ -0,0 +1,93 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+var dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv-expand')(
+      require('dotenv').config({
+        path: dotenvFile,
+      })
+    );
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebook/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in Webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+      }
+    );
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
+  };
+
+  return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;

config/jest/cssTransform.js

@@ -0,0 +1,14 @@
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

config/jest/fileTransform.js

@@ -0,0 +1,31 @@
+'use strict';
+
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      return `const React = require('react');
+      module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: React.forwardRef((props, ref) => ({
+          $$typeof: Symbol.for('react.element'),
+          type: 'svg',
+          ref: ref,
+          key: null,
+          props: Object.assign({}, props, {
+            children: ${assetFilename}
+          })
+        })),
+      };`;
+    }
+
+    return `module.exports = ${assetFilename};`;
+  },
+};