├── README.md
├── .babelrc
├── .github
└── ISSUE_TEMPLATE.md
├── src
├── index.js
├── index.html
└── App.js
├── .editorconfig
├── tools
├── server.js
└── srcServer.js
├── .gitignore
├── webpack.config.js
├── .eslintrc
└── package.json
/README.md:
--------------------------------------------------------------------------------
1 | ## React-Basic
2 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react", "es2015"],
3 | "env": {
4 | "development": {
5 | "presets": ["react-hmre"]
6 | }
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | Node version:
2 |
3 | npm version:
4 |
5 | Operating system:
6 |
7 | Command line used:
8 |
9 | Steps to reproduce:
10 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 | import React from 'react'
3 | import {render} from 'react-dom';
4 | import App from './App'
5 |
6 | let app = document.getElementById('main')
7 |
8 |
9 | render(, app)
10 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React Training
5 |
6 |
7 | React Basic
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 |
12 | [*.md]
13 | trim_trailing_whitespace = false
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by ttnd on 27/12/16.
3 | */
4 | import React from 'react'
5 |
6 | export default class App extends React.Component {
7 | constructor() {
8 | super()
9 | }
10 |
11 | render() {
12 | return (
13 |
14 | Working
15 |
16 | )
17 | }
18 |
19 | }
20 |
21 |
--------------------------------------------------------------------------------
/tools/server.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by ttnd on 13/10/16.
3 | */
4 |
5 | import express from 'express'
6 | import path from 'path'
7 | import webpack from 'webpack'
8 | import config from '../webpack.config'
9 |
10 | let app = express()
11 | let compile = webpack(config)
12 |
13 | app.use(require('webpack-dev-middleware')(compiler, {
14 | noInfo: true,
15 | publicPath: config.output.publicPath
16 | }));
17 |
18 | app.use('*', function (req, res){
19 | res.sendFile(path.join(__dirname , '../src/index.html'))
20 | })
21 | app.listen(4000, function() {
22 |
23 | })
24 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 |
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 |
29 | #dist folder
30 | dist
31 |
32 | #Webstorm metadata
33 | .idea
34 |
35 | # Mac files
36 | .DS_Store
37 |
--------------------------------------------------------------------------------
/tools/srcServer.js:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import webpack from 'webpack';
3 | import path from 'path';
4 | import config from '../webpack.config';
5 | import open from 'open';
6 |
7 | /* eslint-disable no-console */
8 |
9 | const port = 3000;
10 | const app = express();
11 | const compiler = webpack(config);
12 |
13 | app.use(require('webpack-dev-middleware')(compiler, {
14 | noInfo: true,
15 | publicPath: config.output.publicPath
16 | }));
17 |
18 | app.use(require('webpack-hot-middleware')(compiler));
19 |
20 | app.get('*', function(req, res) {
21 | res.sendFile(path.join( __dirname, '../src/index.html'));
22 | });
23 |
24 | app.listen(port, function(err) {
25 | if (err) {
26 | console.log(err);
27 | } else {
28 | open(`http://localhost:${port}`);
29 | }
30 | });
31 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | import webpack from 'webpack';
2 | import path from 'path';
3 |
4 | export default {
5 | debug: true,
6 | devtool: 'inline-source-map',
7 | noInfo: false,
8 | entry: [
9 | 'eventsource-polyfill', // necessary for hot reloading with IE
10 | 'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
11 | path.resolve(__dirname, 'src/index')
12 | ],
13 | target: 'web',
14 | output: {
15 | path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
16 | publicPath: '/',
17 | filename: 'bundle.js'
18 | },
19 | devServer: {
20 | contentBase: path.resolve(__dirname, 'src')
21 | },
22 | plugins: [
23 | new webpack.HotModuleReplacementPlugin(),
24 | new webpack.NoErrorsPlugin()
25 | ],
26 | module: {
27 | loaders: [
28 | {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
29 | {test: /(\.css)$/, loaders: ['style', 'css']},
30 | {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
31 | {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
32 | {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
33 | {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
34 | ]
35 | }
36 | };
37 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "eslint:recommended",
4 | "plugin:import/errors",
5 | "plugin:import/warnings"
6 | ],
7 | "plugins": [
8 | "react"
9 | ],
10 | "parserOptions": {
11 | "ecmaVersion": 6,
12 | "sourceType": "module",
13 | "ecmaFeatures": {
14 | "jsx": true
15 | }
16 | },
17 | "env": {
18 | "es6": true,
19 | "browser": true,
20 | "node": true,
21 | "jquery": true,
22 | "mocha": true
23 | },
24 | "rules": {
25 | "quotes": 0,
26 | "no-console": 1,
27 | "no-debugger": 1,
28 | "no-var": 1,
29 | "semi": [1, "always"],
30 | "no-trailing-spaces": 0,
31 | "eol-last": 0,
32 | "no-unused-vars": 0,
33 | "no-underscore-dangle": 0,
34 | "no-alert": 0,
35 | "no-lone-blocks": 0,
36 | "jsx-quotes": 1,
37 | "react/display-name": [ 1, {"ignoreTranspilerName": false }],
38 | "react/forbid-prop-types": [1, {"forbid": ["any"]}],
39 | "react/jsx-boolean-value": 1,
40 | "react/jsx-closing-bracket-location": 0,
41 | "react/jsx-curly-spacing": 1,
42 | "react/jsx-indent-props": 0,
43 | "react/jsx-key": 1,
44 | "react/jsx-max-props-per-line": 0,
45 | "react/jsx-no-bind": 1,
46 | "react/jsx-no-duplicate-props": 1,
47 | "react/jsx-no-literals": 0,
48 | "react/jsx-no-undef": 1,
49 | "react/jsx-pascal-case": 1,
50 | "react/jsx-sort-prop-types": 0,
51 | "react/jsx-sort-props": 0,
52 | "react/jsx-uses-react": 1,
53 | "react/jsx-uses-vars": 1,
54 | "react/no-danger": 1,
55 | "react/no-did-mount-set-state": 1,
56 | "react/no-did-update-set-state": 1,
57 | "react/no-direct-mutation-state": 1,
58 | "react/no-multi-comp": 1,
59 | "react/no-set-state": 0,
60 | "react/no-unknown-property": 1,
61 | "react/prefer-es6-class": 1,
62 | "react/prop-types": 1,
63 | "react/react-in-jsx-scope": 1,
64 | "react/require-extension": 1,
65 | "react/self-closing-comp": 1,
66 | "react/sort-comp": 1,
67 | "react/wrap-multilines": 1
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-basic",
3 | "version": "1.0.0",
4 | "description": "React Basic Application",
5 | "scripts": {
6 | "start": "npm-run-all --parallel open:src lint:watch",
7 | "open:src": "babel-node tools/srcServer.js",
8 | "lint": "node_modules/.bin/esw webpack.config.* src tools",
9 | "lint:watch": "npm run lint -- --watch"
10 | },
11 | "dependencies": {
12 | "babel-polyfill": "6.8.0",
13 | "bootstrap": "3.3.6",
14 | "jquery": "2.2.3",
15 | "react": "15.0.2",
16 | "react-dom": "15.0.2",
17 | "react-redux": "4.4.5",
18 | "react-router": "2.4.0",
19 | "react-router-redux": "4.0.4",
20 | "redux": "3.5.2",
21 | "redux-thunk": "2.0.1",
22 | "toastr": "2.1.2"
23 | },
24 | "devDependencies": {
25 | "babel-cli": "6.8.0",
26 | "babel-core": "6.8.0",
27 | "babel-loader": "6.2.4",
28 | "babel-plugin-react-display-name": "2.0.0",
29 | "babel-preset-es2015": "6.6.0",
30 | "babel-preset-react": "6.5.0",
31 | "babel-preset-react-hmre": "1.1.1",
32 | "babel-register": "6.8.0",
33 | "colors": "1.1.2",
34 | "compression": "1.6.1",
35 | "cross-env": "1.0.7",
36 | "css-loader": "0.23.1",
37 | "enzyme": "2.2.0",
38 | "eslint": "2.9.0",
39 | "eslint-plugin-import": "1.6.1",
40 | "eslint-plugin-react": "5.0.1",
41 | "eslint-watch": "2.1.11",
42 | "eventsource-polyfill": "0.9.6",
43 | "expect": "1.19.0",
44 | "express": "4.13.4",
45 | "extract-text-webpack-plugin": "1.0.1",
46 | "file-loader": "0.8.5",
47 | "jsdom": "8.5.0",
48 | "mocha": "2.4.5",
49 | "nock": "8.0.0",
50 | "npm-run-all": "1.8.0",
51 | "open": "0.0.5",
52 | "react-addons-test-utils": "15.0.2",
53 | "redux-immutable-state-invariant": "1.2.3",
54 | "redux-mock-store": "1.0.2",
55 | "rimraf": "2.5.2",
56 | "style-loader": "0.13.1",
57 | "url-loader": "0.5.7",
58 | "webpack": "1.13.0",
59 | "webpack-dev-middleware": "1.6.1",
60 | "webpack-hot-middleware": "2.10.0"
61 | }
62 | }
63 |
--------------------------------------------------------------------------------