diff --git a/01 - Core/08 - Transferring Props.js b/01 - Core/08 - Transferring Props.js index 9b56475..41616b1 100644 --- a/01 - Core/08 - Transferring Props.js +++ b/01 - Core/08 - Transferring Props.js @@ -78,4 +78,62 @@ class App { return
{fancyButton}
; } -} \ No newline at end of file +} + + +// Vanilla JS: +// While rest and spread operators are being waited on (https://gist.github.com/sebmarkbage/aa849c7973cb4452c547) +// And while we wait on shims, simple helper methods and array destructuring can be used: + +class FancyButton { + + static defaultProps = { + color: 'blue' + }; + + props: { + color: string, + width: number, + height: number, + ...HTMLPropTypes + }, + + // This uses rest and spread operators + // https://gist.github.com/sebmarkbage/aa849c7973cb4452c547 + + render(props, state) { + + var [{color}, {className}, {style}, {width}, {height}, ...other] = arryFromProps(props); + + var button = React.DOM.button( + propsFromArray([ + ...other, + ['className', joinClasses(className, 'FancyButton')], + ['padding', 10], + ['width', width - 10], + ['height', height - 10] + ]) + ); + + return button; + } + +} + +// further a mixin could be used to do arrayFromProps automatically. + +// Implementations of Helper Methods. +function arrayFromProps(props){ + var array = []; + // this uses the for-of loop, but it could easily be implemented otherwise. + for ([key, value] of props) { + array.push([key, value]); + } + return array; +} + +function propsFromArray(array){ + return array.reduce((obj, prop) => { + obj[prop[0]] = obj[1]; + }, {}) +} diff --git a/04 - Layout/01 - Primitives.js b/04 - Layout/01 - Primitives.js index 963c756..102bb0a 100644 --- a/04 - Layout/01 - Primitives.js +++ b/04 - Layout/01 - Primitives.js @@ -13,8 +13,8 @@ class Fragment { // Position its content with an offset of `x` and `y` class Positioner { - render() { - var { x, y, children } = this.props; + render(props) { + var { x, y, children } = props; return (
{children} @@ -25,8 +25,8 @@ class Positioner { // Paint a box with size `width` and `height` class Box { - render() { - var { width, height } = this.props; + render(props) { + var { width, height } = props; return (
{children} diff --git a/04 - Layout/02 - Layout Components.js b/04 - Layout/02 - Layout Components.js index aad2920..fdeb254 100644 --- a/04 - Layout/02 - Layout Components.js +++ b/04 - Layout/02 - Layout Components.js @@ -68,5 +68,8 @@ class VerticalListItem { return { layoutHeight: this.props.height }; + + // Chrome is trying deliver an API to measure the size Nodes, + // by rendering them outside the DOM, that should be kept in mind here. } } diff --git a/04 - Layout/04 - Inline Styles.md b/04 - Layout/04 - Inline Styles.md index 6a36627..84a3bfb 100644 --- a/04 - Layout/04 - Inline Styles.md +++ b/04 - Layout/04 - Inline Styles.md @@ -95,3 +95,19 @@ var List = React.createClass({ ``` + +## Drawbacks + +This approach will generally result in much better rendering performance, as it removes stylesheet complexity. However it does have a few shortcomings/challenges. + +There are many CSS properties that simply cannot be applied with inline styles. This includes all pseudo selectors (:hover, :focus, :active, etc) as well as pseudo-elements. + +Various states, like :hover, :focus can be worked around with javascript event handlers. This has the downside of relying on javascript. + +Other pseudo selectors, such as, :first-child, nth-child, etc, can be easily accounted for with javascript and actually helps with a better API. + +Pseudo elements (such as ::before, ::after) are simply impossible to achieve with inline-styles, but at the same time, strictly speaking, it should always be possible to replace them with real elements. The downside here, is that we may lose the semantic structure of the DOM because of this. + +To summarize, the major drawbacks are +— Dependence on JS for :hover, :active etc. +- Losing the semantic benefits of Pseudo elements by using real elements