├── .babelrc
├── .envs
├── .dev.env
├── .example.env
└── .prod.env
├── .eslintrc
├── .gitignore
├── .yarnrc
├── README.md
├── docs
└── CHANGELOG.md
├── package-lock.json
├── package.json
├── server
├── index.js
├── webpack-dev-server.js
└── webpack-prod-server.js
├── src
├── actions
│ └── todos.js
├── container
│ ├── common
│ │ ├── footer
│ │ │ └── footer.react.js
│ │ └── header
│ │ │ └── header.react.js
│ ├── example
│ │ └── example.react.js
│ ├── home
│ │ └── home.react.js
│ └── welcome
│ │ └── welcome.react.js
├── html.react.js
├── index.react.js
├── lib
│ └── bootstrap
│ │ ├── dist
│ │ └── bootstrap.min.css
│ │ └── fonts
│ │ ├── glyphicons-halflings-regular.eot
│ │ ├── glyphicons-halflings-regular.svg
│ │ ├── glyphicons-halflings-regular.ttf
│ │ ├── glyphicons-halflings-regular.woff
│ │ └── glyphicons-halflings-regular.woff2
├── reducers
│ ├── index.js
│ └── todos
│ │ ├── const.js
│ │ └── index.js
└── store
│ └── configureStore.js
├── webpack
├── webpack.dev.config.js
└── webpack.production.config.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react", "es2015"]
3 | }
4 |
--------------------------------------------------------------------------------
/.envs/.dev.env:
--------------------------------------------------------------------------------
1 | APP_PORT=8081
2 | NODE_ENV=develop
3 |
4 | PARSE_SERVER_URL=http://localhost:16668/api/parse-server/v1
5 | PARSE_SERVER_DB_URL=mongodb://localhost:27017/react-basic-start-dev
6 | PARSE_SERVER_APP_ID=react-basic-starter-dev
7 | PARSE_SERVER_MASTER_KEY=MasterKey
8 | PARSE_SERVER_APP_NAME=react-basic-starter-dev
9 | PARSE_SERVER_LOGIN_USERNAME=user
10 | PARSE_SERVER_LOGIN_PASSWORD=password
11 |
12 | META_TITLE=Reactjs Basic Starter
13 | META_DESCRIPTION=Reactjs Basic Starter For You To Quickly Build Your Own Project
14 |
--------------------------------------------------------------------------------
/.envs/.example.env:
--------------------------------------------------------------------------------
1 | NODE_ENV=EXAMPLE_NODE_ENV
2 |
3 | APP_PORT=EXAMPLE_PORT
4 |
5 | PARSE_SERVER_DB_URL=mongodb://localhost:27017/example
6 |
7 | META_TITLE=Example TITLE ENVIRONMENT
8 | META_DESCRIPTION=Example DESCRIPTION ENVIRONMENT
9 |
--------------------------------------------------------------------------------
/.envs/.prod.env:
--------------------------------------------------------------------------------
1 | NODE_ENV=production
2 |
3 | APP_PORT=8080
4 |
5 | PARSE_SERVER_DB_URL=mongodb://localhost:27017/react-basic-start-production
6 |
7 | META_TITLE=Reactjs Basic Starter
8 | META_DESCRIPTION=Reactjs Basic Starter For You To Quickly Build Your Own Project
9 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "node": true,
5 | "es6": true,
6 | "jest": true
7 | },
8 | settings: {
9 | import/resolver: {
10 | webpack: {
11 | config: 'webpack.dev.config.js'
12 | }
13 | }
14 | },
15 | "extends": "eslint-config-airbnb",
16 | "plugins": ["react"],
17 | "globals": {
18 | "React": true
19 | },
20 | "parserOptions": {
21 | "ecmaVersion": 6,
22 | "sourceType": "module",
23 | "ecmaFeatures": {
24 | "jsx": true
25 | }
26 | },
27 | "rules": {
28 | "react/jsx-curly-spacing": [2, "always"],
29 | "react/jsx-no-duplicate-props": 2,
30 | "react/jsx-no-undef": 2,
31 | "react/jsx-quotes": 0,
32 | "react/jsx-uses-react": 2,
33 | "react/jsx-uses-vars": 2,
34 | "react/jsx-closing-bracket-location": [2, "after-props" ],
35 | "react/no-did-mount-set-state": 2,
36 | "react/no-did-update-set-state": 2,
37 | "react/no-multi-comp": 0,
38 | "react/no-unknown-property": 2,
39 | "react/prop-types": 0,
40 | "react/react-in-jsx-scope": 2,
41 | "react/require-extension": 2,
42 | "react/self-closing-comp": 2,
43 | "react/wrap-multilines": 2,
44 | "react/sort-comp": 0,
45 | "react/jsx-no-bind": 0,
46 | "react/jsx-boolean-value": 0,
47 |
48 | "quotes": [2, "single", "avoid-escape"],
49 | "jsx-quotes": [2, "prefer-single"],
50 | "comma-dangle": [2, "never"],
51 | "indent": [2, 2],
52 | "object-curly-spacing": [2, "always"],
53 | "array-bracket-spacing": [2, "always"],
54 | "no-undef": 2,
55 | "no-underscore-dangle": 0,
56 | "func-names": 0,
57 | "no-else-return": 0,
58 | "no-console": 1,
59 | "no-throw-literal": 0,
60 | "id-length": 0,
61 | "no-unused-expressions": 0,
62 | "no-param-reassign": 0,
63 | "max-len": ["error", 200,
64 | {
65 | "ignoreUrls": true,
66 | "ignoreComments": true
67 | }],
68 | "semi": 0
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
3 | .env
4 | logs
5 |
--------------------------------------------------------------------------------
/.yarnrc:
--------------------------------------------------------------------------------
1 | ignore-optional false
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Demo
2 |
3 | 
4 |
5 | # Why React Basic Starter
6 |
7 | The lightweight react start, help you to start your project quickly.
8 |
9 | # React Basic Starter
10 |
11 | * Node v9.0.0
12 | * React v16.2.0
13 | * ReactDom v16.2.0
14 | * ReactRouterDom v4.1.2
15 | * ReactBootstrap: v0.31.1
16 | * Redux v3.7.2
17 | * ReactRedux v5.0.5
18 | * React-Hot-Loader v1.3.0
19 | * Styled Component v2.1.1
20 | * eslint v2.11.1
21 | * ES6 Support
22 | * yarn
23 | * webpack v4 Support
24 |
25 | # Redux middleware
26 |
27 | * Redux Logger 2.6.1v
28 |
29 | # Development
30 |
31 | ```
32 | git clone https://github.com/madeinfree/react-basic-starter.git
33 | ln -s .envs/.dev.env .env
34 | yarn i && yarn start:dev
35 | ```
36 |
37 | [http://localhost:8081](http://localhost:8081)
38 |
39 | # Production
40 |
41 | ```
42 | ln -s .envs/.prod.env .env
43 | yarn start:prod
44 | ```
45 |
46 | [http://localhost:8080](http://localhost:8080)
47 |
48 | # License
49 |
50 | MIT
51 |
--------------------------------------------------------------------------------
/docs/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## v0.5.2
2 |
3 | > 2016-10-17
4 |
5 | - **Feature**: Added Styled Component modules
6 |
7 | ## v0.5.1
8 |
9 | > 2016-10-07
10 |
11 | - **Feature**: Added react-dev-utils modules
12 |
13 | ## v0.5.0
14 |
15 | > 2016-09-27
16 |
17 | - **Update**: Upgrade to use React Router v4.0.0-alpha.3
18 | - **Update**: Update React and React Dom to v15.3.2
19 |
20 | ## v0.4.21
21 |
22 | > 2016-08-02
23 |
24 | - **Update and BugFix**: Update React Bootstrap to v0.30.1 for React v15.3.0
25 |
26 |
27 | ## v0.4.2
28 |
29 | > 2016-07-31
30 |
31 | - **Update**: Update React and React Dom to 15.3.0v.
32 |
33 |
34 | ## v0.4.1
35 |
36 | > 2016-07-30
37 |
38 | - **Migrate**: Migrate `routes` to routes folder.
39 |
40 | ## v0.4.0
41 |
42 | > 2016-07-29
43 |
44 | - **Improvement**: Improvement initial sample code, ([redux-action])
45 | - **Feature**: Now have server-side render, ([webpack-server]) relation issue ([#3])
46 | - **Feature**: Add Redux Logger
47 | - **BugFix**: React Router has `keep getting an annoying warning` issue, ([fixed-router-issue])
48 |
49 | [fixed-router-issue]: https://github.com/madeinfree/react-basic-starter/commit/88c82f548b57b6efd0f22b3870905a487a68c0d2
50 | [redux-action]: https://github.com/madeinfree/react-basic-starter/commit/70929bf7fbfb4c8cec9021b3fd96216783371ced
51 | [webpack-server]: https://github.com/madeinfree/react-basic-starter/commit/4f548d9fa699e7cff3f39a3ce946cbf871cbbb08
52 | [#3]: https://github.com/madeinfree/react-basic-starter/issues/3
53 |
54 | ## v0.3.1
55 |
56 | > 2016-07-28
57 |
58 | - **Migrate**: Migrate webpack.dev.config to config file in server folder
59 | - **Upgrade**: React Bootstrap upgrade v0.3.0-rc2 to v0.3.0
60 | - **Upgrade**: React Router upgrade v2.4.1 to v2.6.0
61 | - **Other**: start script modified (use node_modules babel-cli not global babel script)
62 |
63 |
64 | ## v0.3.0
65 |
66 | > 2016-07-25
67 |
68 | - **Upgrade**: react and react-dom version to 15.2.1
69 | - **BugFix**: react-bootstrap version to 0.30.0-rc.2
70 | - **Other**: test port changed 16668
71 |
--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-basic-starter",
3 | "version": "0.5.1",
4 | "lockfileVersion": 1,
5 | "requires": true,
6 | "dependencies": {
7 | "align-text": {
8 | "version": "0.1.4",
9 | "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
10 | "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
11 | "dev": true,
12 | "requires": {
13 | "kind-of": "3.2.2",
14 | "longest": "1.0.1",
15 | "repeat-string": "1.6.1"
16 | }
17 | },
18 | "camelcase": {
19 | "version": "1.2.1",
20 | "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
21 | "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
22 | "dev": true
23 | },
24 | "center-align": {
25 | "version": "0.1.3",
26 | "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
27 | "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
28 | "dev": true,
29 | "requires": {
30 | "align-text": "0.1.4",
31 | "lazy-cache": "1.0.4"
32 | }
33 | },
34 | "cliui": {
35 | "version": "2.1.0",
36 | "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
37 | "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=",
38 | "dev": true,
39 | "requires": {
40 | "center-align": "0.1.3",
41 | "right-align": "0.1.3",
42 | "wordwrap": "0.0.2"
43 | }
44 | },
45 | "decamelize": {
46 | "version": "1.2.0",
47 | "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
48 | "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
49 | "dev": true
50 | },
51 | "is-buffer": {
52 | "version": "1.1.5",
53 | "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.5.tgz",
54 | "integrity": "sha1-Hzsm72E7IUuIy8ojzGwB2Hlh7sw=",
55 | "dev": true
56 | },
57 | "kind-of": {
58 | "version": "3.2.2",
59 | "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
60 | "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
61 | "dev": true,
62 | "requires": {
63 | "is-buffer": "1.1.5"
64 | }
65 | },
66 | "lazy-cache": {
67 | "version": "1.0.4",
68 | "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
69 | "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
70 | "dev": true
71 | },
72 | "longest": {
73 | "version": "1.0.1",
74 | "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
75 | "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
76 | "dev": true
77 | },
78 | "repeat-string": {
79 | "version": "1.6.1",
80 | "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
81 | "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
82 | "dev": true
83 | },
84 | "right-align": {
85 | "version": "0.1.3",
86 | "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
87 | "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
88 | "dev": true,
89 | "requires": {
90 | "align-text": "0.1.4"
91 | }
92 | },
93 | "source-list-map": {
94 | "version": "2.0.0",
95 | "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.0.tgz",
96 | "integrity": "sha512-I2UmuJSRr/T8jisiROLU3A3ltr+swpniSmNPI4Ml3ZCX6tVnDsuZzK7F2hl5jTqbZBWCEKlj5HRQiPExXLgE8A==",
97 | "dev": true
98 | },
99 | "source-map": {
100 | "version": "0.5.6",
101 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
102 | "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
103 | "dev": true
104 | },
105 | "uglify-js": {
106 | "version": "2.8.29",
107 | "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
108 | "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
109 | "dev": true,
110 | "requires": {
111 | "source-map": "0.5.6",
112 | "uglify-to-browserify": "1.0.2",
113 | "yargs": "3.10.0"
114 | }
115 | },
116 | "uglify-to-browserify": {
117 | "version": "1.0.2",
118 | "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
119 | "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
120 | "dev": true,
121 | "optional": true
122 | },
123 | "uglifyjs-webpack-plugin": {
124 | "version": "0.4.6",
125 | "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz",
126 | "integrity": "sha1-uVH0q7a9YX5m9j64kUmOORdj4wk=",
127 | "dev": true,
128 | "requires": {
129 | "source-map": "0.5.6",
130 | "uglify-js": "2.8.29",
131 | "webpack-sources": "1.0.1"
132 | }
133 | },
134 | "webpack-sources": {
135 | "version": "1.0.1",
136 | "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.0.1.tgz",
137 | "integrity": "sha512-05tMxipUCwHqYaVS8xc7sYPTly8PzXayRCB4dTxLhWTqlKUiwH6ezmEe0OSreL1c30LAuA3Zqmc+uEBUGFJDjw==",
138 | "dev": true,
139 | "requires": {
140 | "source-list-map": "2.0.0",
141 | "source-map": "0.5.6"
142 | }
143 | },
144 | "window-size": {
145 | "version": "0.1.0",
146 | "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
147 | "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
148 | "dev": true
149 | },
150 | "wordwrap": {
151 | "version": "0.0.2",
152 | "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
153 | "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=",
154 | "dev": true
155 | },
156 | "yargs": {
157 | "version": "3.10.0",
158 | "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
159 | "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
160 | "dev": true,
161 | "requires": {
162 | "camelcase": "1.2.1",
163 | "cliui": "2.1.0",
164 | "decamelize": "1.2.0",
165 | "window-size": "0.1.0"
166 | }
167 | }
168 | }
169 | }
170 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-basic-starter",
3 | "version": "0.5.1",
4 | "description": "The very very basic reactjs starter",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "npm run eslint && npm run jest",
8 | "eslint": "./node_modules/eslint/bin/eslint.js ./src",
9 | "jest": "./node_modules/jest/bin/jest.js",
10 | "start:dev": "yarn server",
11 | "build:dev":
12 | "yarn clear && ./node_modules/webpack/bin/webpack.js --color --watch --config ./webpack/webpack.dev.config.js",
13 | "start:prod":
14 | "yarn clear && ./node_modules/webpack/bin/webpack.js --config ./webpack/webpack.production.config.js && yarn server",
15 | "server": "node ./server/index.js",
16 | "clear": "rimraf ./build/*"
17 | },
18 | "jest": {
19 | "automock": false
20 | },
21 | "repository": {
22 | "type": "git",
23 | "url": "git+https://github.com/madeinfree/react-basic-starter.git"
24 | },
25 | "keywords": ["react"],
26 | "author": "Whien_Liou",
27 | "license": "MIT",
28 | "bugs": {
29 | "url": "https://github.com/madeinfree/react-basic-starter/issues"
30 | },
31 | "homepage": "https://github.com/madeinfree/react-basic-starter#readme",
32 | "dependencies": {
33 | "compression-webpack-plugin": "^1.0.0",
34 | "dotenv": "^4.0.0",
35 | "ejs": "^2.5.7",
36 | "express": "^4.15.4",
37 | "react": "^16.2.0",
38 | "react-bootstrap": "^0.31.1",
39 | "react-dom": "^16.2.0",
40 | "react-redux": "^5.0.5",
41 | "react-router-dom": "^4.1.2",
42 | "redux": "^3.7.2",
43 | "styled-components": "^2.1.1"
44 | },
45 | "devDependencies": {
46 | "babel-cli": "^6.11.4",
47 | "babel-core": "^6.9.1",
48 | "babel-jest": "^14.1.0",
49 | "babel-loader": "^7.1.2",
50 | "babel-preset-es2015": "^6.9.0",
51 | "babel-preset-react": "^6.11.1",
52 | "babel-preset-stage-0": "^6.5.0",
53 | "babel-register": "^6.24.1",
54 | "css-loader": "^0.23.1",
55 | "eslint": "^2.11.1",
56 | "eslint-config-airbnb": "^9.0.1",
57 | "eslint-import-resolver-webpack": "^0.2.5",
58 | "eslint-plugin-import": "^1.8.1",
59 | "eslint-plugin-jsx-a11y": "^1.2.2",
60 | "eslint-plugin-react": "^5.1.1",
61 | "extract-text-webpack-plugin": "^3.0.2",
62 | "file-loader": "^0.8.5",
63 | "ignore-styles": "^5.0.1",
64 | "jest": "^14.1.0",
65 | "react-dev-utils": "^0.4.2",
66 | "react-hot-loader": "^1.3.0",
67 | "react-test-renderer": "^15.3.0",
68 | "redux-logger": "^2.6.1",
69 | "style-loader": "^0.13.1",
70 | "uglifyjs-webpack-plugin": "^0.4.6",
71 | "url-loader": "^0.5.7",
72 | "webpack": "^4.0.0-beta.0",
73 | "webpack-cli": "^2.0.4",
74 | "webpack-dev-server": "^1.14.1"
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
1 | require('ignore-styles').default([ '.css' ]);
2 | require('babel-register');
3 | process.env.NODE_ENV === 'production' ? require('./webpack-prod-server.js') : require('./webpack-dev-server.js');
4 |
--------------------------------------------------------------------------------
/server/webpack-dev-server.js:
--------------------------------------------------------------------------------
1 | /* eslint no-console: 0 */
2 | /* eslint global-require: 0 */
3 | /* eslint no-unused-vars: 0 */
4 | import path from 'path';
5 | import React from 'react';
6 | import { renderToStaticMarkup } from 'react-dom/server';
7 | const express = require('express');
8 | const app = express();
9 | require('dotenv').config();
10 |
11 | app.set('view options', { layout: false });
12 | app.engine('html', require('ejs').renderFile);
13 |
14 | app.use('/build', express.static(`${__dirname}/../build`));
15 |
16 | app.get('*', (req, res) => {
17 | res.send(
18 | renderToStaticMarkup(
19 | require('../src/html.react').default({
20 | title: process.env.META_TITLE,
21 | description: process.env.META_DESCRIPTION
22 | })
23 | )
24 | );
25 | });
26 |
27 | app.listen(process.env.APP_PORT, () => {
28 | console.log(
29 | `Server listen on port ${process.env.APP_PORT}, NODE_ENV is ${
30 | process.env.NODE_ENV
31 | }`
32 | );
33 | });
34 |
--------------------------------------------------------------------------------
/server/webpack-prod-server.js:
--------------------------------------------------------------------------------
1 | /* eslint no-console: 0 */
2 | /* eslint global-require: 0 */
3 | /* eslint no-unused-vars: 0 */
4 | import React from 'react';
5 | import { renderToStaticMarkup } from 'react-dom/server';
6 | const express = require('express');
7 | const app = express();
8 | require('dotenv').config();
9 |
10 | app.set('view options', { layout: false });
11 | app.engine('html', require('ejs').renderFile);
12 |
13 | app.use('/build', express.static(`${__dirname}/../build`));
14 |
15 | app.get('*', (req, res) => {
16 | res.send(
17 | renderToStaticMarkup(
18 | require('../src/html.react').default({
19 | title: process.env.META_TITLE,
20 | description: process.env.META_DESCRIPTION
21 | })
22 | )
23 | );
24 | });
25 |
26 | app.listen(process.env.APP_PORT, () => {
27 | console.log(`Server listen on port ${process.env.APP_PORT}, NODE_ENV is ${process.env.NODE_ENV}`);
28 | });
29 |
--------------------------------------------------------------------------------
/src/actions/todos.js:
--------------------------------------------------------------------------------
1 | const completeTodo = () => ({
2 | type: 'COMPLETE_TODO'
3 | })
4 |
5 | export {
6 | completeTodo
7 | }
8 |
--------------------------------------------------------------------------------
/src/container/common/footer/footer.react.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const styles = {
4 | display: 'flex',
5 | position: 'absolute',
6 | width: '100%',
7 | height: 40,
8 | bottom: 0,
9 | backgroundColor: '#000',
10 | color: '#fff',
11 | textAlign: 'center',
12 | alignItems: 'center',
13 | justifyContent: 'center'
14 | }
15 |
16 | const Footer = () => (
17 |
18 | Footer Here
19 |
20 | )
21 |
22 | export default Footer
23 |
--------------------------------------------------------------------------------
/src/container/common/header/header.react.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { Link } from 'react-router-dom'
4 |
5 | import {
6 | Navbar
7 | } from 'react-bootstrap'
8 |
9 | const Header = () => (
10 |
11 |
12 |
13 |
14 | ReactBasicStarter
15 |
16 |
17 |
18 |
19 |
20 | Home
21 |
22 |
23 | Example
24 |
25 |
26 |
27 |
28 | )
29 |
30 | export default Header
31 |
--------------------------------------------------------------------------------
/src/container/example/example.react.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import styled from 'styled-components'
4 |
5 | const TextCenter = `
6 | text-align: center;
7 | `
8 | const LineFontSize = `
9 | font-size: 20px;
10 | `
11 | const Title = styled.h1`
12 | ${TextCenter}
13 | `
14 | const P = styled.p`
15 | ${TextCenter}
16 | ${LineFontSize}
17 | color: rgba(55, 0, 240, 0.82);
18 | `
19 |
20 | const Example = () => (
21 |
22 |
STYLE COMPONENT
23 |
font-size: 20px, color: rgba(55, 0, 240, 0.82)
24 |
16 | Text: { todo.text }, Completed: { todo.completed ? 'yes' : 'no' }
17 | { ' ' }
18 |
19 |
20 |
21 | ))
22 | )
23 |
24 | const Home = (props) => {
25 | const jumbotronInstance = (
26 |
27 | Welcome Home
28 | Have a nice day
29 | If you have any problem
30 | Feel free to discuss with me.
31 | or you can Here to tell me :>.
32 |
33 | TODOS
34 | { todos(props) }
35 |
36 | )
37 |
38 | return (
39 |
40 | { jumbotronInstance }
41 |
42 | )
43 | }
44 |
45 | const mapStateToProps = (state) => (
46 | {
47 | todos: state.todos
48 | }
49 | )
50 |
51 | const mapDispatchToProps = {
52 | completeTodo
53 | }
54 |
55 | export default connect(
56 | mapStateToProps,
57 | mapDispatchToProps
58 | )(Home)
59 |
--------------------------------------------------------------------------------
/src/container/welcome/welcome.react.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import {
4 | Jumbotron
5 | } from 'react-bootstrap'
6 |
7 | const Welcome = () => {
8 | const jumbotronInstance = (
9 |
10 | Welcome Reactjs Basic Starter
11 | This is the reactjs basic structure starter for user initial the project.
12 | When success, you can see this [Home] page.
13 | Provide
14 | React, ReactRouter, ReactBootstrap, Redux
15 | Webpack-dev-server
16 |
17 | )
18 |
19 | return (
20 |
21 | { jumbotronInstance }
22 |
23 | )
24 | }
25 |
26 | export default Welcome
27 |
--------------------------------------------------------------------------------
/src/html.react.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const HTML = ({ title, language = 'en', description }) => (
4 |
5 |
6 |
7 | {title}
8 |
9 |
10 |
11 |
18 |
19 |
20 |
21 | );
22 |
23 | export default HTML;
24 |
--------------------------------------------------------------------------------
/src/index.react.js:
--------------------------------------------------------------------------------
1 | // React core
2 | import React from 'react';
3 | import { render } from 'react-dom';
4 |
5 | // React Router
6 | import { BrowserRouter as Router, Route } from 'react-router-dom';
7 |
8 | import Header from './container/common/header/header.react';
9 | import Footer from './container/common/footer/footer.react';
10 | import Welcome from './container/welcome/welcome.react';
11 | import Home from './container/home/home.react';
12 | import Example from './container/example/example.react';
13 |
14 | // Redux
15 | import { Provider } from 'react-redux';
16 | import configureStore from './store/configureStore';
17 |
18 | import './lib/bootstrap/dist/bootstrap.min.css';
19 |
20 | const store = configureStore();
21 |
22 | const App = () => (
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | );
35 |
36 | render(, document.getElementById('app'));
37 |
38 | export default App;
39 |
--------------------------------------------------------------------------------
/src/lib/bootstrap/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/madeinfree/react-basic-starter/9539d05ac168839d100ac8daa3d7ff630ff02b3e/src/lib/bootstrap/fonts/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/src/lib/bootstrap/fonts/glyphicons-halflings-regular.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/lib/bootstrap/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/madeinfree/react-basic-starter/9539d05ac168839d100ac8daa3d7ff630ff02b3e/src/lib/bootstrap/fonts/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/src/lib/bootstrap/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/madeinfree/react-basic-starter/9539d05ac168839d100ac8daa3d7ff630ff02b3e/src/lib/bootstrap/fonts/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/src/lib/bootstrap/fonts/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/madeinfree/react-basic-starter/9539d05ac168839d100ac8daa3d7ff630ff02b3e/src/lib/bootstrap/fonts/glyphicons-halflings-regular.woff2
--------------------------------------------------------------------------------
/src/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux'
2 |
3 | import {
4 | todos
5 | } from './todos/'
6 |
7 | export default combineReducers({
8 | todos
9 | })
10 |
--------------------------------------------------------------------------------
/src/reducers/todos/const.js:
--------------------------------------------------------------------------------
1 | const COMPLETE_TODO = 'COMPLETE_TODO'
2 |
3 | export {
4 | COMPLETE_TODO
5 | }
6 |
--------------------------------------------------------------------------------
/src/reducers/todos/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | COMPLETE_TODO
3 | } from './const'
4 |
5 | const InitialState = [
6 | {
7 | text: 'runing',
8 | completed: false
9 | }
10 | ]
11 |
12 | export const todos = (state = InitialState, action) => {
13 | switch (action.type) {
14 | case COMPLETE_TODO:
15 | return [
16 | Object.assign({}, state[0], { completed: !state[0].completed })
17 | ]
18 | default:
19 | return state
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/store/configureStore.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware } from 'redux'
2 | import rootReducer from '../reducers'
3 | import createLogger from 'redux-logger'
4 |
5 | const logger = createLogger();
6 |
7 | const reducerDefault = require('../reducers').default
8 |
9 | const configureStore = (preloadedState) => {
10 | const store = createStore(
11 | rootReducer,
12 | preloadedState,
13 | applyMiddleware(logger)
14 | )
15 |
16 | if (module.hot) {
17 | module.hot.accept('../reducers', () => {
18 | const nextRootReducer = reducerDefault
19 | store.replaceReducer(nextRootReducer)
20 | })
21 | }
22 |
23 | return store
24 | }
25 |
26 | export default configureStore
27 |
--------------------------------------------------------------------------------
/webpack/webpack.dev.config.js:
--------------------------------------------------------------------------------
1 | /* eslint no-console: 0 */
2 | const path = require('path');
3 | const webpack = require('webpack');
4 | require('dotenv').config();
5 |
6 | module.exports = {
7 | entry: ['./src/index.react.js'],
8 | output: {
9 | path: path.resolve(__dirname, '../build'),
10 | filename: 'bundle.js'
11 | // publicPath: '/build/'
12 | },
13 | devtool: '#eval-source-map',
14 | resolve: {
15 | extensions: ['.js', '.jsx']
16 | },
17 | mode: 'development',
18 | module: {
19 | rules: [
20 | {
21 | test: /\.js$/,
22 | exclude: /node_modules/,
23 | loader: 'babel-loader'
24 | },
25 | {
26 | test: /\.css$/,
27 | loader: 'style-loader!css-loader'
28 | },
29 | {
30 | test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
31 | loader: 'url-loader?limit=10000&minetype=application/font-woff'
32 | },
33 | {
34 | test: /\.(ttf|eot|svg|jpe?g|png|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
35 | loader: 'file-loader'
36 | }
37 | ]
38 | },
39 | optimization: {
40 | splitChunks: {
41 | cacheGroups: {
42 | vendor: {
43 | test: /node_modules/,
44 | chunks: 'initial',
45 | name: 'vendor',
46 | enforce: true
47 | }
48 | }
49 | }
50 | },
51 | plugins: [
52 | new webpack.HotModuleReplacementPlugin(),
53 | new webpack.LoaderOptionsPlugin({
54 | debug: true,
55 | options: {
56 | context: process.cwd()
57 | }
58 | })
59 | ]
60 | };
61 |
--------------------------------------------------------------------------------
/webpack/webpack.production.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
4 | const CompressionPlugin = require('compression-webpack-plugin');
5 | // const ExtractTextPlugin = require('extract-text-webpack-plugin');
6 |
7 | module.exports = {
8 | entry: ['./src/index.react.js'],
9 | output: {
10 | path: path.resolve(__dirname, '../build'),
11 | filename: 'bundle.js',
12 | chunkFilename: '[name].js'
13 | },
14 | mode: 'production',
15 | module: {
16 | rules: [
17 | {
18 | test: /\.js$/,
19 | exclude: /node_modules/,
20 | loader: 'babel-loader'
21 | },
22 | {
23 | test: /\.css$/,
24 | loaders: ['style-loader', 'css-loader']
25 | // use: ExtractTextPlugin.extract({
26 | // fallback: 'style-loader',
27 | // use: 'css-loader'
28 | // })
29 | },
30 | {
31 | test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
32 | loader: 'url-loader?limit=10000&minetype=application/font-woff'
33 | },
34 | {
35 | test: /\.(ttf|eot|svg|jpe?g|png|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
36 | loader: 'file-loader'
37 | }
38 | ]
39 | },
40 | optimization: {
41 | splitChunks: {
42 | cacheGroups: {
43 | vendor: {
44 | test: /node_modules/,
45 | chunks: 'initial',
46 | name: 'vendor',
47 | enforce: true
48 | }
49 | }
50 | }
51 | },
52 | plugins: [
53 | new webpack.DefinePlugin({
54 | 'process.env': {
55 | NODE_ENV: JSON.stringify('production')
56 | }
57 | }),
58 | new webpack.LoaderOptionsPlugin({
59 | options: {
60 | context: process.cwd()
61 | }
62 | }),
63 | // new ExtractTextPlugin('style.css'),
64 | new UglifyJSPlugin({
65 | ie8: false,
66 | ecma: 8,
67 | comments: false,
68 | sourceMap: true,
69 | warnings: false
70 | }),
71 | new CompressionPlugin({
72 | asset: '[path].gz[query]',
73 | algorithm: 'gzip',
74 | test: /\.js$|\.html$/,
75 | threshold: 10240,
76 | minRatio: 0.8
77 | })
78 | ]
79 | };
80 |
--------------------------------------------------------------------------------