├── .gitignore ├── demo1 ├── .gitignore ├── src │ ├── index.html │ ├── Index.jsx │ ├── test.js │ └── HelloMessage.jsx ├── webpack │ ├── webpack.dev.config.js │ ├── webpack.prod.config.js │ └── webpack.config.js ├── server.js ├── package.json ├── assets │ ├── index.js │ └── index.html └── 1.入门基础（demo1解释）.md ├── demo2 ├── .gitignore ├── src │ ├── index.html │ ├── css │ │ └── index.css │ ├── Index.jsx │ ├── CenterConter.jsx │ ├── HelloMessage.jsx │ ├── Top.jsx │ ├── Tree.jsx │ └── CenterTable.jsx ├── webpack │ ├── webpack.dev.config.js │ ├── webpack.prod.config.js │ └── webpack.config.js ├── 2.入门基础（demo2解释）.md ├── mock │ ├── countrylist │ │ ├── viewstate.js │ │ └── records.js │ └── mainframe │ │ └── viewstate.js ├── server.js ├── package.json └── assets │ ├── index.js │ └── index.html ├── 开发测试文档.md ├── demo3 ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── src │ ├── index.css │ ├── App.test.js │ ├── index.js │ ├── App.js │ ├── App.css │ ├── logo.svg │ ├── MyCalendar.jsx │ └── registerServiceWorker.js ├── .idea │ ├── encodings.xml │ ├── misc.xml │ ├── modules.xml │ ├── demo3.iml │ └── workspace.xml ├── .gitignore ├── package.json └── README.md ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /.idea/ -------------------------------------------------------------------------------- /demo1/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /.idea/ -------------------------------------------------------------------------------- /demo2/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /.idea/ -------------------------------------------------------------------------------- /开发测试文档.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzmhost/ReactDemo/HEAD/开发测试文档.md -------------------------------------------------------------------------------- /demo3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzmhost/ReactDemo/HEAD/demo3/public/favicon.ico -------------------------------------------------------------------------------- /demo3/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /demo3/.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /demo1/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /demo3/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /demo2/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /demo1/src/Index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom'; 3 | import HelloMessage from './HelloMessage'; 4 | 5 | ReactDOM.render( 6 | 7 | , document.getElementById('root')) -------------------------------------------------------------------------------- /demo1/src/test.js: -------------------------------------------------------------------------------- 1 | let a1 = 1, b1 = 2, c1 = 3; 2 | 3 | export const a = function() { 4 | alert(a1); 5 | } 6 | 7 | export const b = function() { 8 | alert(b1); 9 | } 10 | 11 | export const c = function() { 12 | alert(c1); 13 | } -------------------------------------------------------------------------------- /demo1/webpack/webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | const config = require('./webpack.config.js'); 2 | const path = require('path'); 3 | 4 | // 开发环境使用本项目中的build目录最为编译目录。 5 | config.output.path = path.resolve(__dirname, '../assets'); 6 | 7 | module.exports = config; -------------------------------------------------------------------------------- /demo2/webpack/webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | const config = require('./webpack.config.js'); 2 | const path = require('path'); 3 | 4 | // 开发环境使用本项目中的build目录最为编译目录。 5 | config.output.path = path.resolve(__dirname, '../assets'); 6 | 7 | module.exports = config; -------------------------------------------------------------------------------- /demo3/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /demo2/2.入门基础（demo2解释）.md: -------------------------------------------------------------------------------- 1 | # 1.基础入门（demo2解释） 2 | 3 | ## 前言 4 | 该文档主要讲解demo2的相关结构内容，ant design是什么，怎么用。 5 | *** 6 | ## 目录 7 | 1. 简单介绍ant design; 8 | 2. 简单介绍面向对象编程 9 | 3. React项目demo2的结构; 10 | 4. fetch 11 | 5. 异步加载 12 | 6. 13 | *** 14 | ### 1.简单介绍ant design 15 | -------------------------------------------------------------------------------- /demo3/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /demo3/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /demo2/src/css/index.css: -------------------------------------------------------------------------------- 1 | .sty1{ 2 | background-color: red; 3 | color: white; 4 | font-size: 40px; 5 | } 6 | .sty2{ 7 | background-color: #666666; 8 | color: white; 9 | font-size: 40px; 10 | } 11 | .mgrt15{ 12 | margin-right: 15px; 13 | } 14 | .colorRed{ 15 | color: RED; 16 | } -------------------------------------------------------------------------------- /demo3/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /demo3/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /demo3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo3", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.0.0", 7 | "react-dom": "^16.0.0", 8 | "react-scripts": "1.0.17" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /demo2/mock/countrylist/viewstate.js: -------------------------------------------------------------------------------- 1 | module.exports = function() { 2 | 3 | let recordsGenerator = require('./records'); 4 | let pagingResult = recordsGenerator(); 5 | 6 | return { 7 | "btnCreateVisible": true, 8 | "btnRefreshVisible": true, 9 | "btnDeleteVisible": true, 10 | "total": pagingResult.total, 11 | "records": pagingResult.records 12 | } 13 | 14 | } 15 | 16 | 17 | -------------------------------------------------------------------------------- /demo3/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | import MyCalendar from './MyCalendar' 5 | 6 | 7 | class App extends Component { 8 | render() { 9 | return ( 10 |
11 |
12 | 13 |
14 |
15 | ); 16 | } 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /demo2/src/Index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom'; 3 | import CenterConter from './CenterConter'; 4 | import Top from './Top'; 5 | import { Row, Col } from 'antd'; 6 | import './css/index.css'; 7 | 8 | {/* this is React 注释*/} 9 | 10 | ReactDOM.render( 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | /* */ 21 | , document.getElementById('root')) -------------------------------------------------------------------------------- /demo1/webpack/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | const config = require('./webpack.config.js'); 2 | const path = require('path'); 3 | 4 | // 生产环境要将代码编译至java项目。 5 | config.output.path = path.join('C:', 'workbench', 'temp', 'react'); 6 | 7 | // 资源压缩。 8 | config.plugins.push(new webpack.optimize.UglifyJsPlugin({ 9 | compress: { 10 | warnings: false 11 | } 12 | })); 13 | 14 | // 去除React属性检查代码。 15 | config.module.loaders[0].query.plugins.push("transform-react-remove-prop-types"); 16 | 17 | module.exports = config; -------------------------------------------------------------------------------- /demo2/webpack/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | const config = require('./webpack.config.js'); 2 | const path = require('path'); 3 | 4 | // 生产环境要将代码编译至java项目。 5 | config.output.path = path.join('C:', 'workbench', 'temp', 'react'); 6 | 7 | // 资源压缩。 8 | config.plugins.push(new webpack.optimize.UglifyJsPlugin({ 9 | compress: { 10 | warnings: false 11 | } 12 | })); 13 | 14 | // 去除React属性检查代码。 15 | config.module.loaders[0].query.plugins.push("transform-react-remove-prop-types"); 16 | 17 | module.exports = config; -------------------------------------------------------------------------------- /demo3/.idea/demo3.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /demo3/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /demo2/mock/countrylist/records.js: -------------------------------------------------------------------------------- 1 | module.exports = function() { 2 | 3 | let Mock = require('mockjs'); 4 | let datas = Mock.mock({ 5 | "array|15": [{ 6 | "key": '@word', 7 | "no": '@word', 8 | "code": '@word', 9 | "countryname": '@county', 10 | "customer": '@cname', 11 | "workshop": '@word', 12 | "engineer": '@cname', 13 | "active|1": true, 14 | }] 15 | }); 16 | 17 | return { 18 | "records": datas.array, 19 | "total": 120 20 | } 21 | 22 | } 23 | 24 | 25 | -------------------------------------------------------------------------------- /demo1/src/HelloMessage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { a, b } from './test'; 4 | 5 | class HelloMessage extends React.Component { 6 | 7 | constructor(props) { 8 | super(props); 9 | 10 | this.state = { 11 | textVisible: false 12 | } 13 | } 14 | 15 | handClick() { 16 | this.setState({ 17 | textVisible: !this.state.textVisible 18 | }); 19 | } 20 | 21 | handClick2() { 22 | a(); 23 | } 24 | 25 | render() { 26 | 27 | let text = null; 28 | if (this.state.textVisible) { 29 | text = {this.props.text}; 30 | } 31 | 32 | return ( 33 |
34 | 35 | 36 | {text} 37 |
38 | ) 39 | 40 | } 41 | 42 | } 43 | 44 | HelloMessage.propTypes = { 45 | text: PropTypes.string.isRequired, 46 | }; 47 | 48 | export default HelloMessage; -------------------------------------------------------------------------------- /demo1/server.js: -------------------------------------------------------------------------------- 1 | const WebpackDevServer = require('webpack-dev-server'); 2 | const webpack = require('webpack'); 3 | const config = require('./webpack/webpack.dev.config.js'); 4 | const URL = require('url'); 5 | const host = 'localhost'; 6 | const port = 9090; 7 | 8 | // 项目资源访问路径，打包后的js和css都是通过下面的地址引用的。 9 | config.output.publicPath = '/assets/'; 10 | 11 | // 热替换脚本。这两个脚本必须和index打在一起，否则不生效。 12 | config.entry.index.unshift('webpack-dev-server/client?http://' + host + ':' + port, 'webpack/hot/dev-server'); // 指定webpack-dev-server的host+port。 13 | 14 | // 热替换插件。 15 | config.plugins.push(new webpack.HotModuleReplacementPlugin()); 16 | 17 | const compiler = webpack(config); 18 | const server = new WebpackDevServer(compiler, { 19 | hot: true, 20 | host: host, 21 | port: port, 22 | inline: true, 23 | stats: { 24 | colors: true 25 | }, 26 | contentBase: '/', 27 | publicPath: config.output.publicPath 28 | }); 29 | 30 | server.use('/api/*', function(req, res) { 31 | let baseUrl = req.baseUrl; 32 | baseUrl = baseUrl.replace('/api/', '/mock/'); 33 | let data = require('./' + baseUrl + '.json'); 34 | res.json(data); 35 | }); 36 | 37 | server.listen(9090); -------------------------------------------------------------------------------- /demo2/server.js: -------------------------------------------------------------------------------- 1 | const WebpackDevServer = require('webpack-dev-server'); 2 | const webpack = require('webpack'); 3 | const config = require('./webpack/webpack.dev.config.js'); 4 | const URL = require('url'); 5 | const host = 'localhost'; 6 | const port = 9090; 7 | 8 | // 项目资源访问路径，打包后的js和css都是通过下面的地址引用的。 9 | config.output.publicPath = '/assets/'; 10 | 11 | // 热替换脚本。这两个脚本必须和index打在一起，否则不生效。 12 | config.entry.index.unshift('webpack-dev-server/client?http://' + host + ':' + port, 'webpack/hot/dev-server'); // 指定webpack-dev-server的host+port。 13 | 14 | // 热替换插件。 15 | config.plugins.push(new webpack.HotModuleReplacementPlugin()); 16 | 17 | const compiler = webpack(config); 18 | const server = new WebpackDevServer(compiler, { 19 | hot: true, 20 | host: host, 21 | port: port, 22 | inline: true, 23 | stats: { 24 | colors: true 25 | }, 26 | contentBase: '/', 27 | publicPath: config.output.publicPath 28 | }); 29 | 30 | server.use('/api/*', function(req, res) { 31 | let baseUrl = req.baseUrl; 32 | baseUrl = baseUrl.replace('/api/', '/mock/'); 33 | let data = require('./' + baseUrl + '.js'); 34 | let dataJson = data(); 35 | res.json(dataJson); 36 | }); 37 | 38 | server.listen(9090); -------------------------------------------------------------------------------- /demo2/src/CenterConter.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CenterTable from './CenterTable'; 3 | import Tree1 from './Tree'; 4 | import { Row, Col } from 'antd'; 5 | var newState1 6 | class CenterConter extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | this.state= { 10 | a : [] 11 | } 12 | } 13 | 14 | onChildChanged(newState) { 15 | // console.log(newState) 16 | newState.map(function(item){ 17 | item.name = item.text 18 | item.age = 1 19 | item.address = item.text 20 | }) 21 | this.setState({ 22 | a: newState, 23 | }) 24 | return newState; 25 | } 26 | render(){ 27 | return( 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | ) 38 | } 39 | } 40 | 41 | export default CenterConter -------------------------------------------------------------------------------- /demo2/src/HelloMessage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { a, b } from './Tree'; 4 | 5 | 6 | class HelloMessage extends React.Component { 7 | 8 | constructor(props) { 9 | super(props); 10 | 11 | this.state = { 12 | textVisible: false 13 | } 14 | } 15 | 16 | handClick() { 17 | this.setState({ 18 | textVisible: !this.state.textVisible 19 | }); 20 | } 21 | onSelect(selectedKeys, info){ 22 | return ( 23 | console.log('selected', selectedKeys, info) 24 | ) 25 | } 26 | handClick2() { 27 | a(); 28 | } 29 | 30 | render() { 31 | 32 | let text = null; 33 | if (this.state.textVisible) { 34 | text = {this.props.text}; 35 | } 36 | 37 | return ( 38 |
39 | 40 | 41 | 42 | {text} 43 |
44 | ) 45 | 46 | } 47 | 48 | } 49 | 50 | HelloMessage.propTypes = { 51 | text: PropTypes.string.isRequired, 52 | }; 53 | 54 | export default HelloMessage; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017, 李啸吟 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | * Redistributions in binary form must reproduce the above copyright notice, this 11 | list of conditions and the following disclaimer in the documentation and/or 12 | other materials provided with the distribution. 13 | 14 | * Neither the name of the {organization} nor the names of its 15 | contributors may be used to endorse or promote products derived from 16 | this software without specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /demo1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo1", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build-dev": "webpack --config webpack/webpack.dev.config.js", 9 | "build": "webpack --config webpack/webpack.prod.config.js", 10 | "start": "node server.js" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "babel-core": "^6.26.0", 16 | "babel-loader": "^7.1.2", 17 | "babel-plugin-import": "^1.4.0", 18 | "babel-plugin-transform-react-remove-prop-types": "^0.4.8", 19 | "babel-preset-env": "^1.6.0", 20 | "babel-preset-es2015": "^6.24.1", 21 | "babel-preset-react": "^6.24.1", 22 | "css-loader": "^0.28.5", 23 | "extract-text-webpack-plugin": "^3.0.0", 24 | "file-loader": "^0.11.2", 25 | "html-webpack-plugin": "^2.30.1", 26 | "install": "^0.10.1", 27 | "mockjs": "^1.0.1-beta3", 28 | "postcss-loader": "^2.0.6", 29 | "react-router-dom": "^4.2.0", 30 | "style-loader": "^0.18.2", 31 | "url-loader": "^0.5.9", 32 | "webpack": "^3.5.5", 33 | "webpack-dev-server": "^2.7.1", 34 | "webpack-link": "^0.2.0" 35 | }, 36 | "dependencies": { 37 | "antd": "^2.12.7", 38 | "babel-polyfill": "^6.26.0", 39 | "es6-promise": "^4.1.1", 40 | "isomorphic-fetch": "^2.2.1", 41 | "prop-types": "^15.5.10", 42 | "react": "^15.6.1", 43 | "react-dom": "^15.6.1", 44 | "react-redux": "^5.0.6", 45 | "react-router": "^4.1.2", 46 | "redux": "^3.7.2", 47 | "redux-thunk": "^2.2.0", 48 | "commons-react": "git+https://git.oschina.net/magicsoft/commons-react.git" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /demo2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo2", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build-dev": "webpack --config webpack/webpack.dev.config.js", 9 | "build": "webpack --config webpack/webpack.prod.config.js", 10 | "start": "node server.js" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "babel-core": "^6.26.0", 16 | "babel-loader": "^7.1.2", 17 | "babel-plugin-import": "^1.4.0", 18 | "babel-plugin-transform-react-remove-prop-types": "^0.4.8", 19 | "babel-preset-env": "^1.6.0", 20 | "babel-preset-es2015": "^6.24.1", 21 | "babel-preset-react": "^6.24.1", 22 | "css-loader": "^0.28.5", 23 | "extract-text-webpack-plugin": "^3.0.0", 24 | "file-loader": "^0.11.2", 25 | "html-webpack-plugin": "^2.30.1", 26 | "install": "^0.10.1", 27 | "mockjs": "^1.0.1-beta3", 28 | "postcss-loader": "^2.0.6", 29 | "react-router-dom": "^4.2.0", 30 | "style-loader": "^0.18.2", 31 | "url-loader": "^0.5.9", 32 | "webpack": "^3.5.5", 33 | "webpack-dev-server": "^2.7.1", 34 | "webpack-link": "^0.2.0" 35 | }, 36 | "dependencies": { 37 | "antd": "^2.12.7", 38 | "babel-polyfill": "^6.26.0", 39 | "commons-react": "git+https://git.oschina.net/magicsoft/commons-react.git", 40 | "es6-promise": "^4.1.1", 41 | "fetch": "^1.1.0", 42 | "isomorphic-fetch": "^2.2.1", 43 | "prop-types": "^15.5.10", 44 | "react": "^15.6.1", 45 | "react-dom": "^15.6.1", 46 | "react-redux": "^5.0.6", 47 | "react-router": "^4.1.2", 48 | "redux": "^3.7.2", 49 | "redux-thunk": "^2.2.0" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /demo3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /demo2/src/Top.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Row, Col, Select,Checkbox } from 'antd'; 3 | const Option = Select.Option; 4 | 5 | function handleChange(e){ 6 | console.log('click ', e); 7 | } 8 | function onChange(e) { 9 | console.log(`checked = ${e.target.checked}`); 10 | } 11 | class Top extends React.Component{ 12 | constructor(props) { 13 | super(props); 14 | this.state = { 15 | 16 | } 17 | } 18 | 19 | 20 | render() { 21 | return ( 22 | 23 | 24 | 25 | 干部库： 26 | 32 | 33 | 34 | 所属单位： 35 | 40 | 41 | 42 | 43 | 显示所有下级 44 | 45 | 46 | 47 | 48 | ); 49 | } 50 | } 51 | 52 | export default Top; 53 | -------------------------------------------------------------------------------- /demo2/mock/mainframe/viewstate.js: -------------------------------------------------------------------------------- 1 | module.exports = function() { 2 | return { 3 | "userName": "Test User", 4 | "selectedMenus": ["1"], 5 | "openMenus": ["5", "13", "18"], 6 | "menuItems": [{ 7 | "text": "Home", "key": "1", "url": "/" 8 | }, { 9 | "text": "Work Order", "key": "2" 10 | }, { 11 | "text": "Winder", "key": "3" 12 | }, { 13 | "text": "Solutions", "key": "4" 14 | }, { 15 | "text": "Statistic & Report", "key": "5", 16 | "items": [{ 17 | "text": "Monthly Report", "key": "6" 18 | }, { 19 | "text": "Successful Rate", "key": "7" 20 | }, { 21 | "text": "Malfunction Type", "key": "8" 22 | }, { 23 | "text": "Component Failure", "key": "9" 24 | }, { 25 | "text": "Life Analysis for OTA & Local Spare Part", "key": "10" 26 | }, { 27 | "text": "Life Analysis for OTA & Local Spare Part", "key": "11" 28 | }, { 29 | "text": "Life Analysis for Repair Spare part", "key": "12" 30 | }] 31 | }, { 32 | "text": "Master Data", "key": "13", 33 | "items": [{ 34 | "text": "Basic Definition", "key": "14" 35 | }, { 36 | "text": "Parts", "key": "15" 37 | }, { 38 | "text": "Maintenance Plan", "key": "16" 39 | }, { 40 | "text": "Project Order", "key": "17" 41 | }] 42 | }, { 43 | "text": "System Admin", "key": "18", 44 | "items": [{ 45 | "text": "Countries", "key": "19", "url": "/countrylist" 46 | }, { 47 | "text": "Customers", "key": "20" 48 | }, { 49 | "text": "Workshop", "key": "21" 50 | }, { 51 | "text": "Users", "key": "22" 52 | }, { 53 | "text": "Role", "key": "23" 54 | }, { 55 | "text": "Assign Rights", "key": "24" 56 | }] 57 | }] 58 | } 59 | 60 | } -------------------------------------------------------------------------------- /demo3/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /demo1/assets/index.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // define getter function for harmony exports 37 | /******/ __webpack_require__.d = function(exports, name, getter) { 38 | /******/ if(!__webpack_require__.o(exports, name)) { 39 | /******/ Object.defineProperty(exports, name, { 40 | /******/ configurable: false, 41 | /******/ enumerable: true, 42 | /******/ get: getter 43 | /******/ }); 44 | /******/ } 45 | /******/ }; 46 | /******/ 47 | /******/ // getDefaultExport function for compatibility with non-harmony modules 48 | /******/ __webpack_require__.n = function(module) { 49 | /******/ var getter = module && module.__esModule ? 50 | /******/ function getDefault() { return module['default']; } : 51 | /******/ function getModuleExports() { return module; }; 52 | /******/ __webpack_require__.d(getter, 'a', getter); 53 | /******/ return getter; 54 | /******/ }; 55 | /******/ 56 | /******/ // Object.prototype.hasOwnProperty.call 57 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 58 | /******/ 59 | /******/ // __webpack_public_path__ 60 | /******/ __webpack_require__.p = ""; 61 | /******/ 62 | /******/ // Load entry module and return exports 63 | /******/ return __webpack_require__(__webpack_require__.s = 0); 64 | /******/ }) 65 | /************************************************************************/ 66 | /******/ ([ 67 | /* 0 */ 68 | /***/ (function(module, exports, __webpack_require__) { 69 | 70 | module.exports = __webpack_require__(1); 71 | 72 | 73 | /***/ }), 74 | /* 1 */ 75 | /***/ (function(module, exports) { 76 | 77 | throw new Error("Module parse failed: G:\\magicsoft\\git-repository\\commons-react-demo\\demo1\\Index.jsx Unexpected token (6:12)\nYou may need an appropriate loader to handle this file type.\n| render(){\r\n| return (\r\n|
\r\n| {this.props.children}\r\n|
\r"); 78 | 79 | /***/ }) 80 | /******/ ]); -------------------------------------------------------------------------------- /demo2/assets/index.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // define getter function for harmony exports 37 | /******/ __webpack_require__.d = function(exports, name, getter) { 38 | /******/ if(!__webpack_require__.o(exports, name)) { 39 | /******/ Object.defineProperty(exports, name, { 40 | /******/ configurable: false, 41 | /******/ enumerable: true, 42 | /******/ get: getter 43 | /******/ }); 44 | /******/ } 45 | /******/ }; 46 | /******/ 47 | /******/ // getDefaultExport function for compatibility with non-harmony modules 48 | /******/ __webpack_require__.n = function(module) { 49 | /******/ var getter = module && module.__esModule ? 50 | /******/ function getDefault() { return module['default']; } : 51 | /******/ function getModuleExports() { return module; }; 52 | /******/ __webpack_require__.d(getter, 'a', getter); 53 | /******/ return getter; 54 | /******/ }; 55 | /******/ 56 | /******/ // Object.prototype.hasOwnProperty.call 57 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 58 | /******/ 59 | /******/ // __webpack_public_path__ 60 | /******/ __webpack_require__.p = ""; 61 | /******/ 62 | /******/ // Load entry module and return exports 63 | /******/ return __webpack_require__(__webpack_require__.s = 0); 64 | /******/ }) 65 | /************************************************************************/ 66 | /******/ ([ 67 | /* 0 */ 68 | /***/ (function(module, exports, __webpack_require__) { 69 | 70 | module.exports = __webpack_require__(1); 71 | 72 | 73 | /***/ }), 74 | /* 1 */ 75 | /***/ (function(module, exports) { 76 | 77 | throw new Error("Module parse failed: G:\\magicsoft\\git-repository\\commons-react-demo\\demo1\\Index.jsx Unexpected token (6:12)\nYou may need an appropriate loader to handle this file type.\n| render(){\r\n| return (\r\n|
\r\n| {this.props.children}\r\n|
\r"); 78 | 79 | /***/ }) 80 | /******/ ]); -------------------------------------------------------------------------------- /demo3/src/MyCalendar.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | let mytrsArr =[]; 4 | class MyCalendar extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = this.getInitialState(); 8 | this.getTrs() 9 | } 10 | getInitialState() { 11 | return { 12 | startNumber: 0, 13 | addNumber : 30, 14 | endNumber : 0+60*12, 15 | events : [ 16 | {start:30,end:150}, 17 | {start:540,end:600}, 18 | {start:560,end:620}, 19 | {start:610,end:670}, 20 | ] 21 | } 22 | } 23 | getEvents(){ 24 | let events = [ 25 | {start:30,end:150}, 26 | {start:540,end:600}, 27 | {start:560,end:620}, 28 | {start:610,end:670}, 29 | ] 30 | for(let item = 0;item 50 | 51 | {this.state.events.map((item)=>{ 52 | return( 53 |
54 |

Sample Item

55 |

`````````

56 |
57 | ) 58 | })} 59 | {mytrsArr.map((u) => { 60 | if(u.time%60==0){ 61 | return ( 62 | {9 + parseInt(u.time/60)+":00"} 63 | 64 | ); 65 | }else if(u.time%30==0){ 66 | return ( 67 | {9 + parseInt(u.time/60)+":"+u.time%60} 68 | 69 | ); 70 | } 71 | 72 | })} 73 | 74 | 75 | ); 76 | } 77 | } 78 | 79 | export default MyCalendar; -------------------------------------------------------------------------------- /demo1/assets/index.html: -------------------------------------------------------------------------------- 1 | Html Webpack Plugin: 2 | 
 3 |   Error: Child compilation failed:
 4 |   Entry module not found: Error: Can't resolve 'G:\magicsoft\git-repository\commons-react-demo\demo1\src\index.html' in 'G:\magicsoft\git-repository\commons-react-demo\demo1':
 5 |   Error: Can't resolve 'G:\magicsoft\git-repository\commons-react-demo\demo1\src\index.html' in 'G:\magicsoft\git-repository\commons-react-demo\demo1'
 6 |   
 7 |   - compiler.js:76 
 8 |     [demo1]/[html-webpack-plugin]/lib/compiler.js:76:16
 9 |   
10 |   - Compiler.js:304 compile
11 |     [demo1]/[webpack]/lib/Compiler.js:304:11
12 |   
13 |   - Compiler.js:520 applyPluginsAsync.err
14 |     [demo1]/[webpack]/lib/Compiler.js:520:14
15 |   
16 |   - Tapable.js:202 next
17 |     [demo1]/[tapable]/lib/Tapable.js:202:11
18 |   
19 |   - CachePlugin.js:62 Compiler.
20 |     [demo1]/[webpack]/lib/CachePlugin.js:62:5
21 |   
22 |   - Tapable.js:206 Compiler.applyPluginsAsyncSeries
23 |     [demo1]/[tapable]/lib/Tapable.js:206:13
24 |   
25 |   - Compiler.js:517 compilation.seal.err
26 |     [demo1]/[webpack]/lib/Compiler.js:517:11
27 |   
28 |   - Tapable.js:195 Compilation.applyPluginsAsyncSeries
29 |     [demo1]/[tapable]/lib/Tapable.js:195:46
30 |   
31 |   - Compilation.js:671 self.applyPluginsAsync.err
32 |     [demo1]/[webpack]/lib/Compilation.js:671:19
33 |   
34 |   - Tapable.js:195 Compilation.applyPluginsAsyncSeries
35 |     [demo1]/[tapable]/lib/Tapable.js:195:46
36 |   
37 |   - Compilation.js:662 self.applyPluginsAsync.err
38 |     [demo1]/[webpack]/lib/Compilation.js:662:11
39 |   
40 |   - Tapable.js:195 Compilation.applyPluginsAsyncSeries
41 |     [demo1]/[tapable]/lib/Tapable.js:195:46
42 |   
43 |   - Compilation.js:657 self.applyPluginsAsync.err
44 |     [demo1]/[webpack]/lib/Compilation.js:657:10
45 |   
46 |   - Tapable.js:195 Compilation.applyPluginsAsyncSeries
47 |     [demo1]/[tapable]/lib/Tapable.js:195:46
48 |   
49 |   - Compilation.js:653 sealPart2
50 |     [demo1]/[webpack]/lib/Compilation.js:653:9
51 |   
52 |   - Tapable.js:195 Compilation.applyPluginsAsyncSeries
53 |     [demo1]/[tapable]/lib/Tapable.js:195:46
54 |   
55 |   - Compilation.js:596 Compilation.seal
56 |     [demo1]/[webpack]/lib/Compilation.js:596:8
57 |   
58 |   - Compiler.js:514 applyPluginsParallel.err
59 |     [demo1]/[webpack]/lib/Compiler.js:514:17
60 |   
61 |   - Tapable.js:289 
62 |     [demo1]/[tapable]/lib/Tapable.js:289:11
63 |   
64 |   - Compilation.js:498 _addModuleChain
65 |     [demo1]/[webpack]/lib/Compilation.js:498:11
66 |   
67 |   - Compilation.js:381 errorAndCallback.bail
68 |     [demo1]/[webpack]/lib/Compilation.js:381:4
69 |   
70 |   - Compilation.js:404 moduleFactory.create
71 |     [demo1]/[webpack]/lib/Compilation.js:404:13
72 |   
73 |   - NormalModuleFactory.js:235 factory
74 |     [demo1]/[webpack]/lib/NormalModuleFactory.js:235:20
75 |   
76 |   - NormalModuleFactory.js:60 resolver
77 |     [demo1]/[webpack]/lib/NormalModuleFactory.js:60:20
78 |   
79 |   - NormalModuleFactory.js:127 asyncLib.parallel.e
80 |     [demo1]/[webpack]/lib/NormalModuleFactory.js:127:20
81 |   
82 |   - async.js:3861 
83 |     [demo1]/[async]/dist/async.js:3861:9
84 |   
85 |   - async.js:421 
86 |     [demo1]/[async]/dist/async.js:421:16
87 |   
88 |   - async.js:996 iteratorCallback
89 |     [demo1]/[async]/dist/async.js:996:13
90 |   
91 |   - async.js:906 
92 |     [demo1]/[async]/dist/async.js:906:16
93 |   
94 |   - async.js:3858 
95 |     [demo1]/[async]/dist/async.js:3858:13
96 |   
97 |
-------------------------------------------------------------------------------- /demo2/assets/index.html: -------------------------------------------------------------------------------- 1 | Html Webpack Plugin: 2 | 
 3 |   Error: Child compilation failed:
 4 |   Entry module not found: Error: Can't resolve 'G:\magicsoft\git-repository\commons-react-demo\demo1\src\index.html' in 'G:\magicsoft\git-repository\commons-react-demo\demo1':
 5 |   Error: Can't resolve 'G:\magicsoft\git-repository\commons-react-demo\demo1\src\index.html' in 'G:\magicsoft\git-repository\commons-react-demo\demo1'
 6 |   
 7 |   - compiler.js:76 
 8 |     [demo1]/[html-webpack-plugin]/lib/compiler.js:76:16
 9 |   
10 |   - Compiler.js:304 compile
11 |     [demo1]/[webpack]/lib/Compiler.js:304:11
12 |   
13 |   - Compiler.js:520 applyPluginsAsync.err
14 |     [demo1]/[webpack]/lib/Compiler.js:520:14
15 |   
16 |   - Tapable.js:202 next
17 |     [demo1]/[tapable]/lib/Tapable.js:202:11
18 |   
19 |   - CachePlugin.js:62 Compiler.
20 |     [demo1]/[webpack]/lib/CachePlugin.js:62:5
21 |   
22 |   - Tapable.js:206 Compiler.applyPluginsAsyncSeries
23 |     [demo1]/[tapable]/lib/Tapable.js:206:13
24 |   
25 |   - Compiler.js:517 compilation.seal.err
26 |     [demo1]/[webpack]/lib/Compiler.js:517:11
27 |   
28 |   - Tapable.js:195 Compilation.applyPluginsAsyncSeries
29 |     [demo1]/[tapable]/lib/Tapable.js:195:46
30 |   
31 |   - Compilation.js:671 self.applyPluginsAsync.err
32 |     [demo1]/[webpack]/lib/Compilation.js:671:19
33 |   
34 |   - Tapable.js:195 Compilation.applyPluginsAsyncSeries
35 |     [demo1]/[tapable]/lib/Tapable.js:195:46
36 |   
37 |   - Compilation.js:662 self.applyPluginsAsync.err
38 |     [demo1]/[webpack]/lib/Compilation.js:662:11
39 |   
40 |   - Tapable.js:195 Compilation.applyPluginsAsyncSeries
41 |     [demo1]/[tapable]/lib/Tapable.js:195:46
42 |   
43 |   - Compilation.js:657 self.applyPluginsAsync.err
44 |     [demo1]/[webpack]/lib/Compilation.js:657:10
45 |   
46 |   - Tapable.js:195 Compilation.applyPluginsAsyncSeries
47 |     [demo1]/[tapable]/lib/Tapable.js:195:46
48 |   
49 |   - Compilation.js:653 sealPart2
50 |     [demo1]/[webpack]/lib/Compilation.js:653:9
51 |   
52 |   - Tapable.js:195 Compilation.applyPluginsAsyncSeries
53 |     [demo1]/[tapable]/lib/Tapable.js:195:46
54 |   
55 |   - Compilation.js:596 Compilation.seal
56 |     [demo1]/[webpack]/lib/Compilation.js:596:8
57 |   
58 |   - Compiler.js:514 applyPluginsParallel.err
59 |     [demo1]/[webpack]/lib/Compiler.js:514:17
60 |   
61 |   - Tapable.js:289 
62 |     [demo1]/[tapable]/lib/Tapable.js:289:11
63 |   
64 |   - Compilation.js:498 _addModuleChain
65 |     [demo1]/[webpack]/lib/Compilation.js:498:11
66 |   
67 |   - Compilation.js:381 errorAndCallback.bail
68 |     [demo1]/[webpack]/lib/Compilation.js:381:4
69 |   
70 |   - Compilation.js:404 moduleFactory.create
71 |     [demo1]/[webpack]/lib/Compilation.js:404:13
72 |   
73 |   - NormalModuleFactory.js:235 factory
74 |     [demo1]/[webpack]/lib/NormalModuleFactory.js:235:20
75 |   
76 |   - NormalModuleFactory.js:60 resolver
77 |     [demo1]/[webpack]/lib/NormalModuleFactory.js:60:20
78 |   
79 |   - NormalModuleFactory.js:127 asyncLib.parallel.e
80 |     [demo1]/[webpack]/lib/NormalModuleFactory.js:127:20
81 |   
82 |   - async.js:3861 
83 |     [demo1]/[async]/dist/async.js:3861:9
84 |   
85 |   - async.js:421 
86 |     [demo1]/[async]/dist/async.js:421:16
87 |   
88 |   - async.js:996 iteratorCallback
89 |     [demo1]/[async]/dist/async.js:996:13
90 |   
91 |   - async.js:906 
92 |     [demo1]/[async]/dist/async.js:906:16
93 |   
94 |   - async.js:3858 
95 |     [demo1]/[async]/dist/async.js:3858:13
96 |   
97 |
-------------------------------------------------------------------------------- /demo1/webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); 4 | 5 | // css打包插件。 6 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 7 | const extractTextPlugin = new ExtractTextPlugin('index.css', { 8 | disable: false, 9 | allChunks: true 10 | }); 11 | 12 | module.exports = { 13 | entry: {// 打包（计算依赖）的入口文件。 14 | 'index': [path.resolve(__dirname, '../src/Index.jsx')], 15 | // 'react': ['react', 'react-dom', 'react-redux', 'react-router-dom', 'redux', 'redux-thunk', 'react-router', 'babel-polyfill', 'isomorphic-fetch'], 16 | // 'antd': ['antd'] 17 | }, 18 | output: { 19 | filename: '[name].js' // 编译结果的输出文件，[name]指的是来源entry中的文件名。 20 | }, 21 | resolve: { 22 | extensions: ['.js', '.jsx'], 23 | alias: { 24 | 'react': path.resolve(__dirname, '../node_modules/react'), 25 | 'react-dom': path.resolve(__dirname, '../node_modules/react-dom'), 26 | 'react-redux': path.resolve(__dirname, '../node_modules/react-redux'), 27 | 'react-router-dom': path.resolve(__dirname, '../node_modules/react-router-dom'), 28 | 'redux': path.resolve(__dirname, '../node_modules/redux'), 29 | 'redux-thunk': path.resolve(__dirname, '../node_modules/redux-thunk'), 30 | 'react-router': path.resolve(__dirname, '../node_modules/react-router'), 31 | 'babel-polyfill': path.resolve(__dirname, '../node_modules/babel-polyfill'), 32 | 'isomorphic-fetch': path.resolve(__dirname, '../node_modules/isomorphic-fetch'), 33 | 'antd': path.resolve(__dirname, '../node_modules/antd'), 34 | } 35 | }, 36 | module: { 37 | loaders: [ 38 | { 39 | // 打包React代码需要引用Babel作为翻译器，并加入es2015, react等特性。 40 | test: /\.(js|jsx)$/, 41 | include: [path.resolve(__dirname, '../src')], //C:\workbench\git-repository\org.magicsoft\commons-react\ //path.resolve(__dirname, '../node_modules/commons-react'), 42 | loader: require.resolve('babel-loader'), 43 | query: { 44 | presets: ['es2015', 'react'], 45 | plugins: [ 46 | ['import', { libraryName: 'antd', style: 'css' }] // `style: true` 会加载 less 文件 47 | ] 48 | } 49 | }, 50 | { 51 | test: /\.css$/, 52 | loader: extractTextPlugin.extract('css-loader') // css打包。 53 | }, 54 | { 55 | test: /\.(png|jpg|gif|svg)$/, 56 | loader: require.resolve('url-loader'), 57 | query: { 58 | limit: 10000, // 小于这个字节的图片会被打包成base64字符串。 59 | name: 'images/[name].[ext]?[hash:7]' 60 | } 61 | } 62 | ] 63 | }, 64 | plugins: [ 65 | extractTextPlugin, // 此插件的目的是将css单独打包成一个文件（不加的话css是会被打到js中的。） 66 | new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML 67 | filename: 'index.html', //生成的html存放路径，相对于 path 68 | template: 'src/index.html', // Load a custom template 69 | inject: true, //允许插件修改哪些内容，包括head与body 70 | hash: true, //为静态资源生成hash值 71 | // chunks: ['webpack-dev-server', 'index'] // 如果不指定这项，会把所有脚本都加载进来，指定了就只加载指定的脚本。 72 | }), 73 | // new CommonsChunkPlugin({ 74 | // names: ['antd','react'] 75 | // }) 76 | ] 77 | } -------------------------------------------------------------------------------- /demo2/webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); 4 | 5 | // css打包插件。 6 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 7 | const extractTextPlugin = new ExtractTextPlugin('index.css', { 8 | disable: false, 9 | allChunks: true 10 | }); 11 | 12 | module.exports = { 13 | entry: {// 打包（计算依赖）的入口文件。 14 | 'index': [path.resolve(__dirname, '../src/Index.jsx')], 15 | // 'react': ['react', 'react-dom', 'react-redux', 'react-router-dom', 'redux', 'redux-thunk', 'react-router', 'babel-polyfill', 'isomorphic-fetch'], 16 | // 'antd': ['antd'] 17 | }, 18 | output: { 19 | filename: '[name].js' // 编译结果的输出文件，[name]指的是来源entry中的文件名。 20 | }, 21 | resolve: { 22 | extensions: ['.js', '.jsx'], 23 | alias: { 24 | 'react': path.resolve(__dirname, '../node_modules/react'), 25 | 'react-dom': path.resolve(__dirname, '../node_modules/react-dom'), 26 | 'react-redux': path.resolve(__dirname, '../node_modules/react-redux'), 27 | 'react-router-dom': path.resolve(__dirname, '../node_modules/react-router-dom'), 28 | 'redux': path.resolve(__dirname, '../node_modules/redux'), 29 | 'redux-thunk': path.resolve(__dirname, '../node_modules/redux-thunk'), 30 | 'react-router': path.resolve(__dirname, '../node_modules/react-router'), 31 | 'babel-polyfill': path.resolve(__dirname, '../node_modules/babel-polyfill'), 32 | 'isomorphic-fetch': path.resolve(__dirname, '../node_modules/isomorphic-fetch'), 33 | 'antd': path.resolve(__dirname, '../node_modules/antd'), 34 | } 35 | }, 36 | module: { 37 | loaders: [ 38 | { 39 | // 打包React代码需要引用Babel作为翻译器，并加入es2015, react等特性。 40 | test: /\.(js|jsx)$/, 41 | include: [path.resolve(__dirname, '../src')], //C:\workbench\git-repository\org.magicsoft\commons-react\ //path.resolve(__dirname, '../node_modules/commons-react'), 42 | loader: require.resolve('babel-loader'), 43 | query: { 44 | presets: ['es2015', 'react'], 45 | plugins: [ 46 | ['import', { libraryName: 'antd', style: 'css' }] // `style: true` 会加载 less 文件 47 | ] 48 | } 49 | }, 50 | { 51 | test: /\.css$/, 52 | loader: extractTextPlugin.extract('css-loader') // css打包。 53 | }, 54 | { 55 | test: /\.(png|jpg|gif|svg)$/, 56 | loader: require.resolve('url-loader'), 57 | query: { 58 | limit: 10000, // 小于这个字节的图片会被打包成base64字符串。 59 | name: 'images/[name].[ext]?[hash:7]' 60 | } 61 | } 62 | ] 63 | }, 64 | plugins: [ 65 | extractTextPlugin, // 此插件的目的是将css单独打包成一个文件（不加的话css是会被打到js中的。） 66 | new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML 67 | filename: 'index.html', //生成的html存放路径，相对于 path 68 | template: 'src/index.html', // Load a custom template 69 | inject: true, //允许插件修改哪些内容，包括head与body 70 | hash: true, //为静态资源生成hash值 71 | // chunks: ['webpack-dev-server', 'index'] // 如果不指定这项，会把所有脚本都加载进来，指定了就只加载指定的脚本。 72 | }), 73 | // new CommonsChunkPlugin({ 74 | // names: ['antd','react'] 75 | // }) 76 | ] 77 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React零基础入门 2 | 3 | ## 前言 4 | 此文档主要面向出生在前端（es6+,react,webpack,babel等）新手村的童鞋，主要目的是尽快让童鞋们从lv0尽快升级到lv10，走出新手村，探索更广阔的前端世界。内容较（te）为（bie）基础，请针对自身情况决定是否阅读。 5 | *** 6 | ## 目录 7 | 1. NodeJS安装; 8 | 2. 简单介绍npm与cnpm; 9 | 3. yarn简单介绍; 10 | 4. package.json文件的说明; 11 | 5. 总结 12 | *** 13 | ### 1.NodeJS安装 14 | NodeJS的安装没有技术可言，这里就不说了，而为什么要用Node，你就把Node想成一个使JS能够运行的一个解析器就好。 15 | 16 | > https://nodejs.org/en/download/ (Node.js官方安装包及源码下载地址) 17 | 18 | > http://www.cnblogs.com/yzadd/p/6547668.html (node详细安装过程及环境变量配置) 19 | 20 | *** 21 | ### 2.简单介绍npm与cnpm 22 | #### 2.1 npm介绍 23 | > http://registry.npmjs.org (npm地址) 24 | 25 | > http://npm.taobao.org (cnpm镜像地址) 26 | 27 | 1.npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）; 28 | 29 | 2.使用npm安装插件：命令提示符执行```npm install [-g] [--save-dev]``` 30 | 31 | ``````：node插件名称。 32 | 33 | 例：```npm install gulp-less --save-dev``` 34 | 35 | -g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量; 36 | 37 | 不加-g :非全局安装：将会安装在当前定位目录； 38 | 39 | > 当你全局安装后可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹(存放第三方包)下。 40 | 41 | -save：将保存配置信息至package.json（package.json是nodejs项目配置文件）; 42 | 43 | -dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点; 44 | 45 | > 为什么要将配置保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，我们直接用命令提示符执行npm install(cnpm install||yarn install)，则会根据package.json下载所有需要的包）。 46 | 47 | 3.使用npm卸载插件：```npm uninstall [-g] [--save-dev] ```。 48 | 49 | 4.使用npm更新插件：```npm update [-g] [--save-dev] ```。 50 | 51 | 5.更新全部插件：```npm update [--save-dev] ```。 52 | 53 | 6.查看npm帮助：```npm help ```。 54 | 55 | 7.查看当前目录已安装插件：```npm list```。 56 | 57 | #### 2.2 cnpm介绍 58 | 59 | 1.因为npm安装插件是从国外服务器 http://registry.npmjs.org 下载，受网络影响大，可能出现异常，淘宝团弄了个完整 npmjs.org 镜像（地址： http://npm.taobao.org ），来代替官方版本。 60 | 61 | 2.安装：命令提示符执行```npm install cnpm -g --registry=https://registry.npm.taobao.org```; 62 | 63 | > 注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。 64 | 65 | *** 66 | ### 3.yarn简单介绍 67 | > Yarn是Facebook发布了新的 node.js包管理器用以替代npm。使用yarn前需要保证git在全局可以找到，配置好git环境变量。（本人用的是webstorm,是使用中间配置的,需要重启软件） 68 | 69 | 1.其实 yarn 可以直接像装模块那样用 npm 装：```npm install -g yarn```; 70 | 71 | 2.yarn的安装依赖的方式不同于yarn,你需要执行以下命令来安装依赖:```yarn add react```(npm 为 npm install react); 72 | 73 | 3.更新一个依赖 74 | 75 | ``` 76 | yarn upgrade [package] 77 | 78 | yarn upgrade [package]@[version] 79 | 80 | yarn upgrade [package]@[tag] 81 | ``` 82 | 83 | 4.移除一个依赖 84 | 85 | ```yarn remove [package]``` 86 | 87 | 5安装package.json中所有的依赖项 88 | 89 | ```yarn / yarn install``` 90 | 91 | 6.yarn 更新所有的依赖包 92 | 93 | ```yarn upgrade-interactive``` 94 | 95 | *** 96 | ### 4.package.json文件的说明 97 | 每个项目一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息。npm install命令根据这个配置文件(不光局限在npm和yarn。nodejs应用都生效)，自动下载所需的模块，也就是配置项目所需的运行和开发环境。 98 | 99 | #### 1.概述 100 | package.json文件就是一个JSON对象，该对象的每一个成员就是当前项目的一项设置。比如name就是项目名称，version是版本···。 101 | 102 | package.json文件可以手工编写，也可以使用npm init命令自动生成。```$ npm init```在当前目录生成一个基本的package.json文件。有了package.json文件，直接使用```npm install```命令，就会在当前目录中安装所需要的模块。 103 | 104 | #### 2.scripts 105 | scripts指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start(或yarn run start)时，所要执行的命令。 106 | 107 | #### 3.dependencies字段，devDependencies字段 108 | dependencies：指定了项目运行所依赖的模块， 109 | 110 | devDependencies：指定项目开发所需要的模块。 111 | 112 | > 它们都指向一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。 113 | 114 | #### 4.bin字段 115 | bin项用来指定各个内部命令对应的可执行文件的位置。 116 | 117 | >所有node_modules/.bin/目录下的命令，都可以用npm run [命令]的格式运行。在命令行下，键入npm run，然后按tab键，就会显示所有可以使用的命令。 118 | 119 | #### 5.main字段 120 | main字段指定了加载的入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。 121 | 122 | #### 6.config 字段 123 | config字段用于添加命令行的环境变量。 124 | 125 | #### 7.browser字段 126 | browser指定该模板供浏览器使用的版本。Browserify这样的浏览器打包工具，通过它就知道该打包那个文件。 127 | 128 | #### 8.engines 字段 129 | engines字段指明了该模块运行的平台，比如 Node 的某个版本或者浏览器,该字段也可以指定适用的npm版本。 130 | 131 | #### 9.man字段 132 | man用来指定当前模块的man文档的位置。 133 | 134 | #### 10.preferGlobal字段 135 | preferGlobal的值是布尔值，表示当用户不将该模块安装为全局模块时（即不用–global参数），要不要显示警告，表示该模块的本意就是安装为全局模块。 136 | 137 | #### 11.style字段 138 | style指定供浏览器使用时，样式文件所在的位置。样式文件打包工具parcelify，通过它知道样式文件的打包位置。 139 | 140 | *** 141 | ### 5.总结 142 | 学习React首先要知道它是什么东西，做什么用的，需要的工具和相关配置是做什么的，理解了这些离你自己可以写一个简单的React项目就不远了。 -------------------------------------------------------------------------------- /demo2/src/Tree.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Input,Tree } from 'antd'; 3 | import 'whatwg-fetch'; 4 | const Search = Input.Search; 5 | const TreeNode = Tree.TreeNode; 6 | 7 | class Tree1 extends React.Component { 8 | constructor(props) { 9 | super(props); 10 | this.state = { 11 | treeData: [], 12 | } 13 | 14 | this.onLoadData = this.onLoadData.bind(this) 15 | this.onSelect = this.onSelect.bind(this) 16 | 17 | } 18 | 19 | componentDidMount() { 20 | this.readFirst() 21 | } 22 | 23 | readFirst(){ 24 | fetch('/api/mainframe/viewstate', 25 | ).then(response =>{ 26 | console.log(response) 27 | return response.json() 28 | } 29 | ).then((response)=>{ 30 | response.menuItems.map(function(item){ 31 | item.title =item.text 32 | if(!item.items){ 33 | item.isLeaf =true 34 | } 35 | // console.log(item) 36 | }) 37 | this.state.treeData= response.menuItems 38 | this.Startrun(); 39 | }) 40 | } 41 | readJson(treeJson){ 42 | // console.log(treeJson) 43 | treeJson.props.items.map(function(item1){ 44 | item1.title =item1.text 45 | if(!item1.items){ 46 | item1.isLeaf =true 47 | } 48 | }) 49 | treeJson.props.dataRef.children = treeJson.props.items 50 | } 51 | /* readJson(treeJson){ 52 | fetch('/api/mainframe/viewstate', 53 | ).then(response =>{ 54 | //console.log(response) 55 | return response.json() 56 | } 57 | ).then((response)=>{ 58 | response.menuItems.map(function(item){ 59 | if(treeJson.props.title == item.text){ 60 | item.items.map(function(item1){ 61 | item1.title =item1.text 62 | if(!item1.items){ 63 | item1.isLeaf =true 64 | } 65 | }) 66 | treeJson.props.dataRef.children =item.items 67 | } 68 | }) 69 | 70 | this.Startrun(); 71 | }) 72 | }*/ 73 | onLoadData(treeNode){ 74 | return (new Promise((resolve) => { 75 | if (treeNode.props.children) { 76 | resolve(); 77 | return; 78 | } 79 | setTimeout(() => { 80 | // console.log(treeNode) 81 | this.readJson(treeNode) 82 | this.Startrun(); 83 | resolve(); 84 | }, 500); 85 | })); 86 | } 87 | Startrun(){ 88 | this.setState({ 89 | treeData: [...this.state.treeData], 90 | }) 91 | } 92 | onSelect(electedKeys, e){ 93 | var rvalue = []; 94 | if(e.selected){ 95 | if(e.selectedNodes[0].props.dataRef.items){ 96 | rvalue = e.selectedNodes[0].props.dataRef.items 97 | }else{ 98 | rvalue.push(e.selectedNodes[0].props.dataRef) 99 | } 100 | this.props.callbackParent(rvalue); 101 | } 102 | return rvalue 103 | } 104 | renderTreeNodes(data){ 105 | return data.map((item) => { 106 | if (item.children) { 107 | return ( 108 | 109 | {this.renderTreeNodes(item.children)} 110 | 111 | ); 112 | } 113 | return ; 114 | }); 115 | } 116 | render() { 117 | 118 | return ( 119 |
120 | console.log(value)} 124 | /> 125 | 126 | {this.renderTreeNodes(this.state.treeData)} 127 | 128 |
129 | ); 130 | } 131 | } 132 | export default Tree1; -------------------------------------------------------------------------------- /demo3/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | } else { 39 | // Is not local host. Just register service worker 40 | registerValidSW(swUrl); 41 | } 42 | }); 43 | } 44 | } 45 | 46 | function registerValidSW(swUrl) { 47 | navigator.serviceWorker 48 | .register(swUrl) 49 | .then(registration => { 50 | registration.onupdatefound = () => { 51 | const installingWorker = registration.installing; 52 | installingWorker.onstatechange = () => { 53 | if (installingWorker.state === 'installed') { 54 | if (navigator.serviceWorker.controller) { 55 | // At this point, the old content will have been purged and 56 | // the fresh content will have been added to the cache. 57 | // It's the perfect time to display a "New content is 58 | // available; please refresh." message in your web app. 59 | console.log('New content is available; please refresh.'); 60 | } else { 61 | // At this point, everything has been precached. 62 | // It's the perfect time to display a 63 | // "Content is cached for offline use." message. 64 | console.log('Content is cached for offline use.'); 65 | } 66 | } 67 | }; 68 | }; 69 | }) 70 | .catch(error => { 71 | console.error('Error during service worker registration:', error); 72 | }); 73 | } 74 | 75 | function checkValidServiceWorker(swUrl) { 76 | // Check if the service worker can be found. If it can't reload the page. 77 | fetch(swUrl) 78 | .then(response => { 79 | // Ensure service worker exists, and that we really are getting a JS file. 80 | if ( 81 | response.status === 404 || 82 | response.headers.get('content-type').indexOf('javascript') === -1 83 | ) { 84 | // No service worker found. Probably a different app. Reload the page. 85 | navigator.serviceWorker.ready.then(registration => { 86 | registration.unregister().then(() => { 87 | window.location.reload(); 88 | }); 89 | }); 90 | } else { 91 | // Service worker found. Proceed as normal. 92 | registerValidSW(swUrl); 93 | } 94 | }) 95 | .catch(() => { 96 | console.log( 97 | 'No internet connection found. App is running in offline mode.' 98 | ); 99 | }); 100 | } 101 | 102 | export function unregister() { 103 | if ('serviceWorker' in navigator) { 104 | navigator.serviceWorker.ready.then(registration => { 105 | registration.unregister(); 106 | }); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /demo1/1.入门基础（demo1解释）.md: -------------------------------------------------------------------------------- 1 | # 1.基础入门（demo1解释） 2 | 3 | ## 前言 4 | 该文档主要依照demo1讲解相关结构内容，还有一个基础的react项目都有些什么。 5 | *** 6 | ## 目录 7 | 1. 简单介绍webpack; 8 | 2. React项目的结构; 9 | 3. ES6导出的两种方法区别; 10 | 4. React中state与props介绍与比较 11 | 5. ES6(ECMAScript2015) 12 | *** 13 | ### 1.webpack的介绍 14 | > webpack的安装就不详细讲解了，详细请参考 ( http://www.jianshu.com/p/42e11515c10f ) 15 | 16 | 我认为WebPack就是分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言，并将其转换和打包为合适的格式供浏览器使用。 17 | 18 | 我们以demo1中的demo1\webpack\webpack.config.js(webpack配置文件)|webpack.dev.config.js(webpack开发环境配置)|webpack.prod.config.js(webpack生产环境配置)为例一步步讲解。 19 | 20 | **entry**:是打包（计算依赖）的唯一入口文件，即从哪个文件开始进行查找打包。 21 | 22 | >path.resolve由于该方法属于path模块，使用前需要引入path模块``` （const path= require(“path”)） ``` ;现在这种用法是把它作为一个序列的cd命令shell，在demo1\webpack\webpack.config.js就是在../src目录下查找Index.jsx文件的作用。 23 | 24 | **output** 该选项影响编译输出 25 | 26 | **output.filename**：编译打包后输出文件的文件名，[name]指的是来源entry中的文件名 27 | 28 | **resolve** ：该选项影响解析模块 29 | 30 | **resolve.alias** :将配置模块名与模块文件对应上 31 | 32 | **resolve.extensions** :解析模块的拓展名的数组（哪些文件进行解析,简单来讲就是不用输入拓展名也可以进行解析）。默认: ["", ".webpack.js", ".web.js", ".js"] 33 | 34 | **module.loaders** 自动引用的加载器的数组. 35 | 36 | **plugins** 给编译器添加额外的插件. 37 | 38 | **注“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。** 39 | 40 | > npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用``` npm run {script name} ```如 41 | ``` npm run build ``` 42 | 43 | *** 44 | ### 2.React项目的结构 45 | 46 | |-demo1 //项目名称 47 | 48 | |---node_modules //第三方插件库（在package.json中配置好在用 yarn install 自动下载） 49 | 50 | |---src //存放项目文件 如Index.jsx等 51 | 52 | |---webpack //webpack配置文件目录（上面讲到，这里就不详细讲解了） 53 | 54 | |---package.json //定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）（在零基础入门讲过） 55 | 56 | |---server.js //服务器配置 57 | 58 | *** 59 | ### 3.ES6导出的两种方法区别; 60 | > React中使用export导出类可以有两种方法 61 | 62 | #### 1. export default classname(一个文件中只有一个report default) 63 | 64 | 这种导出方式与``` export default class classname extends React.class ```相同 65 | 66 | 在其他文件中引用时采取方式:``` import classname form path ``` 67 | 68 | #### 2. export {classname1,classname2} (可以多个同时引) 69 | 70 | 在其他文件中引用时采用如下方式 71 | 72 | import {classname1,classname2} from path 73 | 74 | import {classname1} //注意引用一个类时也要加上{} 75 | 76 | 77 | *** 78 | ### 4.React中state与props介绍 79 | > 详细介绍请查看( http://www.cnblogs.com/ZSG-DoBestMe/p/5293457.html ) 80 | 81 | **props**：一般用于父组件向子组件通信，在组件之间通信使用。 82 | 83 | **state**：一般用于组件内部的状态维护，更新组建内部的数据，状态，更新子组件的props等。 84 | 85 | *** 86 | ### 5.ES6(ECMAScript2015) 87 | > ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。 88 | 89 | > http://babeljs.io/learn-es2015/ (Babel官网) 90 | 91 | > http://es6.ruanyifeng.com/ (ECMAScript入门 作者：阮一峰) 92 | 93 | > https://facebook.github.io/react/docs/components-and-props.html (React文档) 94 | 95 | > http://caibaojian.com/es6/object.html (ECMAScript 6拓展) 96 | 97 | 在我们正式讲解ES6语法之前，我们得先了解下Babel。Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。大家可以选择自己习惯的工具来使用使用Babel，具体过程可直接在Babel官网查看 http://babeljs.io/learn-es2015/ 98 | 99 | #### 最常用的ES6特性 100 | ``` 101 | let, const, class, extends, super, arrow functions, 102 | template string,destructuring, default, rest arguments 103 | ``` 104 | 这些是ES6最常用的几个语法，我会用最通俗易懂的语言来讲解它们。 105 | 106 | ##### let, const 107 | 这两个的用途与var类似，都是用来声明变量的，但在实际运用中他俩都有各自的特殊用途。 108 | 109 | ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景. 110 | 111 | 而let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。 112 | 113 | const也用来声明变量，但是声明的是常量。一旦声明，常量的值就不能改变。当我们尝试去改变用const声明的常量时，浏览器就会报错。 114 | 115 | const有一个很好的应用场景，就是当我们引用第三方库的时声明的变量，用const来声明可以避免未来不小心重命名而导致出现bug：``` const monent = require('moment') ``` 116 | 117 | ##### class, extends, super 118 | ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。 119 | 120 | class关键字用来定义类 121 | 122 | extends关键字用来实现继承 123 | 124 | super关键字，它指代父类的实例（即父类的this对象）子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。 125 | 126 | 127 | ##### arrow function(=>) 128 | 用它来写function比原来的写法要简洁清晰很多，如果方程比较复杂，则需要用{}把代码包起来。 129 | 130 | ``` 131 | 例1： 132 | -------------------------------------- 133 | function(i){ return i + 1; } //ES5 134 | (i) => i + 1 //ES6 135 | --------------------------------------- 136 | 例2： 137 | --------------------------------------- 138 | function(x, y) { 139 | x++; 140 | y--; 141 | return x + y; 142 | } //es5 143 | (x, y) => {x++; y--; return x+y} //es6 144 | ---------------------------------------- 145 | 例3： 146 | ---------------------------------------- 147 | class Animal { 148 | constructor(){ 149 | this.type = 'animal' 150 | } 151 | says(say){ 152 | setTimeout( () => { 153 | console.log(this.type + ' says ' + say) 154 | }, 1000) } } 155 | var animal = new Animal() 156 | animal.says('hi') //animal says hi 157 | 158 | ``` 159 | 160 | 当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。 161 | 并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。 -------------------------------------------------------------------------------- /demo2/src/CenterTable.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { DatePicker,Select ,Table,Row, Col,Button ,Input } from 'antd'; 3 | import './css/index.css' 4 | const { MonthPicker, RangePicker } = DatePicker; 5 | 6 | const Option = Select.Option; 7 | function onChange(date, dateString) { 8 | console.log(date, dateString); 9 | } 10 | function handleChange(value) { 11 | console.log(`selected ${value}`); 12 | } 13 | 14 | function handleBlur() { 15 | console.log('blur'); 16 | } 17 | 18 | function handleFocus() { 19 | console.log('focus'); 20 | } 21 | const columns = [{ 22 | title: 'Name', 23 | dataIndex: 'name', 24 | render: text => {text}, 25 | }, { 26 | title: 'Age', 27 | dataIndex: 'age', 28 | }, { 29 | title: 'Address', 30 | dataIndex: 'address', 31 | }]; 32 | const data = [{ 33 | key: '1', 34 | name: 'John Brown', 35 | age: 32, 36 | address: 'New York No. 1 Lake Park', 37 | }, { 38 | key: '2', 39 | name: 'Jim Green', 40 | age: 42, 41 | address: 'London No. 1 Lake Park', 42 | }, { 43 | key: '3', 44 | name: 'Joe Black', 45 | age: 32, 46 | address: 'Sidney No. 1 Lake Park', 47 | }, { 48 | key: '4', 49 | name: 'Disabled User', 50 | age: 99, 51 | address: 'Sidney No. 1 Lake Park', 52 | }]; 53 | 54 | // rowSelection object indicates the need for row selection 55 | const rowSelection = { 56 | onChange: (selectedRowKeys, selectedRows) => { 57 | console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); 58 | }, 59 | getCheckboxProps: record => ({ 60 | // disabled: record.name === 'Disabled User', 61 | }), 62 | }; 63 | 64 | class CenterTable extends React.Component{ 65 | constructor(props) { 66 | super(props); 67 | } 68 | 69 | render(){ 70 | return( 71 |
72 | 73 | 74 | 75 |

在职干部库

76 |

77 | 78 | 79 | 80 | 81 | 82 | 83 | 姓名： 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 性别： 94 | 95 | 96 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 出生日期： 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 籍贯： 120 | 121 | 122 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | ) 158 | } 159 | }; 160 | export default CenterTable -------------------------------------------------------------------------------- /demo3/.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | true 129 | 130 | false 131 | true 132 | true 133 | 134 | 135 | true 136 | DEFINITION_ORDER 137 | 138 | 139 | 140 | 141 | 142 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 |