├── .babelrc ├── .flowconfig ├── .gitignore ├── README.md ├── index.html ├── package.json ├── src ├── Hello.jsx ├── Index.jsx └── __tests__ │ ├── Hello.spec.js │ └── test.spec.js ├── test-setup.js ├── webpack.config.dev.js └── webpack.config.prod.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "react", 4 | "es2015" 5 | ], 6 | "plugins": [ 7 | "transform-flow-strip-types" 8 | ] 9 | } -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .module-cache/ 2 | node_modules/ 3 | .idea/ 4 | dist/ 5 | npm-debug.log 6 | flow-typed/ 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ## run 3 | 4 | ``` 5 | npm install 6 | npm run build 7 | ``` 8 | 9 | ``` 10 | python -m SimpleHttpServer 11 | 12 | # or python -m http.server 13 | ``` 14 | 15 | open localhost:8000 16 | 17 | ## test 18 | 19 | test all 20 | 21 | ``` 22 | npm run test:all 23 | ``` 24 | 25 | test ut 26 | 27 | ``` 28 | npm run test:ut ./src/__tests__/your-test-code.js 29 | ``` 30 | 31 | ## flow 32 | 33 | check 34 | 35 | ``` 36 | npm run flow 37 | ``` 38 | 39 | add flow-typed definition 40 | 41 | ``` 42 | npm run flow-typed install (rxjs@5.0.x) 43 | ``` 44 | 45 | ## LICENCE 46 | 47 | MIT 48 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React minimal 5 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-redux-js-sample", 3 | "version": "0.1.0", 4 | "scripts": { 5 | "build": "webpack --config ./webpack.config.dev.js", 6 | "build:prod": "webpack --config ./webpack.config.prod.js", 7 | "flow": "flow", 8 | "test:all": "mocha ./test-setup.js \"./src/**/*.spec.js\"", 9 | "test:ut": "mocha ./test-setup.js", 10 | "flow-typed": "flow-typed" 11 | }, 12 | "license": "MIT", 13 | "dependencies": { 14 | "flow-typed": "^2.0.0", 15 | "react": "^15.4.1", 16 | "react-dom": "^15.4.1" 17 | }, 18 | "devDependencies": { 19 | "babel-core": "^6.20.0", 20 | "babel-loader": "^6.2.9", 21 | "babel-plugin-transform-flow-strip-types": "^6.18.0", 22 | "babel-preset-es2015": "^6.18.0", 23 | "babel-preset-react": "^6.16.0", 24 | "babel-register": "^6.18.0", 25 | "chai": "^3.5.0", 26 | "flow-bin": "^0.37.0", 27 | "jsdom": "^9.8.3", 28 | "mocha": "^3.2.0", 29 | "react-addons-test-utils": "^15.4.1", 30 | "webpack": "^2.1.0-beta.28" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/Hello.jsx: -------------------------------------------------------------------------------- 1 | // @flow 2 | import React, {Component} from 'react'; 3 | 4 | type Props = { 5 | content: string 6 | }; 7 | 8 | type State = { 9 | count: number 10 | }; 11 | 12 | export class Hello extends Component { 13 | state: State; 14 | 15 | constructor(props: Props, context: any) { 16 | super(props, context); 17 | this.state = {count: 0}; 18 | } 19 | 20 | render() { 21 | return
{`${this.props.content} - ${this.state.count}`}
22 | } 23 | } -------------------------------------------------------------------------------- /src/Index.jsx: -------------------------------------------------------------------------------- 1 | // @flow 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import {Hello} from './Hello'; 5 | 6 | ReactDOM.render(, document.getElementById('app')); -------------------------------------------------------------------------------- /src/__tests__/Hello.spec.js: -------------------------------------------------------------------------------- 1 | import { expect, assert } from 'chai'; 2 | import React from "react"; 3 | import * as TestUtils from 'react-addons-test-utils'; 4 | import ReactDOM from "react-dom"; 5 | import {Hello} from '../Hello'; 6 | 7 | describe('test', () => { 8 | it('rendering', () => { 9 | const counterComponent: any = TestUtils.renderIntoDocument( 10 | 11 | ); 12 | 13 | const counterDOM = ReactDOM.findDOMNode(counterComponent); 14 | assert.deepEqual(!!counterDOM, true); 15 | }); 16 | }); -------------------------------------------------------------------------------- /src/__tests__/test.spec.js: -------------------------------------------------------------------------------- 1 | import { expect } from 'chai'; 2 | 3 | describe('test', () => { 4 | it('1 + 2 = 3', () => { 5 | const one:number = 1; 6 | const two:number = 2; 7 | expect(one + two).to.equal(3); 8 | }); 9 | }); -------------------------------------------------------------------------------- /test-setup.js: -------------------------------------------------------------------------------- 1 | require('babel-register')(); 2 | 3 | const jsdom = require('jsdom').jsdom; 4 | 5 | const exposedProperties = ['window', 'navigator', 'document']; 6 | 7 | global.document = jsdom(''); 8 | global.window = document.defaultView; 9 | Object.keys(document.defaultView).forEach((property) => { 10 | if (typeof global[property] === 'undefined') { 11 | exposedProperties.push(property); 12 | global[property] = document.defaultView[property]; 13 | } 14 | }); 15 | 16 | global.navigator = { 17 | userAgent: 'node.js' 18 | }; 19 | 20 | documentRef = document; -------------------------------------------------------------------------------- /webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './src/Index.jsx', 3 | output: { 4 | filename: 'bundle.js', 5 | path: './dist' 6 | }, 7 | devtool: "source-map", 8 | resolve: { 9 | extensions: [".jsx", ".js"] 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.jsx?$/, 15 | exclude: /node_modules/, 16 | loader: "babel-loader" 17 | } 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: './src/Index.jsx', 5 | output: { 6 | filename: 'bundle.js', 7 | path: './dist' 8 | }, 9 | resolve: { 10 | extensions: [".jsx", ".js"] 11 | }, 12 | plugins: [ 13 | new webpack.optimize.UglifyJsPlugin(), 14 | new webpack.DefinePlugin({ 15 | 'process.env':{ 16 | 'NODE_ENV': JSON.stringify('production') 17 | } 18 | }) 19 | ], 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.jsx?$/, 24 | exclude: /node_modules/, 25 | loader: "babel-loader" 26 | } 27 | ] 28 | } 29 | } --------------------------------------------------------------------------------