Lesson 10 Examples, Exercises, Activity starter

Author: HugoDF

Lesson10/.editorconfig

@@ -0,0 +1,31 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# The JSON files contain newlines inconsistently
+[*.json]
+insert_final_newline = ignore
+
+# Minified JavaScript files shouldn't be changed
+[**.min.js]
+indent_style = ignore
+insert_final_newline = ignore
+
+# Makefiles always use tabs for indentation
+[Makefile]
+indent_style = tab
+
+# Batch files use tabs for indentation
+[*.bat]
+indent_style = tab
+
+[*.md]
+trim_trailing_whitespace = false
+

Lesson10/.gitignore

@@ -0,0 +1,89 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+dist

Lesson10/01-first-class/.babelrc

@@ -0,0 +1,10 @@
+{
+    "presets": [
+        "@babel/preset-react"
+    ],
+    "plugins": [
+        [
+            "transform-class-properties"
+        ]
+    ]
+}

Lesson10/01-first-class/.gitignore

@@ -0,0 +1,89 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+dist

Lesson10/01-first-class/example-1-functions-as-values.js

@@ -0,0 +1,32 @@
+// A function can be assigned to a variable
+const fn = function run() {
+  return 'Running...';
+};
+
+// A function can be set as
+// a value in an Array
+const operations = [
+  fn,
+  function() {
+    console.log('Regular functions work');
+  },
+  () => console.log('Arrows work too')
+];
+
+// A function can be set as a
+// value in an object
+const Module = {
+  // With ES6 shorthand property
+  fn,
+  method1() {},
+  arrow: () => console.log('works too')
+};
+
+console.assert(Module.fn() === 'Running...');
+
+// A function can be passed as an argument
+function runner(fn) {
+  return fn();
+}
+
+console.assert(runner(fn) === 'Running...');

Lesson10/01-first-class/example-10-this-react-issues.html

@@ -0,0 +1,2 @@
+<div id="app"></div>
+<script src="./example-10-this-react-issues.js">

Lesson10/01-first-class/example-10-this-react-issues.js

@@ -0,0 +1,66 @@
+// Run with
+// npm run serve example-10-this-react-issues.html
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class Child extends React.Component {
+  render() {
+    return <div>
+      <p><button onClick={() => this.props.withInlineBind('inline-bind')}>inline bind</button></p>
+      <p><button onClick={() => this.props.withConstructorBind('constructor-bind')}>constructor bind</button></p>
+      <p><button onClick={() => this.props.withArrowProperty('arrow-property')}>arrow property</button></p>
+    </div>;
+  }
+}
+
+class Parent extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      display: 'default'
+    };
+
+    this.withConstructorBind = this.withConstructorBind.bind(this);
+  }
+
+  // check the render() function
+  // for the .bind()
+  withInlineBind(value) {
+    this.setState({
+      display: value
+    })
+  }
+
+  // check the constructor() function
+  // for the .bind()
+  withConstructorBind(value) {
+    this.setState({
+      display: value
+    })
+  }
+
+  // works as is but needs
+  // an experimental JavaScript feature
+  withArrowProperty = (value) => {
+    this.setState({
+      display: value
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <p>{this.state.display}</p>
+        <Child
+          withInlineBind={this.withInlineBind.bind(this)}
+          withConstructorBind={this.withConstructorBind}
+          withArrowProperty={this.withArrowProperty}
+          />
+
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Parent />, document.querySelector('#app'));

Lesson10/01-first-class/example-2-inversion-of-control.js

@@ -0,0 +1,17 @@
+function getData(transport) {
+  return transport('https://hello-world-micro.glitch.me').then(res => res.text())
+}
+
+// in some server-side code
+const axios = require('axios');
+const axiosWithServerHeaders = axios.create({
+  headers: { Authorization: 'Server-side allowed' }
+});
+getData(axiosWithServerHeaders);
+
+// in some client-side code
+import axios from 'axios';
+const axiosWithCookies = axios.create({
+  withCredentials: true
+})
+getData(axiosWithCookies);

Lesson10/01-first-class/example-3-add-event-listener.js

@@ -0,0 +1,7 @@
+// Run this in your browser console
+
+document.addEventListener('scroll', () => {
+  console.log('Scrolling...');
+});
+
+// See what happens when you scroll

Lesson10/01-first-class/example-4-fs-readdir-callback.js

@@ -0,0 +1,13 @@
+const fs = require('fs');
+
+fs.readdir('.', (err, data) => {
+  // Shouldn't error
+  console.assert(Boolean(data));
+  console.assert(!err);
+});
+
+fs.readdir('/tmp/nonexistent', (err, data) => {
+  // Should error
+  console.assert(!data);
+  console.assert(Boolean(err));
+});