├── .eslintrc ├── .gitignore ├── LICENSE ├── README.md ├── examples ├── app-client.js ├── app.js └── server.js ├── package.json └── source └── hello.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | 4 | "env": { 5 | "browser": true, 6 | "node": true, 7 | "es6": true 8 | }, 9 | 10 | "ecmaFeatures": { 11 | "arrowFunctions": true, 12 | "binaryLiterals": true, 13 | "blockBindings": true, 14 | "classes": false, 15 | "defaultParams": true, 16 | "destructuring": true, 17 | "forOf": true, 18 | "generators": true, 19 | "modules": true, 20 | "objectLiteralComputedProperties": true, 21 | "objectLiteralDuplicateProperties": true, 22 | "objectLiteralShorthandMethods": true, 23 | "objectLiteralShorthandProperties": true, 24 | "octalLiterals": true, 25 | "regexUFlag": true, 26 | "regexYFlag": true, 27 | "spread": true, 28 | "superInFunctions": false, 29 | "templateStrings": true, 30 | "unicodeCodePointEscapes": true, 31 | "globalReturn": true, 32 | "jsx": true 33 | }, 34 | 35 | "rules": { 36 | "block-scoped-var": [0], 37 | "brace-style": [2, "1tbs", { "allowSingleLine": true }], 38 | "camelcase": [0], 39 | "comma-dangle": [2, "never"], 40 | "comma-spacing": [2], 41 | "comma-style": [2, "last"], 42 | "complexity": [0, 11], 43 | "consistent-return": [2], 44 | "consistent-this": [0, "that"], 45 | "curly": [2, "multi-line"], 46 | "default-case": [2], 47 | "dot-notation": [2, { "allowKeywords": true }], 48 | "eol-last": [2], 49 | "eqeqeq": [2], 50 | "func-names": [0], 51 | "func-style": [0, "declaration"], 52 | "generator-star-spacing": [2, "after"], 53 | "strict": 0, 54 | "guard-for-in": [0], 55 | "handle-callback-err": [0], 56 | "key-spacing": [2, { "beforeColon": false, "afterColon": true }], 57 | "quotes": [2, "single", "avoid-escape"], 58 | "max-depth": [0, 4], 59 | "max-len": [0, 80, 4], 60 | "max-nested-callbacks": [0, 2], 61 | "max-params": [0, 3], 62 | "max-statements": [0, 10], 63 | "new-parens": [2], 64 | "new-cap": [0], 65 | "newline-after-var": [0], 66 | "no-alert": [2], 67 | "no-array-constructor": [2], 68 | "no-bitwise": [0], 69 | "no-caller": [2], 70 | "no-catch-shadow": [2], 71 | "no-cond-assign": [2], 72 | "no-console": [0], 73 | "no-constant-condition": [1], 74 | "no-continue": [2], 75 | "no-control-regex": [2], 76 | "no-debugger": [2], 77 | "no-delete-var": [2], 78 | "no-div-regex": [0], 79 | "no-dupe-args": [2], 80 | "no-dupe-keys": [2], 81 | "no-duplicate-case": [2], 82 | "no-else-return": [0], 83 | "no-empty": [2], 84 | "no-empty-class": [2], 85 | "no-empty-label": [2], 86 | "no-eq-null": [0], 87 | "no-eval": [2], 88 | "no-ex-assign": [2], 89 | "no-extend-native": [1], 90 | "no-extra-bind": [2], 91 | "no-extra-boolean-cast": [2], 92 | "no-extra-parens": [0], 93 | "no-extra-semi": [1], 94 | "no-extra-strict": [2], 95 | "no-fallthrough": [2], 96 | "no-floating-decimal": [2], 97 | "no-func-assign": [2], 98 | "no-implied-eval": [2], 99 | "no-inline-comments": [0], 100 | "no-inner-declarations": [2, "functions"], 101 | "no-invalid-regexp": [2], 102 | "no-irregular-whitespace": [2], 103 | "no-iterator": [2], 104 | "no-label-var": [2], 105 | "no-labels": [2], 106 | "no-lone-blocks": [2], 107 | "no-lonely-if": [2], 108 | "no-loop-func": [2], 109 | "no-mixed-requires": [0, false], 110 | "no-mixed-spaces-and-tabs": [2, false], 111 | "no-multi-spaces": [2], 112 | "no-multi-str": [2], 113 | "no-multiple-empty-lines": [2, { "max": 2 }], 114 | "no-native-reassign": [1], 115 | "no-negated-in-lhs": [2], 116 | "no-nested-ternary": [0], 117 | "no-new": [2], 118 | "no-new-func": [2], 119 | "no-new-object": [2], 120 | "no-new-require": [0], 121 | "no-new-wrappers": [2], 122 | "no-obj-calls": [2], 123 | "no-octal": [2], 124 | "no-octal-escape": [2], 125 | "no-param-reassign": [2], 126 | "no-path-concat": [0], 127 | "no-plusplus": [0], 128 | "no-process-env": [0], 129 | "no-process-exit": [2], 130 | "no-proto": [2], 131 | "no-redeclare": [2], 132 | "no-regex-spaces": [2], 133 | "no-reserved-keys": [0], 134 | "no-restricted-modules": [0], 135 | "no-return-assign": [2], 136 | "no-script-url": [2], 137 | "no-self-compare": [0], 138 | "no-sequences": [2], 139 | "no-shadow": [2], 140 | "no-shadow-restricted-names": [2], 141 | "no-space-before-semi": [2], 142 | "no-spaced-func": [2], 143 | "no-sparse-arrays": [2], 144 | "no-sync": [0], 145 | "no-ternary": [0], 146 | "no-throw-literal": [2], 147 | "no-trailing-spaces": [2], 148 | "no-undef": [2], 149 | "no-undef-init": [2], 150 | "no-undefined": [0], 151 | "no-underscore-dangle": [2], 152 | "no-unreachable": [2], 153 | "no-unused-expressions": [2], 154 | "no-unused-vars": [1, { "vars": "all", "args": "after-used" }], 155 | "no-use-before-define": [2], 156 | "no-void": [0], 157 | "no-warning-comments": [0, { "terms": ["todo", "fixme", "xxx"], "location": "start" }], 158 | "no-with": [2], 159 | "no-wrap-func": [2], 160 | "one-var": [0], 161 | "operator-assignment": [0, "always"], 162 | "operator-linebreak": [2, "after"], 163 | "padded-blocks": [0], 164 | "quote-props": [0], 165 | "radix": [0], 166 | "semi": [2], 167 | "semi-spacing": [2, { "before": false, "after": true }], 168 | "sort-vars": [0], 169 | "space-after-keywords": [2, "always"], 170 | "space-before-function-paren": [2, { "anonymous": "always", "named": "always" }], 171 | "space-before-blocks": [0, "always"], 172 | "space-in-brackets": [0, "never", { 173 | "singleValue": true, 174 | "arraysInArrays": false, 175 | "arraysInObjects": false, 176 | "objectsInArrays": true, 177 | "objectsInObjects": true, 178 | "propertyName": false 179 | }], 180 | "space-in-parens": [2, "never"], 181 | "space-infix-ops": [2], 182 | "space-return-throw-case": [2], 183 | "space-unary-ops": [2, { "words": true, "nonwords": false }], 184 | "spaced-line-comment": [0, "always"], 185 | "strict": [1], 186 | "use-isnan": [2], 187 | "valid-jsdoc": [0], 188 | "valid-typeof": [2], 189 | "vars-on-top": [0], 190 | "wrap-iife": [2], 191 | "wrap-regex": [2], 192 | "yoda": [2, "never", { "exceptRange": true }] 193 | } 194 | } 195 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Eric Elliott 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-hello 2 | 3 | > A hello world example React app 4 | 5 | Based off of Eric Elliott's [react-hello](https://github.com/ericelliott/react-hello), this alteration uses [react-stampit](https://github.com/stampit-org/react-stampit) to create components. 6 | -------------------------------------------------------------------------------- /examples/app-client.js: -------------------------------------------------------------------------------- 1 | /* global React */ 2 | 3 | import helloFactory from '../source/hello'; 4 | 5 | const Hello = helloFactory(React); 6 | 7 | let word = 'world'; 8 | let mode = 'display'; 9 | let render; 10 | 11 | const actions = { 12 | setWord (w) { 13 | word = w; 14 | render(); 15 | }, 16 | 17 | setMode (m) { 18 | mode = m; 19 | render(); 20 | }, 21 | }; 22 | 23 | render = () => { 24 | React.render( 25 | , 30 | document.getElementById('content') 31 | ); 32 | }; 33 | 34 | render(); 35 | -------------------------------------------------------------------------------- /examples/app.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import path from 'path'; 3 | 4 | let app = express(); 5 | 6 | const staticPath = path.resolve('build/'); 7 | 8 | app.get('/', (req, res) => { 9 | res.send(` 10 | 11 | 12 | 13 | Hello 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | `); 23 | }); 24 | 25 | app.use(express.static(staticPath)); 26 | 27 | export default app; 28 | -------------------------------------------------------------------------------- /examples/server.js: -------------------------------------------------------------------------------- 1 | import app from './app'; 2 | import http from 'http'; 3 | 4 | const port = process.env.port || 2222; 5 | 6 | let server = http.createServer(app); 7 | 8 | server.listen(port, () => { 9 | console.log(`Listening on port ${ port }`); 10 | }); 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-hello", 3 | "version": "1.0.0", 4 | "description": "A hello world example React app", 5 | "main": "build/hello.js", 6 | "scripts": { 7 | "clean": "rm -rf build && mkdir build", 8 | "lint": "eslint source && eslint examples", 9 | "build": "npm run clean && browserify -s appClient examples/app-client.js -t babelify > build/app-client.js", 10 | "test": "echo 'No tests defined!'", 11 | "check": "npm run lint && npm run build && npm test", 12 | "start": "npm run check && babel-node examples/server.js", 13 | "validate": "npm run check && npm outdated --depth 0" 14 | }, 15 | "pre-commit": [ 16 | "validate" 17 | ], 18 | "keywords": [ 19 | "react", 20 | "component", 21 | "user profile" 22 | ], 23 | "authors": [ 24 | "Eric Elliott", 25 | "Tim Routowicz" 26 | ], 27 | "license": "MIT", 28 | "devDependencies": { 29 | "babel": "^6.5.2", 30 | "babel-eslint": "^7.1.0", 31 | "babelify": "^7.3.0", 32 | "browserify": "^13.1.1", 33 | "eslint": "^3.10.2", 34 | "eslint-plugin-react": "^6.7.1", 35 | "express": "^4.12.4", 36 | "pre-commit": "^1.0.7" 37 | }, 38 | "dependencies": { 39 | "lodash": "^4.17.1", 40 | "prop-types": "^0.2.0", 41 | "react-stampit": "^0.9.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /source/hello.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import stampit from 'react-stampit'; 3 | 4 | const { 5 | string, 6 | func 7 | } = PropTypes; 8 | 9 | export default React => stampit(React, { 10 | propTypes: { 11 | actions: PropTypes.shape({ 12 | setWord: func.isRequired, 13 | setMode: func.isRequired, 14 | }), 15 | mode: string, 16 | word: string, 17 | }, 18 | 19 | componentDidUpdate () { 20 | this.refs.wordInput.getDOMNode().focus(); 21 | }, 22 | 23 | render () { 24 | const { 25 | word, 26 | mode 27 | } = this.props; 28 | 29 | const { 30 | setMode, 31 | setWord 32 | } = this.props.actions; 33 | 34 | const styles = { 35 | displayMode: { 36 | display: (mode === 'display') ? 'inline' : 'none', 37 | }, 38 | 39 | editMode: { 40 | display: (mode === 'edit') ? 'inline' : 'none', 41 | }, 42 | }; 43 | 44 | const onKeyUp = function (e) { 45 | if (e.key !== 'Enter') { 46 | return; 47 | } 48 | 49 | setWord(e.target.value); 50 | setMode('display'); 51 | }; 52 | 53 | return ( 54 |

Hello,  55 | setMode('edit') } 57 | style = { styles.displayMode } 58 | > 59 | { word }! 60 | 61 | 67 |

68 | ); 69 | }, 70 | }); 71 | --------------------------------------------------------------------------------