diff --git a/README.md b/README.md
index af39e77..a8bad4a 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,3 @@
Either run locally with `npm install && npm run dev` or use
-Docker and `bin/run`. Connect to `http://localhost:3500`.
+Docker and `bin/run`. Connect to `http://localhost:3500` or
+`http://$(docker-machine ip default):3500`.
diff --git a/dist/presentation.js b/dist/presentation.js
index f1a85b4..5945b86 100644
--- a/dist/presentation.js
+++ b/dist/presentation.js
@@ -45,7 +45,7 @@
/***/ function(module, exports, __webpack_require__) {
__webpack_require__(1);
- module.exports = __webpack_require__(371);
+ module.exports = __webpack_require__(374);
/***/ },
@@ -19490,6 +19490,10 @@
var _slide_list2 = _interopRequireDefault(_slide_list);
+ var _presentation_wrapper = __webpack_require__(376);
+
+ var _presentation_wrapper2 = _interopRequireDefault(_presentation_wrapper);
+
var _stylesScss = __webpack_require__(192);
var _stylesScss2 = _interopRequireDefault(_stylesScss);
@@ -19561,10 +19565,9 @@
key: 'render',
value: function render() {
return _react2['default'].createElement(
- 'div',
- { styleName: 'presentation' },
- _react2['default'].createElement(_slides2['default'], _extends({ slides: _slide_list2['default']
- }, this.state))
+ _presentation_wrapper2['default'],
+ null,
+ _react2['default'].createElement(_slides2['default'], _extends({ slides: _slide_list2['default'] }, this.state))
);
}
}]);
@@ -21693,95 +21696,99 @@
var _slidesLots_of_little_react_icons2 = _interopRequireDefault(_slidesLots_of_little_react_icons);
- var _slidesLots_of_rotating_little_react_icons = __webpack_require__(373);
+ var _slidesLots_of_rotating_little_react_icons = __webpack_require__(351);
var _slidesLots_of_rotating_little_react_icons2 = _interopRequireDefault(_slidesLots_of_rotating_little_react_icons);
- var _slidesBreak_out_containers = __webpack_require__(350);
+ var _slidesBreak_out_containers = __webpack_require__(352);
var _slidesBreak_out_containers2 = _interopRequireDefault(_slidesBreak_out_containers);
- var _slidesCode_breaking_out_containers = __webpack_require__(351);
+ var _slidesCode_breaking_out_containers = __webpack_require__(353);
var _slidesCode_breaking_out_containers2 = _interopRequireDefault(_slidesCode_breaking_out_containers);
- var _slidesA_container = __webpack_require__(353);
+ var _slidesA_container = __webpack_require__(355);
var _slidesA_container2 = _interopRequireDefault(_slidesA_container);
- var _slidesReact014_container_breakout = __webpack_require__(354);
+ var _slidesReact014_container_breakout = __webpack_require__(356);
var _slidesReact014_container_breakout2 = _interopRequireDefault(_slidesReact014_container_breakout);
- var _slidesMove_styles_out_of_global_css = __webpack_require__(355);
+ var _slidesMove_styles_out_of_global_css = __webpack_require__(357);
var _slidesMove_styles_out_of_global_css2 = _interopRequireDefault(_slidesMove_styles_out_of_global_css);
- var _slidesGlobal_styles = __webpack_require__(356);
+ var _slidesGlobal_styles = __webpack_require__(358);
var _slidesGlobal_styles2 = _interopRequireDefault(_slidesGlobal_styles);
- var _slidesScss_local_styles = __webpack_require__(357);
+ var _slidesScss_local_styles = __webpack_require__(359);
var _slidesScss_local_styles2 = _interopRequireDefault(_slidesScss_local_styles);
- var _slidesRendered_local_styles = __webpack_require__(358);
+ var _slidesRendered_local_styles = __webpack_require__(360);
var _slidesRendered_local_styles2 = _interopRequireDefault(_slidesRendered_local_styles);
- var _slidesReact_css_modules = __webpack_require__(359);
+ var _slidesReact_css_modules = __webpack_require__(361);
var _slidesReact_css_modules2 = _interopRequireDefault(_slidesReact_css_modules);
- var _slidesMove_data_loads = __webpack_require__(360);
+ var _slidesMove_data_loads = __webpack_require__(362);
var _slidesMove_data_loads2 = _interopRequireDefault(_slidesMove_data_loads);
- var _slidesData_load_decorator = __webpack_require__(361);
+ var _slidesData_load_decorator = __webpack_require__(363);
var _slidesData_load_decorator2 = _interopRequireDefault(_slidesData_load_decorator);
- var _slidesHigher_order_components = __webpack_require__(362);
+ var _slidesHigher_order_components = __webpack_require__(364);
var _slidesHigher_order_components2 = _interopRequireDefault(_slidesHigher_order_components);
- var _slidesComponent_phase_2 = __webpack_require__(363);
+ var _slidesComponent_phase_2 = __webpack_require__(365);
var _slidesComponent_phase_22 = _interopRequireDefault(_slidesComponent_phase_2);
- var _slidesComponent_phase_3 = __webpack_require__(364);
+ var _slidesComponent_phase_3 = __webpack_require__(366);
var _slidesComponent_phase_32 = _interopRequireDefault(_slidesComponent_phase_3);
- var _slidesComponent_phase_4 = __webpack_require__(365);
+ var _slidesComponent_phase_4 = __webpack_require__(367);
var _slidesComponent_phase_42 = _interopRequireDefault(_slidesComponent_phase_4);
- var _slidesStuff_in_component = __webpack_require__(366);
+ var _slidesStuff_in_component = __webpack_require__(368);
var _slidesStuff_in_component2 = _interopRequireDefault(_slidesStuff_in_component);
- var _slidesAs_part_of_the_app = __webpack_require__(367);
+ var _slidesAs_part_of_the_app = __webpack_require__(369);
var _slidesAs_part_of_the_app2 = _interopRequireDefault(_slidesAs_part_of_the_app);
- var _slidesBasic_guidelines = __webpack_require__(368);
+ var _slidesBasic_guidelines = __webpack_require__(370);
var _slidesBasic_guidelines2 = _interopRequireDefault(_slidesBasic_guidelines);
- var _slidesPush_dom_nodes_down = __webpack_require__(369);
+ var _slidesPush_dom_nodes_down = __webpack_require__(371);
var _slidesPush_dom_nodes_down2 = _interopRequireDefault(_slidesPush_dom_nodes_down);
- var _slidesPush_state_up = __webpack_require__(370);
+ var _slidesPush_state_up = __webpack_require__(372);
var _slidesPush_state_up2 = _interopRequireDefault(_slidesPush_state_up);
- var _slidesThanks = __webpack_require__(374);
+ var _slidesThanks = __webpack_require__(373);
var _slidesThanks2 = _interopRequireDefault(_slidesThanks);
- exports['default'] = [_slidesTitle_slide2['default'], _slidesReact_icon2['default'], _slidesStuff_in_component2['default'], _slidesBig_react_icon2['default'], _slidesLots_of_little_react_icons2['default'], _slidesEs6_warning2['default'], _slidesExample_component2['default'], _slidesWow2['default'], _slidesBreak_out_containers2['default'], _slidesA_container2['default'], _slidesCode_breaking_out_containers2['default'], _slidesReact014_container_breakout2['default'], _slidesMove_styles_out_of_global_css2['default'], _slidesGlobal_styles2['default'], _slidesReact_css_modules2['default'], _slidesScss_local_styles2['default'], _slidesRendered_local_styles2['default'], _slidesMove_data_loads2['default'], _slidesData_load_decorator2['default'], _slidesHigher_order_components2['default'], _slidesComponent_phase_22['default'], _slidesComponent_phase_32['default'], _slidesComponent_phase_42['default'], _slidesAs_part_of_the_app2['default'], _slidesBasic_guidelines2['default'], _slidesPush_dom_nodes_down2['default'], _slidesPush_state_up2['default'], _slidesLots_of_rotating_little_react_icons2['default'], _slidesThanks2['default']];
+ var _slidesCss_is_globals = __webpack_require__(375);
+
+ var _slidesCss_is_globals2 = _interopRequireDefault(_slidesCss_is_globals);
+
+ exports['default'] = [_slidesTitle_slide2['default'], _slidesReact_icon2['default'], _slidesStuff_in_component2['default'], _slidesBig_react_icon2['default'], _slidesLots_of_little_react_icons2['default'], _slidesEs6_warning2['default'], _slidesExample_component2['default'], _slidesWow2['default'], _slidesBreak_out_containers2['default'], _slidesA_container2['default'], _slidesCode_breaking_out_containers2['default'], _slidesReact014_container_breakout2['default'], _slidesMove_styles_out_of_global_css2['default'], _slidesGlobal_styles2['default'], _slidesCss_is_globals2['default'], _slidesReact_css_modules2['default'], _slidesScss_local_styles2['default'], _slidesRendered_local_styles2['default'], _slidesMove_data_loads2['default'], _slidesData_load_decorator2['default'], _slidesHigher_order_components2['default'], _slidesComponent_phase_22['default'], _slidesComponent_phase_32['default'], _slidesComponent_phase_42['default'], _slidesAs_part_of_the_app2['default'], _slidesBasic_guidelines2['default'], _slidesPush_dom_nodes_down2['default'], _slidesPush_state_up2['default'], _slidesLots_of_rotating_little_react_icons2['default'], _slidesThanks2['default']];
module.exports = exports['default'];
/***/ },
@@ -21969,11 +21976,6 @@
_large_text2['default'],
null,
'ES6/ES7 decorators ahead!'
- ),
- _react2['default'].createElement(
- _small_text2['default'],
- null,
- '#babelmasterrace'
)
);
module.exports = exports['default'];
@@ -36181,7 +36183,7 @@
exports['default'] = _react2['default'].createElement(
_slide2['default'],
{ title: 'wow' },
- _react2['default'].createElement('img', { src: 'http://i.stack.imgur.com/aP2dv.gif' })
+ _react2['default'].createElement('img', { src: 'http://i.stack.imgur.com/aP2dv.gif', height: '40%' })
);
module.exports = exports['default'];
@@ -36259,7 +36261,7 @@
var _slide2 = _interopRequireDefault(_slide);
- var _icon_drawer = __webpack_require__(372);
+ var _icon_drawer = __webpack_require__(350);
var _icon_drawer2 = _interopRequireDefault(_icon_drawer);
@@ -36280,859 +36282,6 @@
value: true
});
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var _react = __webpack_require__(3);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _slide = __webpack_require__(191);
-
- var _slide2 = _interopRequireDefault(_slide);
-
- var _large_text = __webpack_require__(202);
-
- var _large_text2 = _interopRequireDefault(_large_text);
-
- exports['default'] = _react2['default'].createElement(
- _slide2['default'],
- { title: 'Break out containers' },
- _react2['default'].createElement(
- _large_text2['default'],
- null,
- 'Break Out Containers'
- )
- );
- module.exports = exports['default'];
-
-/***/ },
-/* 351 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var _react = __webpack_require__(3);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _slide = __webpack_require__(191);
-
- var _slide2 = _interopRequireDefault(_slide);
-
- var _code_large = __webpack_require__(352);
-
- var _code_large2 = _interopRequireDefault(_code_large);
-
- exports['default'] = _react2['default'].createElement(
- _slide2['default'],
- { title: 'Break out the containers' },
- _react2['default'].createElement(
- _code_large2['default'],
- null,
- '\nexport default class NavbarRight extends React.Component {\n render () {\n return (\n \n {this.props.children}\n
\n );\n }\n}\n '
- )
- );
- module.exports = exports['default'];
-
-/***/ },
-/* 352 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
- var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
- function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
- var _react = __webpack_require__(3);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _code_base = __webpack_require__(208);
-
- var _code_base2 = _interopRequireDefault(_code_base);
-
- var CodeLarge = (function (_CodeBase) {
- _inherits(CodeLarge, _CodeBase);
-
- function CodeLarge() {
- _classCallCheck(this, CodeLarge);
-
- _get(Object.getPrototypeOf(CodeLarge.prototype), 'constructor', this).apply(this, arguments);
- }
-
- _createClass(CodeLarge, null, [{
- key: 'defaultProps',
- value: {
- codeClass: 'code-large'
- },
- enumerable: true
- }]);
-
- return CodeLarge;
- })(_code_base2['default']);
-
- exports['default'] = CodeLarge;
- module.exports = exports['default'];
-
-/***/ },
-/* 353 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var _react = __webpack_require__(3);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _slide = __webpack_require__(191);
-
- var _slide2 = _interopRequireDefault(_slide);
-
- var _code_large = __webpack_require__(352);
-
- var _code_large2 = _interopRequireDefault(_code_large);
-
- exports['default'] = _react2['default'].createElement(
- _slide2['default'],
- { title: 'A container' },
- _react2['default'].createElement(
- _code_large2['default'],
- null,
- '\n\n \n
\n '
- )
- );
- module.exports = exports['default'];
-
-/***/ },
-/* 354 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var _react = __webpack_require__(3);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _slide = __webpack_require__(191);
-
- var _slide2 = _interopRequireDefault(_slide);
-
- var _small_text = __webpack_require__(204);
-
- var _small_text2 = _interopRequireDefault(_small_text);
-
- var _code_large = __webpack_require__(352);
-
- var _code_large2 = _interopRequireDefault(_code_large);
-
- exports['default'] = _react2['default'].createElement(
- _slide2['default'],
- { title: 'Break out the containers in React 0.14' },
- _react2['default'].createElement(
- _small_text2['default'],
- null,
- 'React 0.14'
- ),
- _react2['default'].createElement(
- _code_large2['default'],
- null,
- '\nexport default function NavbarRight(props) {\n return (\n \n {props.children}\n
\n );\n}\n '
- )
- );
- module.exports = exports['default'];
-
-/***/ },
-/* 355 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var _react = __webpack_require__(3);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _slide = __webpack_require__(191);
-
- var _slide2 = _interopRequireDefault(_slide);
-
- var _large_text = __webpack_require__(202);
-
- var _large_text2 = _interopRequireDefault(_large_text);
-
- exports['default'] = _react2['default'].createElement(
- _slide2['default'],
- { title: 'Move Styles out of Global CSS' },
- _react2['default'].createElement(
- _large_text2['default'],
- null,
- 'Move styles out of global CSS'
- )
- );
- module.exports = exports['default'];
-
-/***/ },
-/* 356 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var _react = __webpack_require__(3);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _slide = __webpack_require__(191);
-
- var _slide2 = _interopRequireDefault(_slide);
-
- var _code_large = __webpack_require__(352);
-
- var _code_large2 = _interopRequireDefault(_code_large);
-
- exports['default'] = _react2['default'].createElement(
- _slide2['default'],
- { title: 'Global CSS' },
- _react2['default'].createElement(
- _code_large2['default'],
- null,
- '\n.navbar {\n color: green;\n background-color: red;\n}\n\n.navbar-right {\n color: orange;\n opacity: 1.25;\n}\n\n.five-million-others {\n .and-maybe-they-re-nested {\n @include or-autogenerate()\n }\n}\n '
- )
- );
- module.exports = exports['default'];
-
-/***/ },
-/* 357 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var _react = __webpack_require__(3);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _slide = __webpack_require__(191);
-
- var _slide2 = _interopRequireDefault(_slide);
-
- var _code_large = __webpack_require__(352);
-
- var _code_large2 = _interopRequireDefault(_code_large);
-
- exports['default'] = _react2['default'].createElement(
- _slide2['default'],
- { title: 'SCSS Local Styles' },
- _react2['default'].createElement(
- _code_large2['default'],
- null,
- '\n@import \'./global\';\n\n.navbar {\n @extend %navbar;\n\n color: orange;\n opacity: 1.25;\n}\n '
- )
- );
- module.exports = exports['default'];
-
-/***/ },
-/* 358 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var _react = __webpack_require__(3);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _slide = __webpack_require__(191);
-
- var _slide2 = _interopRequireDefault(_slide);
-
- var _code_large = __webpack_require__(352);
-
- var _code_large2 = _interopRequireDefault(_code_large);
-
- exports['default'] = _react2['default'].createElement(
- _slide2['default'],
- { title: 'Rendered react-css-modules CSS' },
- _react2['default'].createElement(
- _code_large2['default'],
- null,
- '\n/* from the @extend */\n.NavbarRight__navbar__abcdef, .others {\n color: green;\n background-color: red;\n}\n\n/* from the style itself */\n.NavbarRight__navbar__abcdef {\n color: orange;\n opacity: 1.25;\n}\n '
- )
- );
- module.exports = exports['default'];
-
-/***/ },
-/* 359 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var _react = __webpack_require__(3);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _slide = __webpack_require__(191);
-
- var _slide2 = _interopRequireDefault(_slide);
-
- var _code_large = __webpack_require__(352);
-
- var _code_large2 = _interopRequireDefault(_code_large);
-
- exports['default'] = _react2['default'].createElement(
- _slide2['default'],
- { title: 'react-css-modules' },
- _react2['default'].createElement(
- _code_large2['default'],
- null,
- '\nimport WithCSS from \'react-css-modules\';\nimport styles from \'./navbar_styling.scss\';\n\n@WithCSS(styles)\nexport default class NavbarRight extends React.Component {\n render () {\n return (\n \n {this.props.children}\n
\n );\n }\n}\n '
- )
- );
- module.exports = exports['default'];
-
-/***/ },
-/* 360 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var _react = __webpack_require__(3);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _slide = __webpack_require__(191);
-
- var _slide2 = _interopRequireDefault(_slide);
-
- var _large_text = __webpack_require__(202);
-
- var _large_text2 = _interopRequireDefault(_large_text);
-
- exports['default'] = _react2['default'].createElement(
- _slide2['default'],
- null,
- _react2['default'].createElement(
- _large_text2['default'],
- null,
- 'Move data loads out of components'
- )
- );
- module.exports = exports['default'];
-
-/***/ },
-/* 361 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var _react = __webpack_require__(3);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _slide = __webpack_require__(191);
-
- var _slide2 = _interopRequireDefault(_slide);
-
- var _code_large = __webpack_require__(352);
-
- var _code_large2 = _interopRequireDefault(_code_large);
-
- exports['default'] = _react2['default'].createElement(
- _slide2['default'],
- { title: 'data-load-decorator' },
- _react2['default'].createElement(
- _code_large2['default'],
- null,
- '\nexport default function WithUserData(Component) {\n return class WithUserData extends React.Component {\n constructor (props) {\n super(props);\n\n this.state = {\n isLoaded: false,\n userData: null\n };\n }\n\n componentWillMount () {\n axios\n .get(`/data/user/${this.props.userID}`)\n .then(({data}) => {\n this.setState({\n userData: data.userData,\n isLoaded: true\n });\n });\n }\n\n render () {\n return ();\n }\n }\n}\n '
- )
- );
- module.exports = exports['default'];
-
-/***/ },
-/* 362 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var _react = __webpack_require__(3);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _slide = __webpack_require__(191);
-
- var _slide2 = _interopRequireDefault(_slide);
-
- var _large_text = __webpack_require__(202);
-
- var _large_text2 = _interopRequireDefault(_large_text);
-
- var _large_text3 = _interopRequireDefault(_large_text);
-
- exports['default'] = _react2['default'].createElement(
- _slide2['default'],
- { title: 'Higher Order Components' },
- _react2['default'].createElement(
- _large_text2['default'],
- null,
- 'Higher Order Components'
- ),
- _react2['default'].createElement(
- _large_text3['default'],
- null,
- '(they will replace mixins in newer React)'
- )
- );
- module.exports = exports['default'];
-
-/***/ },
-/* 363 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var _react = __webpack_require__(3);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _slide = __webpack_require__(191);
-
- var _slide2 = _interopRequireDefault(_slide);
-
- var _large_text = __webpack_require__(202);
-
- var _large_text2 = _interopRequireDefault(_large_text);
-
- var _spacer = __webpack_require__(203);
-
- var _spacer2 = _interopRequireDefault(_spacer);
-
- var _small_text = __webpack_require__(204);
-
- var _small_text2 = _interopRequireDefault(_small_text);
-
- var _code_large = __webpack_require__(352);
-
- var _code_large2 = _interopRequireDefault(_code_large);
-
- exports['default'] = _react2['default'].createElement(
- _slide2['default'],
- { title: 'Component Phase 2' },
- _react2['default'].createElement(
- _code_large2['default'],
- null,
- '\nimport NavbarRight from \'./navbar_right\';\nimport WithUserData from \'./with_user_data\';\n\n@WithUserData\nexport default class UserData extends React.Component {\n render () {\n return (\n \n {!this.props.isLoaded &&\n \n Loading...\n
\n }\n\n {this.props.isLoaded &&\n \n
\n \n {this.props.userData.firstName}\n \n \n {this.props.userData.lastName}\n \n
\n
\n
\n \n {this.props.userData.firstName}\n \n \n {this.props.userData.lastName}\n \n
\n
\n {this.props.children}\n
\n );\n }\n}\n '
+ )
+ );
+ module.exports = exports['default'];
+
+/***/ },
+/* 354 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+ var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+ var _react = __webpack_require__(3);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _code_base = __webpack_require__(208);
+
+ var _code_base2 = _interopRequireDefault(_code_base);
+
+ var CodeLarge = (function (_CodeBase) {
+ _inherits(CodeLarge, _CodeBase);
+
+ function CodeLarge() {
+ _classCallCheck(this, CodeLarge);
+
+ _get(Object.getPrototypeOf(CodeLarge.prototype), 'constructor', this).apply(this, arguments);
+ }
+
+ _createClass(CodeLarge, null, [{
+ key: 'defaultProps',
+ value: {
+ codeClass: 'code-large'
+ },
+ enumerable: true
+ }]);
+
+ return CodeLarge;
+ })(_code_base2['default']);
+
+ exports['default'] = CodeLarge;
+ module.exports = exports['default'];
+
+/***/ },
+/* 355 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+ var _react = __webpack_require__(3);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _slide = __webpack_require__(191);
+
+ var _slide2 = _interopRequireDefault(_slide);
+
+ var _code_large = __webpack_require__(354);
+
+ var _code_large2 = _interopRequireDefault(_code_large);
+
+ exports['default'] = _react2['default'].createElement(
+ _slide2['default'],
+ { title: 'A container' },
+ _react2['default'].createElement(
+ _code_large2['default'],
+ null,
+ '\n\n \n
\n '
+ )
+ );
+ module.exports = exports['default'];
+
+/***/ },
+/* 356 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+ var _react = __webpack_require__(3);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _slide = __webpack_require__(191);
+
+ var _slide2 = _interopRequireDefault(_slide);
+
+ var _small_text = __webpack_require__(204);
+
+ var _small_text2 = _interopRequireDefault(_small_text);
+
+ var _code_large = __webpack_require__(354);
+
+ var _code_large2 = _interopRequireDefault(_code_large);
+
+ exports['default'] = _react2['default'].createElement(
+ _slide2['default'],
+ { title: 'Break out the containers in React 0.14' },
+ _react2['default'].createElement(
+ _small_text2['default'],
+ null,
+ 'React 0.14 Stateless Function Components'
+ ),
+ _react2['default'].createElement(
+ _code_large2['default'],
+ null,
+ '\nexport default function NavbarRight(props) {\n return (\n \n {props.children}\n
\n );\n}\n '
+ )
+ );
+ module.exports = exports['default'];
+
+/***/ },
+/* 357 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+ var _react = __webpack_require__(3);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _slide = __webpack_require__(191);
+
+ var _slide2 = _interopRequireDefault(_slide);
+
+ var _large_text = __webpack_require__(202);
+
+ var _large_text2 = _interopRequireDefault(_large_text);
+
+ exports['default'] = _react2['default'].createElement(
+ _slide2['default'],
+ { title: 'Move Styles out of Global CSS' },
+ _react2['default'].createElement(
+ _large_text2['default'],
+ null,
+ 'Move styles out of global CSS'
+ )
+ );
+ module.exports = exports['default'];
+
+/***/ },
+/* 358 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+ var _react = __webpack_require__(3);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _slide = __webpack_require__(191);
+
+ var _slide2 = _interopRequireDefault(_slide);
+
+ var _code_large = __webpack_require__(354);
+
+ var _code_large2 = _interopRequireDefault(_code_large);
+
+ exports['default'] = _react2['default'].createElement(
+ _slide2['default'],
+ { title: 'Global CSS' },
+ _react2['default'].createElement(
+ _code_large2['default'],
+ null,
+ '\n.navbar {\n color: green;\n background-color: red;\n}\n\n.navbar-right {\n color: orange;\n opacity: 1.25;\n}\n\n.five-million-others {\n .and-maybe-they-re-nested {\n @include or-autogenerate()\n }\n}\n '
+ )
+ );
+ module.exports = exports['default'];
+
+/***/ },
+/* 359 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+ var _react = __webpack_require__(3);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _slide = __webpack_require__(191);
+
+ var _slide2 = _interopRequireDefault(_slide);
+
+ var _code_large = __webpack_require__(354);
+
+ var _code_large2 = _interopRequireDefault(_code_large);
+
+ exports['default'] = _react2['default'].createElement(
+ _slide2['default'],
+ { title: 'SCSS Local Styles' },
+ _react2['default'].createElement(
+ _code_large2['default'],
+ null,
+ '\n@import \'./global\';\n\n.navbar {\n @extend %navbar;\n\n color: orange;\n opacity: 1.25;\n}\n '
+ )
+ );
+ module.exports = exports['default'];
+
+/***/ },
+/* 360 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+ var _react = __webpack_require__(3);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _slide = __webpack_require__(191);
+
+ var _slide2 = _interopRequireDefault(_slide);
+
+ var _code_large = __webpack_require__(354);
+
+ var _code_large2 = _interopRequireDefault(_code_large);
+
+ exports['default'] = _react2['default'].createElement(
+ _slide2['default'],
+ { title: 'Rendered react-css-modules CSS' },
+ _react2['default'].createElement(
+ _code_large2['default'],
+ null,
+ '\n/* from the @extend */\n.NavbarRight__navbar__abcdef, .others {\n color: green;\n background-color: red;\n}\n\n/* from the style itself */\n.NavbarRight__navbar__abcdef {\n color: orange;\n opacity: 1.25;\n}\n '
+ )
+ );
+ module.exports = exports['default'];
+
+/***/ },
+/* 361 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+ var _react = __webpack_require__(3);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _slide = __webpack_require__(191);
+
+ var _slide2 = _interopRequireDefault(_slide);
+
+ var _code_large = __webpack_require__(354);
+
+ var _code_large2 = _interopRequireDefault(_code_large);
+
+ var _small_text = __webpack_require__(204);
+
+ var _small_text2 = _interopRequireDefault(_small_text);
+
+ exports['default'] = _react2['default'].createElement(
+ _slide2['default'],
+ { title: 'react-css-modules' },
+ _react2['default'].createElement(
+ _small_text2['default'],
+ null,
+ _react2['default'].createElement(
+ 'code',
+ null,
+ 'react-css-modules'
+ )
+ ),
+ _react2['default'].createElement(
+ _code_large2['default'],
+ null,
+ '\nimport WithCSS from \'react-css-modules\';\nimport styles from \'./navbar_styling.scss\';\n\n@WithCSS(styles)\nexport default class NavbarRight extends React.Component {\n render () {\n return (\n \n {this.props.children}\n
\n );\n }\n}\n '
+ )
+ );
+ module.exports = exports['default'];
+
+/***/ },
+/* 362 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+ var _react = __webpack_require__(3);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _slide = __webpack_require__(191);
+
+ var _slide2 = _interopRequireDefault(_slide);
+
+ var _large_text = __webpack_require__(202);
+
+ var _large_text2 = _interopRequireDefault(_large_text);
+
+ exports['default'] = _react2['default'].createElement(
+ _slide2['default'],
+ null,
+ _react2['default'].createElement(
+ _large_text2['default'],
+ null,
+ 'Move data loads out of components'
+ )
+ );
+ module.exports = exports['default'];
+
+/***/ },
+/* 363 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+ var _react = __webpack_require__(3);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _slide = __webpack_require__(191);
+
+ var _slide2 = _interopRequireDefault(_slide);
+
+ var _code_large = __webpack_require__(354);
+
+ var _code_large2 = _interopRequireDefault(_code_large);
+
+ exports['default'] = _react2['default'].createElement(
+ _slide2['default'],
+ { title: 'data-load-decorator' },
+ _react2['default'].createElement(
+ _code_large2['default'],
+ null,
+ '\nexport default function WithUserData(Component) {\n return class WithUserData extends React.Component {\n constructor (props) {\n super(props);\n\n this.state = {\n isLoaded: false,\n userData: null\n };\n }\n\n componentWillMount () {\n axios\n .get(`/data/user/${this.props.userID}`)\n .then(({data}) => {\n this.setState({\n userData: data.userData,\n isLoaded: true\n });\n });\n }\n\n render () {\n return ();\n }\n }\n}\n '
+ )
+ );
+ module.exports = exports['default'];
+
+/***/ },
+/* 364 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+ var _react = __webpack_require__(3);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _slide = __webpack_require__(191);
+
+ var _slide2 = _interopRequireDefault(_slide);
+
+ var _large_text = __webpack_require__(202);
+
+ var _large_text2 = _interopRequireDefault(_large_text);
+
+ var _small_text = __webpack_require__(204);
+
+ var _small_text2 = _interopRequireDefault(_small_text);
+
+ exports['default'] = _react2['default'].createElement(
+ _slide2['default'],
+ { title: 'Higher Order Components' },
+ _react2['default'].createElement(
+ _large_text2['default'],
+ null,
+ 'Higher Order Components'
+ ),
+ _react2['default'].createElement(
+ _small_text2['default'],
+ null,
+ '(they will replace mixins in newer React)'
+ )
+ );
+ module.exports = exports['default'];
+
+/***/ },
+/* 365 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+ var _react = __webpack_require__(3);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _slide = __webpack_require__(191);
+
+ var _slide2 = _interopRequireDefault(_slide);
+
+ var _large_text = __webpack_require__(202);
+
+ var _large_text2 = _interopRequireDefault(_large_text);
+
+ var _spacer = __webpack_require__(203);
+
+ var _spacer2 = _interopRequireDefault(_spacer);
+
+ var _small_text = __webpack_require__(204);
+
+ var _small_text2 = _interopRequireDefault(_small_text);
+
+ var _code_large = __webpack_require__(354);
+
+ var _code_large2 = _interopRequireDefault(_code_large);
+
+ exports['default'] = _react2['default'].createElement(
+ _slide2['default'],
+ { title: 'Component Phase 2' },
+ _react2['default'].createElement(
+ _code_large2['default'],
+ null,
+ '\nimport NavbarRight from \'./navbar_right\';\nimport WithUserData from \'./with_user_data\';\n\n@WithUserData\nexport default class UserData extends React.Component {\n render () {\n return (\n \n {!this.props.isLoaded &&\n \n Loading...\n
\n }\n\n {this.props.isLoaded &&\n \n
\n \n {this.props.userData.firstName}\n \n \n {this.props.userData.lastName}\n \n
\n
\n
\n \n {this.props.userData.firstName}\n \n \n {this.props.userData.lastName}\n \n
\n
-
-
+
+
+
);
}
}
diff --git a/src/presentation_wrapper.js b/src/presentation_wrapper.js
new file mode 100644
index 0000000..3864298
--- /dev/null
+++ b/src/presentation_wrapper.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import WithCSS from 'react-css-modules/dist/linkClass';
+
+import styles from './styles.scss';
+
+export default function PresentationWrapper(props) {
+ return WithCSS(
+ {props.children}
,
+ styles
+ );
+}
diff --git a/src/slide_list.js b/src/slide_list.js
index 0b88edf..66f6b73 100644
--- a/src/slide_list.js
+++ b/src/slide_list.js
@@ -29,6 +29,7 @@ import BasicGuidelines from './slides/basic_guidelines';
import PushDOMNodesDown from './slides/push_dom_nodes_down';
import PushStateUp from './slides/push_state_up';
import Thanks from './slides/thanks';
+import CSSIsGlobals from './slides/css_is_globals';
export default [
TitleSlide,
@@ -45,6 +46,7 @@ export default [
React014ContainerBreakout,
MoveStylesOutOfGlobalCSS,
GlobalStyles,
+ CSSIsGlobals,
ReactCSSModules,
SCSSLocalStyles,
RenderedLocalStyles,
diff --git a/src/slides/css_is_globals.js b/src/slides/css_is_globals.js
new file mode 100644
index 0000000..4184bc2
--- /dev/null
+++ b/src/slides/css_is_globals.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import Slide from '../slide';
+import LargeText from '../large_text';
+import SmallText from '../small_text';
+
+export default (
+
+ Globals!
+ and globals are usually bad
+
+);
diff --git a/src/slides/es6_warning.js b/src/slides/es6_warning.js
index b1dae85..3740296 100644
--- a/src/slides/es6_warning.js
+++ b/src/slides/es6_warning.js
@@ -6,6 +6,5 @@ import SmallText from '../small_text';
export default (
ES6/ES7 decorators ahead!
- #babelmasterrace
);
diff --git a/src/slides/higher_order_components.js b/src/slides/higher_order_components.js
index 986cd53..6aa5293 100644
--- a/src/slides/higher_order_components.js
+++ b/src/slides/higher_order_components.js
@@ -1,7 +1,7 @@
import React from 'react';
import Slide from '../slide';
import LargeText from '../large_text';
-import SmallText from '../large_text';
+import SmallText from '../small_text';
export default (
diff --git a/src/slides/push_dom_nodes_down.js b/src/slides/push_dom_nodes_down.js
index 96fd51d..7a21604 100644
--- a/src/slides/push_dom_nodes_down.js
+++ b/src/slides/push_dom_nodes_down.js
@@ -2,11 +2,14 @@ import React from 'react';
import Slide from '../slide';
import LargeText from '../large_text';
import SmallText from '../small_text';
+import Spacer from '../spacer';
export default (
Push DOM Nodes Down
...by making containers
...by moving prop renderers deeper
+
+ (this applies to React Native, too!)
);
diff --git a/src/slides/react014_container_breakout.js b/src/slides/react014_container_breakout.js
index 471a14b..75d4c7b 100644
--- a/src/slides/react014_container_breakout.js
+++ b/src/slides/react014_container_breakout.js
@@ -5,7 +5,7 @@ import CodeLarge from '../code_large';
export default (
- React 0.14
+ React 0.14 Stateless Function Components
{`
export default function NavbarRight(props) {
return (
diff --git a/src/slides/react_css_modules.js b/src/slides/react_css_modules.js
index 928858f..8090f9e 100644
--- a/src/slides/react_css_modules.js
+++ b/src/slides/react_css_modules.js
@@ -1,9 +1,11 @@
import React from 'react';
import Slide from '../slide';
import CodeLarge from '../code_large';
+import SmallText from '../small_text';
export default (
+ react-css-modules
{`
import WithCSS from 'react-css-modules';
import styles from './navbar_styling.scss';
diff --git a/src/slides/wow.js b/src/slides/wow.js
index 75a9a45..f13908b 100644
--- a/src/slides/wow.js
+++ b/src/slides/wow.js
@@ -3,6 +3,6 @@ import Slide from '../slide';
export default (
- 
+
);
diff --git a/src/styles.scss b/src/styles.scss
index fdd95e8..1fb542b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -32,7 +32,7 @@
.small-text {
@extend %font;
- font-size: 2em;
+ font-size: 2.75em;
font-weight: 400;
}
@@ -43,11 +43,11 @@
.code {
@extend %code;
- font-size: 0.75em;
+ font-size: 1em;
}
.code-large {
@extend %code;
- font-size: 1.35em;
+ font-size: 1.4em;
}
diff --git a/webpack.config.js b/webpack.config.js
index dec9e5a..3e76b3b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -14,6 +14,7 @@ module.exports = {
},
devtool: 'inline-source-map',
watchOptions: {
+ poll: true,
aggregateTimeout: 1000
},
module: {