",
5 | "version": "0.1.0",
6 | "scripts": {
7 | "start": "cross-env NODE_ENV=development node build/dev.js",
8 | "build": "cross-env NODE_ENV=production node build/prod.js"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "https://github.com/kenberkeley/react-demo.git"
13 | },
14 | "dependencies": {
15 | "history": "^2.0.0",
16 | "lodash": "^4.15.0",
17 | "react": "~15.3.1",
18 | "react-dom": "~15.3.1",
19 | "react-redux": "^4.4.5",
20 | "react-router": "^2.7.0",
21 | "react-router-redux": "^4.0.5",
22 | "redux": "^3.5.2",
23 | "redux-thunk": "^2.1.0"
24 | },
25 | "devDependencies": {
26 | "babel-core": "^6.0.0",
27 | "babel-eslint": "^4.1.3",
28 | "babel-loader": "^6.0.0",
29 | "babel-plugin-transform-decorators-legacy": "^1.3.4",
30 | "babel-plugin-transform-runtime": "^6.0.0",
31 | "babel-preset-es2015": "^6.0.0",
32 | "babel-preset-react": "^6.3.13",
33 | "babel-preset-react-optimize": "^1.0.1",
34 | "babel-preset-stage-0": "^6.0.0",
35 | "babel-runtime": "^6.9.0",
36 | "browser-sync": "^2.11.1",
37 | "browser-sync-webpack-plugin": "^1.0.1",
38 | "clean-webpack-plugin": "^0.1.13",
39 | "connect-history-api-fallback": "^1.1.0",
40 | "copy-webpack-plugin": "^4.0.1",
41 | "cross-env": "^3.2.4",
42 | "css-loader": "^0.23.0",
43 | "eslint": "^1.10.3",
44 | "eslint-friendly-formatter": "^1.2.2",
45 | "eslint-loader": "^1.2.0",
46 | "eslint-plugin-babel": "^3.2.0",
47 | "eslint-plugin-react": "^5.0.0",
48 | "eventsource-polyfill": "^0.9.6",
49 | "express": "^4.13.3",
50 | "express-favicon": "^1.0.1",
51 | "extract-text-webpack-plugin": "^0.9.1",
52 | "file-loader": "^0.8.4",
53 | "html-loader": "^0.4.3",
54 | "html-webpack-plugin": "^1.7.0",
55 | "inject-loader": "^2.0.1",
56 | "json-loader": "^0.5.4",
57 | "less": "^2.6.0",
58 | "less-loader": "^2.2.2",
59 | "node-sass": "^3.4.2",
60 | "nyan-progress-webpack-plugin": "^1.1.4",
61 | "react-hot-loader": "^1.3.0",
62 | "redux-devtools": "^3.3.1",
63 | "redux-devtools-dock-monitor": "^1.1.1",
64 | "redux-devtools-log-monitor": "^1.0.11",
65 | "redux-logger": "^2.6.1",
66 | "sass-loader": "^3.2.0",
67 | "style-loader": "^0.13.1",
68 | "url-loader": "^0.5.7",
69 | "webpack": "^1.12.2",
70 | "webpack-dev-middleware": "^1.4.0",
71 | "webpack-hot-middleware": "^2.6.0",
72 | "why-did-you-update": "0.0.8"
73 | },
74 | "license": "MIT"
75 | }
76 |
--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kenberkeley/react-demo/01d0dcd04c1dcdfc36dc8cbb6f02285206a3f273/screenshot.png
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | /* 入口启动文件 */
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 | import { Provider } from 'react-redux'
5 | import { Router } from 'react-router'
6 | import store, { history } from 'STORE'
7 | import routes from 'ROUTE'
8 |
9 | /**
10 | * 下面这货用于检测不必要的重新渲染，详情请看其项目地址：
11 | * https://github.com/garbles/why-did-you-update
12 | *
13 | * 有关性能提升方面的问题
14 | * 诸如 PureComponent / shouldComponentUpdate / Immutable.js 等
15 | * 请自行查阅相关资料
16 | */
17 | if (__DEV__ && __WHY_DID_YOU_UPDATE__) {
18 | const { whyDidYouUpdate } = require('why-did-you-update')
19 | whyDidYouUpdate(React)
20 | }
21 | if (__DEV__) {
22 | console.info('[当前环境] 开发环境')
23 | }
24 | if (__PROD__) {
25 | console.info('[当前环境] 生产环境')
26 | }
27 |
28 | // ================================
29 | // 将根组件挂载到 DOM，启动！
30 | // ================================
31 | const MOUNT_NODE = document.getElementById('app')
32 |
33 | ReactDOM.render(
34 |
35 |
36 | ,
37 | MOUNT_NODE
38 | )
39 |
40 | // === Webpack 处理 assets，取消注释即可进行测试 === //
41 | /* 处理 less / sass */
42 | // import 'ASSET/less/normalize.less'
43 | // import 'ASSET/scss/normalize.scss'
44 |
45 | /* 处理 img，小于 10KB 的转为 base64，否则使用 URL */
46 | // import base64 from 'ASSET/img/smaller.png'
47 | // import url from 'ASSET/img/larger.png'
48 |
49 | // function appendImgToBody(content) {
50 | // const img = document.createElement('img')
51 | // img.src = content
52 | // document.body.appendChild(img)
53 | // }
54 |
55 | // appendImgToBody(base64)
56 | // appendImgToBody(url)
57 |
58 |
59 | /**
60 | * 【拓展】
61 | * react-redux 的 Provider 中传入的属性
62 | * 可以让全体组件轻松访问，避免繁琐累赘的层层下传。例子：
63 | *
64 | * class XXX extends Component {
65 | * static contextTypes = {
66 | * // 组件中需要这样子声明
67 | * store: PropTypes.object.isRequired
68 | * }
69 | * componentDidMount () {
70 | * // 之后就可以直接这样用
71 | * this.context.store.getState()
72 | * }
73 | * }
74 | *
75 | * 但上面这种官方的做法实在太麻烦，于是我们有更为直接的方式：
76 | * import store from 'STORE'
77 | * store.getState() // 只读，更改 state 只能通过 dispatch
78 | */
79 |
--------------------------------------------------------------------------------
/src/assets/README.md:
--------------------------------------------------------------------------------
1 | 放置需要经由 Webpack 处理的文件
2 | e.g. img css font 等
--------------------------------------------------------------------------------
/src/assets/img/larger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kenberkeley/react-demo/01d0dcd04c1dcdfc36dc8cbb6f02285206a3f273/src/assets/img/larger.png
--------------------------------------------------------------------------------
/src/assets/img/smaller.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kenberkeley/react-demo/01d0dcd04c1dcdfc36dc8cbb6f02285206a3f273/src/assets/img/smaller.png
--------------------------------------------------------------------------------
/src/assets/less/normalize.less:
--------------------------------------------------------------------------------
1 | // =============================================================================
2 | // Normalize.less based on Nicolas Gallagher and Jonathan Neal's
3 | // normalize.css v3.0.1 | MIT License | github.com/necolas/normalize.css
4 | // =============================================================================
5 |
6 | //
7 | // Variables
8 | // ====================================================================
9 |
10 | // Base font-family
11 | @base-font-family: sans-serif;
12 |
13 | // The base font size
14 | @base-font-size: 16px;
15 |
16 | // The base line height determines the basic unit of vertical rhythm.
17 | @base-line-height: 24px;
18 |
19 | // Heading sizes
20 | @h1-size: 36px;
21 |
22 |
23 | //
24 | // Mixins
25 | // ====================================================================
26 |
27 | //
28 | // Passing in a single value will create font-sizing in
29 | // pixels, rems as well as a proper line-height.
30 | //
31 | // `.font-size(24px, false);`
32 | //
33 |
34 | .font-size(@font-size, @line-height: true) {
35 | @px-value: (@font-size);
36 | @rem-value: (@font-size / @base-font-size) * 1rem;
37 | @line-height-value: ceil(@font-size / @base-line-height) * (@base-line-height / @font-size);
38 |
39 | font-size: ~"@{px-value}";
40 | font-size: @rem-value;
41 |
42 | .line-height(@boolean) when (@boolean = true) {
43 | line-height: unit(@line-height-value);
44 | }
45 |
46 | .line-height(@line-height);
47 | }
48 |
49 |
50 | //
51 | // 1. Set default font family to sans-serif.
52 | // 2. Prevent iOS and IE text size adjust after device orientation change,
53 | // without disabling user zoom.
54 | //
55 |
56 | html {
57 | font-size: 100%; // 1 //
58 | -ms-text-size-adjust: 100%; // 2 //
59 | -webkit-text-size-adjust: 100%; // 2 //
60 | }
61 |
62 |
63 | //
64 | // Remove default margin.
65 | //
66 |
67 | body { margin: 0; }
68 |
69 |
70 | //
71 | // HTML5 display definitions
72 | // ====================================================================
73 |
74 | //
75 | // Correct `block` display not defined for any HTML5 element in IE 8/9.
76 | // Correct `block` display not defined for `details` or `summary` in IE 10/11
77 | // and Firefox.
78 | // Correct `block` display not defined for `main` in IE 11.
79 | //
80 |
81 | article,
82 | aside,
83 | details,
84 | figcaption,
85 | figure,
86 | footer,
87 | header,
88 | hgroup,
89 | menu,
90 | main,
91 | nav,
92 | section,
93 | summary { display: block; }
94 |
95 |
96 | //
97 | // 1. Correct `inline-block` display not defined in IE 8/9.
98 | // 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
99 | //
100 |
101 | audio,
102 | canvas,
103 | progress,
104 | video {
105 | display: inline-block; // 1 //
106 | vertical-align: baseline; // 2 //
107 | }
108 |
109 |
110 | //
111 | // Prevent modern browsers from displaying `audio` without controls.
112 | // Remove excess height in iOS 5 devices.
113 | //
114 |
115 | audio:not([controls]) {
116 | display: none;
117 | height: 0;
118 | }
119 |
120 |
121 | //
122 | // Address `[hidden]` styling not present in IE 8/9/10.
123 | // Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
124 | //
125 |
126 | [hidden],
127 | template { display: none; }
128 |
129 |
130 | //
131 | // Links
132 | // ====================================================================
133 |
134 | //
135 | // Remove the gray background color from active links in IE 10.
136 | //
137 |
138 | a {
139 | background-color: transparent;
140 |
141 |
142 | //
143 | // Improve readability of focused elements when they are also in an
144 | // active/hover state.
145 | //
146 |
147 | &:focus { outline: thin dotted; }
148 |
149 | &:active,
150 | &:hover { outline: 0; }
151 | }
152 |
153 |
154 | //
155 | // Text-level semantics
156 | // ====================================================================
157 |
158 | //
159 | // Address styling not present in IE 8/9/10/11, Safari, and Chrome.
160 | //
161 |
162 | abbr[title] { border-bottom: 1px dotted; }
163 |
164 |
165 | //
166 | // Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
167 | //
168 |
169 | b,
170 | strong { font-weight: bold; }
171 |
172 |
173 | //
174 | // Address styling not present in Safari and Chrome.
175 | //
176 |
177 | dfn { font-style: italic; }
178 |
179 |
180 | //
181 | // Address variable `h1` font-size and margin within `section` and `article`
182 | // contexts in Firefox 4+, Safari, and Chrome.
183 | //
184 |
185 | h1 {
186 | .font-size(@h1-size);
187 | margin: 0.67em 0;
188 | }
189 |
190 |
191 | //
192 | // Address styling not present in IE 8/9.
193 | //
194 |
195 | mark {
196 | background: #ff0;
197 | color: #000;
198 | }
199 |
200 |
201 | //
202 | // Address inconsistent and variable font size in all browsers.
203 | //
204 |
205 | small { font-size: 80%; }
206 |
207 |
208 | //
209 | // Prevent `sub` and `sup` affecting `line-height` in all browsers.
210 | //
211 |
212 | sub,
213 | sup {
214 | font-size: 75%;
215 | line-height: 0;
216 | position: relative;
217 | vertical-align: baseline;
218 | }
219 |
220 | sup { top: -0.5em; }
221 |
222 | sub { bottom: -0.25em; }
223 |
224 |
225 | //
226 | // Embedded content
227 | // ====================================================================
228 |
229 | //
230 | // Remove border when inside `a` element in IE 8/9/10.
231 | //
232 |
233 | img { border: 0; }
234 |
235 |
236 | //
237 | // Correct overflow not hidden in IE 9/10/11.
238 | //
239 |
240 | svg:not(:root) { overflow: hidden; }
241 |
242 |
243 | //
244 | // Grouping content
245 | // ====================================================================
246 |
247 | //
248 | // Address margin not present in IE 8/9 and Safari.
249 | //
250 |
251 | figure { margin: 1em 40px; }
252 |
253 |
254 | //
255 | // Address differences between Firefox and other browsers.
256 | //
257 |
258 | hr {
259 | box-sizing: content-box;
260 | height: 0;
261 | }
262 |
263 |
264 | //
265 | // Contain overflow in all browsers.
266 | //
267 |
268 | pre { overflow: auto; }
269 |
270 |
271 | //
272 | // Address odd `em`-unit font size rendering in all browsers.
273 | //
274 |
275 | code,
276 | kbd,
277 | pre,
278 | samp {
279 | font-family: monospace, monospace;
280 | .font-size(@base-font-size);
281 | }
282 |
283 |
284 |
285 | //
286 | // Forms
287 | // ====================================================================
288 |
289 | //
290 | // Known limitation: by default, Chrome and Safari on OS X allow very limited
291 | // styling of `select`, unless a `border` property is set.
292 | //
293 |
294 | //
295 | // 1. Correct color not being inherited.
296 | // Known issue: affects color of disabled elements.
297 | // 2. Correct font properties not being inherited.
298 | // 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
299 | //
300 |
301 | button,
302 | input,
303 | optgroup,
304 | select,
305 | textarea {
306 | color: inherit; // 1 //
307 | font: inherit; // 1 //
308 | margin: 0; // 1 //
309 | }
310 |
311 |
312 | //
313 | // Address `overflow` set to `hidden` in IE 8/9/10/11.
314 | //
315 |
316 | button { overflow: visible; }
317 |
318 |
319 | //
320 | // Address inconsistent `text-transform` inheritance for `button` and `select`.
321 | // All other form control elements do not inherit `text-transform` values.
322 | // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
323 | // Correct `select` style inheritance in Firefox.
324 | //
325 |
326 | button,
327 | select { text-transform: none; }
328 |
329 |
330 | //
331 | // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
332 | // and `video` controls.
333 | // 2. Correct inability to style clickable `input` types in iOS.
334 | // 3. Improve usability and consistency of cursor style between image-type
335 | // `input` and others.
336 | //
337 |
338 | button,
339 | html input[type="button"], // 1 //
340 | input[type="reset"],
341 | input[type="submit"] {
342 | -webkit-appearance: button; // 2 //
343 | cursor: pointer; // 3 //
344 | }
345 |
346 |
347 | //
348 | // Re-set default cursor for disabled elements.
349 | //
350 |
351 | button[disabled],
352 | html input[disabled] { cursor: default; }
353 |
354 |
355 | //
356 | // Remove inner padding and border in Firefox 4+.
357 | //
358 |
359 | button::-moz-focus-inner,
360 | input::-moz-focus-inner {
361 | border: 0;
362 | padding: 0;
363 | }
364 |
365 |
366 | //
367 | // Address Firefox 4+ setting `line-height` on `input` using `!important` in
368 | // the UA stylesheet.
369 | //
370 |
371 | input {
372 | line-height: normal;
373 |
374 |
375 | //
376 | // It's recommended that you don't attempt to style these elements.
377 | // Firefox's implementation doesn't respect box-sizing, padding, or width.
378 | //
379 | // 1. Address box sizing set to `content-box` in IE 8/9/10.
380 | // 2. Remove excess padding in IE 8/9/10.
381 | //
382 |
383 | &[type="checkbox"],
384 | &[type="radio"] {
385 | box-sizing: border-box; // 1 //
386 | padding: 0; // 2 //
387 | }
388 |
389 |
390 | //
391 | // Fix the cursor style for Chrome's increment/decrement buttons. For certain
392 | // `font-size` values of the `input`, it causes the cursor style of the
393 | // decrement button to change from `default` to `text`.
394 | //
395 |
396 | &[type="number"] {
397 | &::-webkit-inner-spin-button,
398 | &::-webkit-outer-spin-button { height: auto; }
399 | }
400 |
401 |
402 | //
403 | // 1. Address `appearance` set to `searchfield` in Safari and Chrome.
404 | // 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
405 | //
406 |
407 | &[type="search"] {
408 | -webkit-appearance: textfield; // 1 //
409 | box-sizing: content-box; // 2 //
410 |
411 |
412 | //
413 | // Remove inner padding and search cancel button in Safari and Chrome on OS X.
414 | // Safari (but not Chrome) clips the cancel button when the search input has
415 | // padding (and `textfield` appearance).
416 | //
417 |
418 | &::-webkit-search-cancel-button,
419 | &::-webkit-search-decoration { -webkit-appearance: none; }
420 | }
421 | }
422 |
423 |
424 | //
425 | // Define consistent border, margin, and padding.
426 | //
427 |
428 | fieldset {
429 | border: 1px solid #c0c0c0;
430 | margin: 0 2px;
431 | padding: 0.35em 0.625em 0.75em;
432 | }
433 |
434 |
435 | //
436 | // 1. Correct `color` not being inherited in IE 8/9/10/11.
437 | // 2. Remove padding so people aren't caught out if they zero out fieldsets.
438 | //
439 |
440 | legend {
441 | border: 0; // 1 //
442 | padding: 0; // 2 //
443 | }
444 |
445 |
446 | //
447 | // Remove default vertical scrollbar in IE 8/9/10/11.
448 | //
449 |
450 | textarea { overflow: auto; }
451 |
452 |
453 | //
454 | // Don't inherit the `font-weight` (applied by a rule above).
455 | // NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
456 | //
457 |
458 | optgroup { font-weight: bold; }
459 |
460 |
461 | //
462 | // Tables
463 | // ====================================================================
464 |
465 | //
466 | // Remove most spacing between table cells.
467 | //
468 |
469 | table {
470 | border-collapse: collapse;
471 | border-spacing: 0;
472 | }
473 |
474 | td,
475 | th { padding: 0; }
476 |
--------------------------------------------------------------------------------
/src/assets/scss/normalize.scss:
--------------------------------------------------------------------------------
1 | // =============================================================================
2 | // Normalize.scss based on Nicolas Gallagher and Jonathan Neal's
3 | // normalize.css v2.1.3 | MIT License | git.io/normalize
4 | // =============================================================================
5 |
6 | // =============================================================================
7 | // Normalize.scss settings
8 | // =============================================================================
9 |
10 |
11 | // Set to true if you want to add support for IE6 and IE7
12 | // Notice: setting to true might render some elements
13 | // slightly differently than when set to false
14 | $legacy_support_for_ie: false !default; // Used also in Compass
15 |
16 |
17 | // Set the default font family here so you don't have to override it later
18 | $normalized_font_family: sans-serif !default;
19 |
20 | $normalize_headings: true !default;
21 |
22 | $h1_font_size: 2em !default;
23 | $h2_font_size: 1.5em !default;
24 | $h3_font_size: 1.17em !default;
25 | $h4_font_size: 1em !default;
26 | $h5_font_size: 0.83em !default;
27 | $h6_font_size: 0.75em !default;
28 |
29 | $h1_margin: 0.67em 0 !default;
30 | $h2_margin: 0.83em 0 !default;
31 | $h3_margin: 1em 0 !default;
32 | $h4_margin: 1.33em 0 !default;
33 | $h5_margin: 1.67em 0 !default;
34 | $h6_margin: 2.33em 0 !default;
35 |
36 | $background: #fff !default;
37 | $color: #000 !default;
38 |
39 | // =============================================================================
40 | // HTML5 display definitions
41 | // =============================================================================
42 |
43 | // Corrects block display not defined in IE6/7/8/9 & FF3
44 |
45 | article,
46 | aside,
47 | details,
48 | figcaption,
49 | figure,
50 | footer,
51 | header,
52 | hgroup,
53 | nav,
54 | section,
55 | summary {
56 | display: block;
57 | }
58 |
59 | // Corrects inline-block display not defined in IE6/7/8/9 & FF3
60 |
61 | audio,
62 | canvas,
63 | video {
64 | display: inline-block;
65 | @if $legacy_support_for_ie {
66 | *display: inline;
67 | *zoom: 1;
68 | }
69 | }
70 |
71 | // 1. Prevents modern browsers from displaying 'audio' without controls
72 | // 2. Remove excess height in iOS5 devices
73 |
74 | audio:not([controls]) {
75 | display: none; // 1
76 | height: 0; // 2
77 | }
78 |
79 | //
80 | // Address `[hidden]` styling not present in IE 8/9.
81 | // Hide the `template` element in IE, Safari, and Firefox < 22.
82 | //
83 |
84 | [hidden], template {
85 | display: none;
86 | }
87 |
88 | // =============================================================================
89 | // Base
90 | // =============================================================================
91 |
92 | // 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
93 | // http://clagnut.com/blog/348/#c790
94 | // 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
95 | // www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
96 |
97 | html {
98 | @if $legacy_support_for_ie {
99 | font-size: 100%; // 1
100 | }
101 | background: $background;
102 | color: $color;
103 | -webkit-text-size-adjust: 100%; // 2
104 | -ms-text-size-adjust: 100%; // 2
105 | }
106 |
107 | // Addresses font-family inconsistency between 'textarea' and other form elements.
108 |
109 | html,
110 | button,
111 | input,
112 | select,
113 | textarea {
114 | font-family: $normalized_font_family;
115 | }
116 |
117 | // Addresses margins handled incorrectly in IE6/7
118 |
119 | body {
120 | margin: 0;
121 | }
122 |
123 | // =============================================================================
124 | // Links
125 | // =============================================================================
126 |
127 | // 1. Remove the gray background color from active links in IE 10.
128 | // 2. Addresses outline displayed oddly in Chrome
129 | // 3. Improves readability when focused and also mouse hovered in all browsers
130 | // people.opera.com/patrickl/experiments/keyboard/test
131 |
132 | a {
133 | // 1
134 |
135 | background: transparent;
136 |
137 | // 2
138 |
139 | &:focus {
140 | outline: thin dotted;
141 | }
142 |
143 | // 3
144 |
145 | &:hover,
146 | &:active {
147 | outline: 0;
148 | }
149 | }
150 |
151 | // =============================================================================
152 | // Typography
153 | // =============================================================================
154 |
155 | // Addresses font sizes and margins set differently in IE6/7
156 | // Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
157 |
158 | @if $normalize_headings == true {
159 | h1 {
160 | font-size: $h1_font_size;
161 | margin: $h1_margin;
162 | }
163 |
164 | h2 {
165 | font-size: $h2_font_size;
166 | margin: $h2_margin;
167 | }
168 |
169 | h3 {
170 | font-size: $h3_font_size;
171 | margin: $h3_margin;
172 | }
173 |
174 | h4 {
175 | font-size: $h4_font_size;
176 | margin: $h4_margin;
177 | }
178 |
179 | h5 {
180 | font-size: $h5_font_size;
181 | margin: $h5_margin;
182 | }
183 |
184 | h6 {
185 | font-size: $h6_font_size;
186 | margin: $h6_margin;
187 | }
188 | }
189 |
190 | // Addresses styling not present in IE 8/9, S5, Chrome
191 |
192 | abbr[title] {
193 | border-bottom: 1px dotted;
194 | }
195 |
196 | // Addresses style set to 'bolder' in FF3+, S4/5, Chrome
197 |
198 | b,
199 | strong {
200 | font-weight: bold;
201 | }
202 |
203 | @if $legacy_support_for_ie {
204 | blockquote {
205 | margin: 1em 40px;
206 | }
207 | }
208 |
209 | // Addresses styling not present in S5, Chrome
210 |
211 | dfn {
212 | font-style: italic;
213 | }
214 |
215 | // Addresses styling not present in IE6/7/8/9
216 |
217 | mark {
218 | background: #ff0;
219 | color: #000;
220 | }
221 |
222 | // Addresses margins set differently in IE6/7
223 | @if $legacy_support_for_ie {
224 | p,
225 | pre {
226 | margin: 1em 0;
227 | }
228 | }
229 |
230 | // Corrects font family set oddly in IE6, S4/5, Chrome
231 | // en.wikipedia.org/wiki/User:Davidgothberg/Test59
232 |
233 | code,
234 | kbd,
235 | pre,
236 | samp {
237 | font-family: monospace, serif;
238 | @if $legacy_support_for_ie {
239 | _font-family: 'courier new', monospace;
240 | }
241 | font-size: 1em;
242 | }
243 |
244 | // Improves readability of pre-formatted text in all browsers
245 |
246 | pre {
247 | white-space: pre;
248 | white-space: pre-wrap;
249 | word-wrap: break-word;
250 | }
251 |
252 | // Set consistent quote types.
253 |
254 | q {
255 | quotes: "\201C" "\201D" "\2018" "\2019";
256 | }
257 |
258 | // 1. Addresses CSS quotes not supported in IE6/7
259 | // 2. Addresses quote property not supported in S4
260 |
261 | // 1
262 | @if $legacy_support_for_ie {
263 | q {
264 | quotes: none;
265 | }
266 | }
267 |
268 | // 2
269 | q {
270 | &:before,
271 | &:after {
272 | content: '';
273 | content: none;
274 | }
275 | }
276 |
277 | // Address inconsistent and variable font size in all browsers.
278 |
279 | small {
280 | font-size: 80%;
281 | }
282 |
283 | // Prevents sub and sup affecting line-height in all browsers
284 | // gist.github.com/413930
285 |
286 | sub,
287 | sup {
288 | font-size: 75%;
289 | line-height: 0;
290 | position: relative;
291 | vertical-align: baseline;
292 | }
293 |
294 | sup {
295 | top: -0.5em;
296 | }
297 |
298 | sub {
299 | bottom: -0.25em;
300 | }
301 |
302 | // =============================================================================
303 | // Lists
304 | // =============================================================================
305 |
306 | // Addresses margins set differently in IE6/7
307 | @if $legacy_support_for_ie {
308 | dl,
309 | menu,
310 | ol,
311 | ul {
312 | margin: 1em 0;
313 | }
314 | }
315 |
316 | @if $legacy_support_for_ie {
317 | dd {
318 | margin: 0 0 0 40px;
319 | }
320 | }
321 |
322 | // Addresses paddings set differently in IE6/7
323 | @if $legacy_support_for_ie {
324 | menu,
325 | ol,
326 | ul {
327 | padding: 0 0 0 40px;
328 | }
329 | }
330 |
331 | // Corrects list images handled incorrectly in IE7
332 |
333 | nav {
334 | ul,
335 | ol {
336 | @if $legacy_support_for_ie {
337 | list-style-image: none;
338 | }
339 | }
340 | }
341 |
342 | // =============================================================================
343 | // Embedded content
344 | // =============================================================================
345 |
346 | // 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
347 | // 2. Improves image quality when scaled in IE7
348 | // code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
349 |
350 | img {
351 | border: 0; // 1
352 | @if $legacy_support_for_ie {
353 | -ms-interpolation-mode: bicubic; // 2
354 | }
355 | }
356 |
357 | // Corrects overflow displayed oddly in IE9
358 |
359 | svg:not(:root) {
360 | overflow: hidden;
361 | }
362 |
363 | // =============================================================================
364 | // Figures
365 | // =============================================================================
366 |
367 | // Addresses margin not present in IE6/7/8/9, S5, O11
368 |
369 | figure {
370 | margin: 0;
371 | }
372 |
373 | // =============================================================================
374 | // Forms
375 | // =============================================================================
376 |
377 | // Corrects margin displayed oddly in IE6/7
378 | @if $legacy_support_for_ie {
379 | form {
380 | margin: 0;
381 | }
382 | }
383 |
384 | // Define consistent border, margin, and padding
385 |
386 | fieldset {
387 | border: 1px solid #c0c0c0;
388 | margin: 0 2px;
389 | padding: 0.35em 0.625em 0.75em;
390 | }
391 |
392 | // 1. Corrects color not being inherited in IE6/7/8/9
393 | // 2. Remove padding so people aren't caught out if they zero out fieldsets.
394 | // 3. Corrects text not wrapping in FF3
395 | // 4. Corrects alignment displayed oddly in IE6/7
396 |
397 | legend {
398 | border: 0; // 1
399 | padding: 0; // 2
400 | white-space: normal; // 3
401 | @if $legacy_support_for_ie {
402 | *margin-left: -7px; // 4
403 | }
404 | }
405 |
406 | // 1. Correct font family not being inherited in all browsers.
407 | // 2. Corrects font size not being inherited in all browsers
408 | // 3. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
409 | // 4. Improves appearance and consistency in all browsers
410 |
411 | button,
412 | input,
413 | select,
414 | textarea {
415 | font-family: inherit; // 1
416 | font-size: 100%; // 2
417 | margin: 0; // 3
418 | vertical-align: baseline; // 4
419 | @if $legacy_support_for_ie {
420 | *vertical-align: middle; // 4
421 | }
422 | }
423 |
424 | // Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
425 |
426 | button, input {
427 | line-height: normal;
428 | }
429 |
430 | // Address inconsistent `text-transform` inheritance for `button` and `select`.
431 | // All other form control elements do not inherit `text-transform` values.
432 | // Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
433 | // Correct `select` style inheritance in Firefox 4+ and Opera.
434 |
435 | button,
436 | select {
437 | text-transform: none;
438 | }
439 |
440 | // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
441 | // and `video` controls
442 | // 2. Corrects inability to style clickable 'input' types in iOS
443 | // 3. Improves usability and consistency of cursor style between image-type
444 | // 'input' and others
445 | // 4. Removes inner spacing in IE7 without affecting normal text inputs
446 | // Known issue: inner spacing remains in IE6
447 |
448 | button,
449 | html input[type="button"], // 1
450 | input[type="reset"],
451 | input[type="submit"] {
452 | -webkit-appearance: button; // 2
453 | cursor: pointer; // 3
454 | @if $legacy_support_for_ie {
455 | *overflow: visible; // 4
456 | }
457 | }
458 |
459 | // Re-set default cursor for disabled elements
460 |
461 | button[disabled],
462 | input[disabled] {
463 | cursor: default;
464 | }
465 |
466 | // Removes inner padding and border in FF3+
467 | // www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
468 |
469 | button, input {
470 | &::-moz-focus-inner {
471 | border: 0;
472 | padding: 0;
473 | }
474 | }
475 |
476 | // 1. Removes default vertical scrollbar in IE6/7/8/9
477 | // 2. Improves readability and alignment in all browsers
478 |
479 | textarea {
480 | overflow: auto; // 1
481 | vertical-align: top; // 2
482 | }
483 |
484 | // =============================================================================
485 | // Tables
486 | // =============================================================================
487 |
488 | // Remove most spacing between table cells
489 |
490 | table {
491 | border-collapse: collapse;
492 | border-spacing: 0;
493 | }
494 |
495 | input {
496 | // 1. Addresses appearance set to searchfield in S5, Chrome
497 | // 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
498 | &[type="search"] {
499 | -webkit-appearance: textfield; // 1
500 | -moz-box-sizing: content-box;
501 | -webkit-box-sizing: content-box; // 2
502 | box-sizing: content-box;
503 |
504 | // Remove inner padding and search cancel button in Safari 5 and Chrome
505 | // on OS X.
506 | &::-webkit-search-cancel-button,
507 | &::-webkit-search-decoration {
508 | -webkit-appearance: none;
509 | }
510 | }
511 |
512 | // 1. Address box sizing set to `content-box` in IE 8/9/10.
513 | // 2. Remove excess padding in IE 8/9/10.
514 | // 3. Removes excess padding in IE7
515 | // Known issue: excess padding remains in IE6
516 | &[type="checkbox"],
517 | &[type="radio"] {
518 | box-sizing: border-box; // 1
519 | padding: 0; // 2
520 | @if $legacy_support_for_ie {
521 | *height: 13px; // 3
522 | *width: 13px; // 3
523 | }
524 | }
525 | }
526 |
--------------------------------------------------------------------------------
/src/components/404.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class NotFound extends Component {
4 | static contextTypes = {
5 | router: React.PropTypes.object.isRequired
6 | }
7 |
8 | componentWillMount() {
9 | alert('404 NOT FOUND')
10 | this.context.router.replace('/')
11 | }
12 |
13 | render () {
14 | // 非实体组件需显式返回 null
15 | return null
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Navbar from 'COMPONENT/Navbar/'
3 |
4 | let DevTools
5 | if (__DEV__ && __COMPONENT_DEVTOOLS__) {
6 | // 组件形式的 Redux DevTools
7 | DevTools = require('COMPONENT/DevTools').default
8 | }
9 |
10 | const App = ({ children, location }) => (
11 |
12 |
13 |
14 |
15 | {/* 相当于 Vue Demo 中的根 router-view */}
16 | { children }
17 |
18 |
19 | { DevTools &&
}
20 |
45 |
46 | 标题：
47 | { msg.title }
48 |
49 | { dateTimeFormatter(msg.time) }
50 |
51 |
52 | 发布者：
53 |
54 | { msg.author }
55 |
56 |
57 |
62 |
67 |
68 |
69 |
70 | { msg.content }
71 |
72 |
6 |
12 | 暂无更多信息
13 |
14 | )
15 |
16 | export default NoticeBar
17 |
--------------------------------------------------------------------------------
/src/components/Msg/MsgList/Pagination.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ExampleHoC from 'HOC/ExampleHoC'
3 |
4 | const Pagination = ({ msgsLen, pageIdx, quantity, goPrevPage, goNextPage }) => (
5 |
31 | )
32 |
33 | export default ExampleHoC(Pagination)
34 |
--------------------------------------------------------------------------------
/src/components/Msg/MsgList/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Link } from 'react-router'
3 | import Pagination from './Pagination'
4 | import NoticeBar from './NoticeBar'
5 | import DisplayControl from './DisplayControl'
6 | import OptBtnGroup from 'COMPONENT/Msg/OptBtnGroup'
7 | import dateTimeFormatter from 'UTIL/dateTimeFormatter'
8 |
9 | export default class MsgList extends Component {
10 | componentWillMount () {
11 | let { author } = this.props.location.query
12 | this.props.specifyAuthor(author)
13 | this.updateMsgList()
14 | }
15 | /**
16 | * 类似于 Vue 中的 route: { data: Function } 属性，监听路由变化加载数据
17 | * 【拓展阅读】无限循环坑 http://stackoverflow.com/questions/36189775
18 | */
19 | componentWillReceiveProps (nextProps) {
20 | // query string 变化
21 | if (nextProps.location.search !== this.props.location.search) {
22 | return this.props.specifyAuthor(nextProps.location.query.author)
23 | }
24 |
25 | const nextDisplayControl = nextProps.msg.displayControl
26 | if (
27 | JSON.stringify(nextDisplayControl) ===
28 | JSON.stringify(this.props.msg.displayControl)
29 | ) return
30 |
31 | this.updateMsgList(nextDisplayControl)
32 | }
33 |
34 | updateMsgList (displayControl = this.props.msg.displayControl) {
35 | let { pageIdx, quantity, authorSpecified: author } = displayControl
36 | this.props.fetchMsg({ pageIdx, quantity, author })
37 | }
38 |
39 | render () {
40 | let { msg: { msgs, displayControl }, userData,
41 | delMsg, goPrevPage, goNextPage,
42 | changeQuantity, resetDisplayControl } = this.props
43 |
44 | return (
45 |
46 |
51 |
52 | { !msgs.length &&
}
53 |
54 |
59 |
60 |
61 | { msgs.map(msg =>
62 | -
63 |
64 | { msg.title }
65 |
66 |
67 | { dateTimeFormatter(msg.time, 3) }
68 |
69 |
70 | by
71 |
72 | { msg.author }
73 |
74 |
75 |
79 |
82 | 查看详情
83 |
84 |
85 |
86 | )}
87 |
88 |
29 | {/* 这里的作用有点类似于 Vue 的 slot
30 | MsgList 中，
包的是“详情”链接
31 | MsgDetail 中， 包的是“返回”按钮 */
32 | children }
33 |
34 | {/* 鉴于使用父标签包含后无法匹配 BootStrap 样式
35 | 因此下面只能分离判断 */}
36 | { isAuthor &&
37 |
40 | 修改
41 |
42 | }
43 | { isAuthor &&
44 | this.delMsg()}>
47 | 删除
48 |
49 | }
50 |
28 |
29 |
69 |
70 |
15 |
16 | { todos.map(todo =>
17 | - toggleTodo(todo.id)}>
18 |
19 | { todo.content }
20 |
21 | this.delTodo(todo.id)}>
25 | ⊗
26 |
27 |
28 | { dateTimeFormatter(todo.createdAt) }
29 |
30 |
31 | )}
32 |
33 |
34 |
13 |
欢迎使用
React Demo
14 |
15 |
19 | 前往留言板 >
20 |
21 |
22 |
26 | 前往待办事项(新功能) >
27 |
28 |
29 |
7 | { !location.pathname.startsWith('/msg/add') &&
8 |
11 | 添加消息
12 |
13 |
14 | }
15 |
16 | { children }
17 |
18 | )
19 |
20 | export default MsgView
21 |
--------------------------------------------------------------------------------
/src/views/todo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | /* 待办事项 布局基页 */
4 | const TodoView = ({ children }) => (
5 |
6 |
8 |
14 | 该 Todo 示例无需 后端 RESTful API 支持
15 |
16 | { children }
17 |