20 |
26 | )
27 | }
28 | }
29 | module.exports = Wscats;
--------------------------------------------------------------------------------
/react/reactERP/src/components/datagrid/datagridreducer.js:
--------------------------------------------------------------------------------
1 | import * as constants from './datagridconstants'
2 |
3 | export default function datagrid(state = {}, action){
4 | let _state = JSON.parse(JSON.stringify(state));
5 | switch(action.type){
6 | case constants.Requesting:
7 | _state.show = true;
8 | break;
9 | case constants.Requested:
10 | _state.show = false;
11 | if(action.name){
12 | _state[action.name] = _state[action.name] || {};
13 | _state[action.name].dataset = action.result;
14 | } else {
15 | _state.dataset = action.result;
16 | }
17 | break;
18 | case constants.RequestError:
19 | _state.show =false;
20 | _state.error = action.error;
21 | break
22 | }
23 | return _state;
24 | }
--------------------------------------------------------------------------------
/react/reactERP/src/libs/font-awesome/less/animated.less:
--------------------------------------------------------------------------------
1 | // Animated Icons
2 | // --------------------------
3 |
4 | .@{fa-css-prefix}-spin {
5 | -webkit-animation: fa-spin 2s infinite linear;
6 | animation: fa-spin 2s infinite linear;
7 | }
8 |
9 | .@{fa-css-prefix}-pulse {
10 | -webkit-animation: fa-spin 1s infinite steps(8);
11 | animation: fa-spin 1s infinite steps(8);
12 | }
13 |
14 | @-webkit-keyframes fa-spin {
15 | 0% {
16 | -webkit-transform: rotate(0deg);
17 | transform: rotate(0deg);
18 | }
19 | 100% {
20 | -webkit-transform: rotate(359deg);
21 | transform: rotate(359deg);
22 | }
23 | }
24 |
25 | @keyframes fa-spin {
26 | 0% {
27 | -webkit-transform: rotate(0deg);
28 | transform: rotate(0deg);
29 | }
30 | 100% {
31 | -webkit-transform: rotate(359deg);
32 | transform: rotate(359deg);
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/react/reactERP/src/libs/font-awesome/scss/_animated.scss:
--------------------------------------------------------------------------------
1 | // Spinning Icons
2 | // --------------------------
3 |
4 | .#{$fa-css-prefix}-spin {
5 | -webkit-animation: fa-spin 2s infinite linear;
6 | animation: fa-spin 2s infinite linear;
7 | }
8 |
9 | .#{$fa-css-prefix}-pulse {
10 | -webkit-animation: fa-spin 1s infinite steps(8);
11 | animation: fa-spin 1s infinite steps(8);
12 | }
13 |
14 | @-webkit-keyframes fa-spin {
15 | 0% {
16 | -webkit-transform: rotate(0deg);
17 | transform: rotate(0deg);
18 | }
19 | 100% {
20 | -webkit-transform: rotate(359deg);
21 | transform: rotate(359deg);
22 | }
23 | }
24 |
25 | @keyframes fa-spin {
26 | 0% {
27 | -webkit-transform: rotate(0deg);
28 | transform: rotate(0deg);
29 | }
30 | 100% {
31 | -webkit-transform: rotate(359deg);
32 | transform: rotate(359deg);
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/react/redux/middleware/src/components/datagrid/datagridreducer.js:
--------------------------------------------------------------------------------
1 | import * as constants from './datagridconstants'
2 |
3 | export default function datagrid(state = {}, action){
4 | let _state = JSON.parse(JSON.stringify(state));
5 | switch(action.type){
6 | case constants.Requesting:
7 | _state.show = true;
8 | break;
9 | case constants.Requested:
10 | _state.show = false;
11 | if(action.name){
12 | _state[action.name] = _state[action.name] || {};
13 | _state[action.name].dataset = action.result;
14 | } else {
15 | _state.dataset = action.result;
16 | }
17 | break;
18 | case constants.RequestError:
19 | _state.show =false;
20 | _state.error = action.error;
21 | break
22 | }
23 | return _state;
24 | }
--------------------------------------------------------------------------------
/react/reactERP/src/redux/middleware.js:
--------------------------------------------------------------------------------
1 | import http from '../utils/httpclient'
2 | import * as constants from '../components/datagrid/datagridconstants'
3 |
4 | export default function(api){
5 | return function(dispatch){
6 | return function(action){
7 | let {type, types, url, data, method = 'get', name} = action;
8 | if(!url){
9 | return dispatch(action)
10 | }
11 |
12 | dispatch({type: constants.Requesting})
13 |
14 | http[method](url, data).then((res) => {
15 | let _action = {
16 | type: constants.Requested,
17 | name,
18 | result: res.data
19 | }
20 | dispatch(_action)
21 | }).catch((error) => {
22 | dispatch({type: constants.RequestError})
23 | })
24 | }
25 | }
26 | }
--------------------------------------------------------------------------------
/react/jsx/2.vue.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Wscats
21 | childA childB
22 | {renderRoutes(this.props.route.routes)}
23 | {console.log(this.props.route.routes)}
24 | {console.log(routes)}
25 |
11 |
12 |
13 |
14 |
34 |
35 |
--------------------------------------------------------------------------------
/组件/类式组件和函数组件组合.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {button}
36 | // }
37 | // }
--------------------------------------------------------------------------------
/react/reactERP/src/modules/login/LoginReducer.js:
--------------------------------------------------------------------------------
1 | // import httpclient from '../../utils/HttpClient'
2 | import * as LoginConstants from './LoginConstants';
3 | import { combineReducers } from 'redux';
4 | import update from 'react-addons-update'
5 | function login(state = [], action){
6 |
7 | // httpclient.post(action.url, action.data).then(response => {
8 | // console.log(response);
9 | // state.state = response.state;
10 | // return state;
11 | // })
12 |
13 | // return state;
14 |
15 | // state.dataset = action.response.data.data;
16 | // console.log(action);
17 | const newData = update(state, {$push: [action.body]});
18 | // console.log(newData, state);
19 | return newData;
20 | }
21 |
22 | function getCode(state = {}, action){
23 | return state;
24 | }
25 |
26 | const logineReducer = combineReducers(
27 | {
28 | login,
29 | getCode
30 | }
31 | );
32 |
33 | export default logineReducer;
--------------------------------------------------------------------------------
/react/jsx/4.函数式编程.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
34 |
35 |
--------------------------------------------------------------------------------
/react/component/src/style/README.md:
--------------------------------------------------------------------------------
1 | ## 普通样式名称使用 —— className
2 | app.css
3 | ```css
4 | .c1{
5 | color: red;
6 | width: 100%;
7 | height: 300px;
8 | border: solid 1px red;
9 | }
10 | ```
11 | app.js
12 | ```javascript
13 | import './app.css'
14 |
15 | import React from 'react';
16 | import ReactDOM from 'react-dom';
17 |
18 | import './modules/cp/cp.scss'
19 | class Component1 extends React.Component{
20 | render(){
21 | return (
22 |
23 | )
24 | }
25 | }
26 |
27 | ReactDOM.render(
28 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
35 |
36 |
--------------------------------------------------------------------------------
/react/jsx/10.v-if.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
24 |
30 |
31 |
32 | -
25 |
- / 26 |
- index 27 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
36 |
37 |
--------------------------------------------------------------------------------
/react/reactERP/src/libs/font-awesome/less/mixins.less:
--------------------------------------------------------------------------------
1 | // Mixins
2 | // --------------------------
3 |
4 | .fa-icon() {
5 | display: inline-block;
6 | font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
7 | font-size: inherit; // can't have font-size inherit on line above, so need to override
8 | text-rendering: auto; // optimizelegibility throws things off #1094
9 | -webkit-font-smoothing: antialiased;
10 | -moz-osx-font-smoothing: grayscale;
11 |
12 | }
13 |
14 | .fa-icon-rotate(@degrees, @rotation) {
15 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation);
16 | -webkit-transform: rotate(@degrees);
17 | -ms-transform: rotate(@degrees);
18 | transform: rotate(@degrees);
19 | }
20 |
21 | .fa-icon-flip(@horiz, @vert, @rotation) {
22 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation, mirror=1);
23 | -webkit-transform: scale(@horiz, @vert);
24 | -ms-transform: scale(@horiz, @vert);
25 | transform: scale(@horiz, @vert);
26 | }
27 |
--------------------------------------------------------------------------------
/react/reactERP/src/components/home/header/header.scss:
--------------------------------------------------------------------------------
1 | @import '../../../libs/common/global.scss';
2 |
3 | .dk-header{
4 | position: fixed;
5 | top: 0;
6 | width: 100%;
7 | height: 42px;
8 | border-bottom: solid 1px #ccc;
9 | /*logo*/
10 | >ul:first-child{
11 | width: 200px;
12 | height: 100%;
13 | float: left;
14 | li{
15 | width: 100%;
16 | height: 100%;
17 | padding: 4px 15px;
18 | font-family: 'Raleway', sans-serif;
19 | font-size: 25px;
20 | a{
21 | color: #666666;
22 | }
23 | }
24 | }
25 | /*right*/
26 | >ul:last-child{
27 | height: 100%;
28 | float: right;
29 | padding-right: 20px;
30 | li{
31 | // width: 48px;
32 | height: 100%;
33 | position: relative;
34 | text-align: center;
35 | padding: 15px;
36 | float: left;
37 | a{color: #666666;}
38 | i{font-size: 18px;}
39 | span{position: absolute; top: 5px; left: 3px; font-size: 10px; padding: 2px 5px;}
40 | }
41 | li:last-child{
42 | width: auto;
43 | padding: 15px;
44 | }
45 | li:hover{
46 | background-color: #eceeef;
47 | }
48 | }
49 | }
--------------------------------------------------------------------------------
/react/reactERP/src/libs/font-awesome/scss/_mixins.scss:
--------------------------------------------------------------------------------
1 | // Mixins
2 | // --------------------------
3 |
4 | @mixin fa-icon() {
5 | display: inline-block;
6 | font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
7 | font-size: inherit; // can't have font-size inherit on line above, so need to override
8 | text-rendering: auto; // optimizelegibility throws things off #1094
9 | -webkit-font-smoothing: antialiased;
10 | -moz-osx-font-smoothing: grayscale;
11 |
12 | }
13 |
14 | @mixin fa-icon-rotate($degrees, $rotation) {
15 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
16 | -webkit-transform: rotate($degrees);
17 | -ms-transform: rotate($degrees);
18 | transform: rotate($degrees);
19 | }
20 |
21 | @mixin fa-icon-flip($horiz, $vert, $rotation) {
22 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
23 | -webkit-transform: scale($horiz, $vert);
24 | -ms-transform: scale($horiz, $vert);
25 | transform: scale($horiz, $vert);
26 | }
27 |
--------------------------------------------------------------------------------
/react/jsx/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
34 |
--------------------------------------------------------------------------------
/react/jsx/7.v-bind:xxx.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
40 |
41 |
--------------------------------------------------------------------------------
/cms/webpack.config.js:
--------------------------------------------------------------------------------
1 | //__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录
2 | module.exports = { //注意这里是exports不是export
3 | devtool: 'eval-source-map', //生成Source Maps,这里选择eval-source-map
4 | entry: __dirname + "/app/main.js", //唯一入口文件
5 | output: { //输出目录
6 | path: __dirname + "/build", //打包后的js文件存放的地方
7 | filename: 'bundle.js', //打包后的js文件名
8 | },
9 | module: {
10 | loaders: [{
11 | test: /\.js[x]?$/, //匹配到js或jsx文件后 使用 babel-loader 来处理
12 | exclude: /node_modules/, //屏蔽不需要处理的文件（文件夹）（可选）
13 | loader: 'babel-loader'
14 | //npm install babel-loader
15 | //npm install babel-core
16 | }, {
17 | test: /\.css$/,
18 | loader: 'style-loader!css-loader'
19 | }, {
20 | test: /\.less$/,
21 | loader: 'style-loader!css-loader!less-loader'
22 | }, {
23 | test: /\.(png|jpg)$/,
24 | loader: 'url-loader?limit=25000'
25 | }]
26 | },
27 | devServer: {
28 | contentBase: './build', //默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到"build"目录）
29 | historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
30 | inline: true, //设置为true，当源文件改变时会自动刷新页面
31 | port: 12345, //设置默认监听端口，如果省略，默认为"8080"
32 | }
33 | };
--------------------------------------------------------------------------------
/lol/webpack.config.js:
--------------------------------------------------------------------------------
1 | //__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录
2 | module.exports = { //注意这里是exports不是export
3 | devtool: 'eval-source-map', //生成Source Maps,这里选择eval-source-map
4 | entry: __dirname + "/app/main.js", //唯一入口文件
5 | output: { //输出目录
6 | path: __dirname + "/build", //打包后的js文件存放的地方
7 | filename: 'bundle.js', //打包后的js文件名
8 | },
9 | module: {
10 | loaders: [{
11 | test: /\.js[x]?$/, //匹配到js或jsx文件后 使用 babel-loader 来处理
12 | exclude: /node_modules/, //屏蔽不需要处理的文件（文件夹）（可选）
13 | loader: 'babel-loader'
14 | //npm install babel-loader
15 | //npm install babel-core
16 | }, {
17 | test: /\.css$/,
18 | loader: 'style-loader!css-loader'
19 | }, {
20 | test: /\.less$/,
21 | loader: 'style-loader!css-loader!less-loader'
22 | }, {
23 | test: /\.(png|jpg)$/,
24 | loader: 'url-loader?limit=25000'
25 | }]
26 | },
27 | devServer: {
28 | contentBase: './build', //默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到"build"目录）
29 | historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
30 | inline: true, //设置为true，当源文件改变时会自动刷新页面
31 | port: 12345, //设置默认监听端口，如果省略，默认为"8080"
32 | }
33 | };
--------------------------------------------------------------------------------
/react+webpack/webpack.config.js:
--------------------------------------------------------------------------------
1 | //__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录
2 | module.exports = { //注意这里是exports不是export
3 | devtool: 'eval-source-map', //生成Source Maps,这里选择eval-source-map
4 | entry: __dirname + "/app/main.js", //唯一入口文件
5 | output: { //输出目录
6 | path: __dirname + "/build", //打包后的js文件存放的地方
7 | filename: 'bundle.js', //打包后的js文件名
8 | },
9 | module: {
10 | loaders: [{
11 | test: /\.js[x]?$/, //匹配到js或jsx文件后 使用 babel-loader 来处理
12 | exclude: /node_modules/, //屏蔽不需要处理的文件（文件夹）（可选）
13 | loader: 'babel-loader'
14 | //npm install babel-loader
15 | //npm install babel-core
16 | }, {
17 | test: /\.css$/,
18 | loader: 'style-loader!css-loader'
19 | }, {
20 | test: /\.less$/,
21 | loader: 'style-loader!css-loader!less-loader'
22 | }, {
23 | test: /\.(png|jpg)$/,
24 | loader: 'url-loader?limit=25000'
25 | }]
26 | },
27 | devServer: {
28 | contentBase: './build', //默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到"build"目录）
29 | historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
30 | inline: true, //设置为true，当源文件改变时会自动刷新页面
31 | port: 12345, //设置默认监听端口，如果省略，默认为"8080"
32 | }
33 | };
--------------------------------------------------------------------------------
/react+webpack+react-router/webpack.config.js:
--------------------------------------------------------------------------------
1 | //__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录
2 | module.exports = { //注意这里是exports不是export
3 | devtool: 'eval-source-map', //生成Source Maps,这里选择eval-source-map
4 | entry: __dirname + "/app/main.js", //唯一入口文件
5 | output: { //输出目录
6 | path: __dirname + "/build", //打包后的js文件存放的地方
7 | filename: 'bundle.js', //打包后的js文件名
8 | },
9 | module: {
10 | loaders: [{
11 | test: /\.js[x]?$/, //匹配到js或jsx文件后 使用 babel-loader 来处理
12 | exclude: /node_modules/, //屏蔽不需要处理的文件（文件夹）（可选）
13 | loader: 'babel-loader'
14 | //npm install babel-loader
15 | //npm install babel-core
16 | }, {
17 | test: /\.css$/,
18 | loader: 'style-loader!css-loader'
19 | }, {
20 | test: /\.less$/,
21 | loader: 'style-loader!css-loader!less-loader'
22 | }, {
23 | test: /\.(png|jpg)$/,
24 | loader: 'url-loader?limit=25000'
25 | }]
26 | },
27 | devServer: {
28 | contentBase: './build', //默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到"build"目录）
29 | historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
30 | inline: true, //设置为true，当源文件改变时会自动刷新页面
31 | port: 8080, //设置默认监听端口，如果省略，默认为"8080"
32 | }
33 | };
--------------------------------------------------------------------------------
/组件/组件添加状态.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
27 |
34 | )
35 | }
36 | }
37 | Skill.propTypes = {
38 | //定义传入props中的属性各种类型
39 | initialValue: PropTypes.string.isRequired//PropTypes.string
40 | };
41 | Skill.defaultProps = {
42 | //组件默认的props对象
43 | initialValue: 'Hello Oaoafly'
44 | };
45 | module.exports = Skill;
--------------------------------------------------------------------------------
/react+webpack/app/routes.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | import { matchRoutes, renderRoutes } from 'react-router-config';
3 | import {
4 | BrowserRouter as Router,
5 | Route,
6 | Link
7 | } from 'react-router-dom';
8 |
9 | var AppComponent = require('./components/productBox.jsx');
10 | var Wscats = require('./components/wscats.jsx');
11 | var IndexA = require('./components/index/indexA.jsx');
12 | var IndexB = require('./components/index/indexB.jsx');
13 | var Root = require('./components/root.jsx')
14 | //根组件
15 | /*const Root = ({route}) => (
16 | sKill
28 |
29 | Type something:
30 |
31 |
33 | {this.state.text}
32 |
17 |
22 | )*/
23 |
24 | const routes = [
25 | { component: Root,
26 | routes: [
27 | { path: '/',
28 | exact: true,
29 | component: AppComponent
30 | },
31 | { path: '/index',
32 | component: Wscats,
33 | routes: [
34 | { path: '/childA',
35 | component: IndexA
36 | },
37 | { path: '/childB',
38 | component: IndexB
39 | }
40 | ]
41 | }
42 | ]
43 | }
44 | ]
45 | module.exports = routes;
--------------------------------------------------------------------------------
/react+webpack+react-router/app/components/wscats.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var ReactDom = require('react-dom');
3 | //引入skill组件
4 | var Skill = require('./index/skill.jsx');
5 | import {
6 | BrowserRouter as Router,
7 | Route,
8 | Link
9 | } from 'react-router-dom'
10 | const Topic = () => (
11 | Root
18 | home index 19 | {renderRoutes(route.routes)} 20 | {console.log(route)} 21 |
12 |
14 | )
15 | const About = ({match}) => (
16 | Topic
13 |
17 |
20 | )
21 | //新版本的写法 推荐
22 | class Wscats extends React.Component {
23 | render() {
24 | return(
25 | About
18 |ID: {match.params.id}
19 |
26 |
51 | )
52 | }
53 | }
54 | module.exports = Wscats;
--------------------------------------------------------------------------------
/react/reactERP/src/components/modal/modalcomponent.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 |
3 | import DatagridComponent from '../datagrid/datagridcomponent'
4 |
5 | import './modal.css'
6 |
7 | class ModalComponent extends Component{
8 | cancel(){
9 | this.props.cb();
10 | }
11 | render(){
12 | let content = null;
13 | if(this.props.config.type == 'datagrid'){
14 | content = Wscats
27 |
28 |
47 |
48 |
49 |
50 | 主题列表
29 |-
30 |
- 31 | 32 | 主页 33 | 34 | 35 |
- 36 | 37 | 关于 38 | 39 | 40 |
- 41 | 42 | 技能 43 | 44 | 45 |
modal
17 | } 18 | 19 | let html = ( 20 |
21 |
32 | )
33 | return this.props.show ? html : null;
34 | }
35 | }
36 |
37 | export default ModalComponent;
--------------------------------------------------------------------------------
/react/reactERP/src/modules/order/orderComponent.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {connect} from 'react-redux'
3 | import * as orderActions from './orderAction';
4 | import PropTypes from 'prop-types'
5 |
6 |
7 | class OrderComponent extends React.Component{
8 | scanHandler(){
9 | this.props.scanCode();
10 | }
11 | printHandler(){
12 | this.props.print();
13 | }
14 | render(){
15 | return (
16 |
22 |
30 |
31 |
23 |
26 | Modal Header
24 | × 25 |
27 | {content}
28 |
29 |
17 |
18 |
19 |
25 | )
26 | }
27 | }
28 |
29 | OrderComponent.propTypes = {
30 | name: PropTypes.string.isRequired
31 | }
32 |
33 | // const mapStateToProps = state => ({order: state.order})
34 | // state == store
35 | const mapStateToProps = (store) => {
36 | return {
37 | order: store.order
38 | }
39 | }
40 | export default connect(mapStateToProps, orderActions)(OrderComponent)
41 |
42 | // export default OrderComponent;
--------------------------------------------------------------------------------
/react/js/react-dom.js:
--------------------------------------------------------------------------------
1 | /**
2 | * ReactDOM v15.0.1
3 | *
4 | * Copyright 2013-present, Facebook, Inc.
5 | * All rights reserved.
6 | *
7 | * This source code is licensed under the BSD-style license found in the
8 | * LICENSE file in the root directory of this source tree. An additional grant
9 | * of patent rights can be found in the PATENTS file in the same directory.
10 | *
11 | */
12 | // Based off https://github.com/ForbesLindesay/umd/blob/master/template.js
13 | ;(function(f) {
14 | // CommonJS
15 | if (typeof exports === "object" && typeof module !== "undefined") {
16 | module.exports = f(require('react'));
17 |
18 | // RequireJS
19 | } else if (typeof define === "function" && define.amd) {
20 | define(['react'], f);
21 |
22 | //
30 |
31 |
32 |
33 |
34 |
35 |
47 |
48 |
--------------------------------------------------------------------------------
/react/component/src/event/event.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | -
20 |
- {this.props.name} 21 |
- {this.props.price} 22 |
{this.props.order.scanCode.length}
24 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/遍历/遍历.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 |
32 | )
33 | }
34 | }
35 |
36 | export default HeaderComponent
--------------------------------------------------------------------------------
/事件委托/事件委托.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | -
10 |
- PrintERP 11 |
-
13 |
- 14 | 15 | 16 | 2 17 | 18 | 19 |
- 20 | 21 | 22 | 2 23 | 24 | 25 |
- 26 | 27 | Adminstrator 28 | 29 | 30 |
13 |
31 | )
32 | }
33 | }
34 |
35 | export default LoginComponent
--------------------------------------------------------------------------------
/react/component/src/state/es5-state.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
14 |
29 | 登录
15 | 28 |2017 © dk by www.wscats.com
30 |
14 |
15 |
16 |
18 |
19 |
40 |
41 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | )
51 | }
52 | }
53 | module.exports = ProductBox;
54 |
--------------------------------------------------------------------------------
/lol/app/components/home.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | import {
3 | Grid,
4 | Row,
5 | Col,
6 | Table,
7 | ButtonToolbar,
8 | Button
9 | } from 'react-bootstrap';
10 | class ProductBox extends React.Component {
11 | render() {
12 | return (
13 | | # | 21 |First Name | 22 |Last Name | 23 |Username | 24 |
|---|---|---|---|
| 1 | 29 |Mark | 30 |Otto | 31 |
32 | |
36 |
14 |
15 |
16 |
18 |
19 |
40 |
41 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | )
51 | }
52 | }
53 | module.exports = ProductBox;
54 |
--------------------------------------------------------------------------------
/react/component/src/state/setState.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | | # | 21 |First Name | 22 |Last Name | 23 |Username | 24 |
|---|---|---|---|
| 1 | 29 |Mark | 30 |Otto | 31 |
32 | |
36 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/CASE.md:
--------------------------------------------------------------------------------
1 | # react-tutorial
2 |
3 | |DEMO|DEMO|
4 | |-|-|
5 | |[react实现图灵机器人](https://wscats.github.io/react-tutorial/图灵机器人/index.html)|[react双向数据绑定](https://wscats.github.io/react-tutorial/双向数据绑定/demo.html)|
6 | |[react传递参数到函数体](https://wscats.github.io/react-tutorial/双向数据绑定/传递函数到函数体.html)|[react遍历列表的事件监听和传参](https://wscats.github.io/react-tutorial/双向数据绑定/遍历列表的事件监听和传参.html)|
7 |
8 |
9 | ## Redux
10 | |DEMO|DEMO|
11 | |-|-|
12 | |[原生rudux实例](https://wscats.github.io/react-tutorial/redux/demo1/index.html)|[vue+rudux实例](https://wscats.github.io/react-tutorial/redux/demo2/index.html)|
13 | |[react+redux组件通信](https://wscats.github.io/react-tutorial/redux/demo1/react+redux.html)|[angular+redux组件通信](https://wscats.github.io/react-tutorial/redux/demo1/angular+redux.html)|
14 |
15 | ## Route
16 | |DEMO|DEMO|
17 | |-|-|
18 | |[路由嵌套和组件传参](https://wscats.github.io/react-tutorial/react+webpack+react-router/build/index.html)||
19 |
20 | ## DOM
21 | |DEMO|DEMO|
22 | |-|-|
23 | |[遍历数组](https://wscats.github.io/react-tutorial/遍历/遍历.html)|[类名切换](https://wscats.github.io/react-tutorial/DOM/类名切换.html)|
24 |
25 | ## Component
26 | |DEMO|DEMO|
27 | |-|-|
28 | |[组件Props传对象](https://wscats.github.io/react-tutorial/组件/props传对象.html)|[类式组件和函数组件组合](https://wscats.github.io/react-tutorial/组件/类式组件和函数组件组合.html)|
29 | |[组件添加状态](https://wscats.github.io/react-tutorial/组件/组件添加状态.html)|[组件的this指向](https://wscats.github.io/react-tutorial/组件/组件的this指向.html)|
30 | |[setState更改状态](https://wscats.github.io/react-tutorial/组件/setState更改状态.html)|[组件化开发案例](https://wscats.github.io/react-tutorial/组件/1.weui/index.html)|
31 | |[选项卡](https://wscats.github.io/react-tutorial/组件/选项卡.html)||
32 |
--------------------------------------------------------------------------------
/react/component/src/define/类组件和props.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
54 |
55 |
--------------------------------------------------------------------------------
/组件/1.weui/components/xsearch.jsx:
--------------------------------------------------------------------------------
1 | let Xsearch = React.createClass({
2 | getInitialState() {
3 | return {bool: false, searchText: ""}
4 | },
5 | focusing() {
6 | this.setState({bool: true})
7 | console.log(this.refs.input)
8 | this.refs.input.focus()
9 | },
10 | cancelFocusing() {
11 | this.setState({bool: false})
12 | },
13 | getSearchText(e) {
14 | this.setState({searchText: e.target.value})
15 | },
16 | searchClear() {
17 | this.setState({searchText: ""})
18 | this.refs.input.focus()
19 | },
20 | render() {
21 | return (
22 |
29 |
40 | 取消
41 |
42 | )
43 | }
44 | })
45 |
--------------------------------------------------------------------------------
/react/jsx/3.jsx.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
14 |
34 | )
35 | }
36 | }
37 |
38 | // const mapStateToProps = state => ({
39 | // loading: false,
40 | // })
41 |
42 | const mapStateToProps = (state) => {
43 | return {
44 | loading: false,
45 | a: state.login.login.a
46 | }
47 | }
48 | export default connect(mapStateToProps, loginActions)(LoginComponent)
--------------------------------------------------------------------------------
/react/redux/middleware/src/utils/HttpClient.js:
--------------------------------------------------------------------------------
1 | import request from 'superagent'
2 |
3 | const LOCAL_SERVER = 'http://localhost:888/';
4 |
5 | const DEV_SERVER = '';
6 | const PRO_SERVER = 'http://www.wscats.com/cloudapi/';
7 |
8 | function getUrl(path) {
9 | if (path.startsWith('http')) {
10 | return path;
11 | }
12 | return `${PRO_SERVER}${path}`;
13 | }
14 |
15 | const errorHandler = (err) => {
16 | var str = err.response.status
17 | str += ' - '
18 | str += err.response.statusText
19 | str += '
15 |
18 |
22 |
19 |
20 |
21 |
23 |
26 |
30 |
31 |
32 |
27 |
28 |
29 | {this.props.a}
33 |请求路径：
' 20 | str += err.response.error.url 21 | console.log(str); 22 | } 23 | 24 | const HttpClient = { 25 | get: (path, query) => new Promise((resolve, reject) => { 26 | var req = request 27 | .get(getUrl(path)) 28 | .query(query) 29 | .set('Authorization', window.localStorage.getItem('access_token')) 30 | .end((err, res) => { 31 | if (err) { 32 | errorHandler(err) 33 | reject(err); 34 | } else { 35 | resolve(res.body); 36 | } 37 | }); 38 | }), 39 | 40 | post: (path, formdata, query) => new Promise((resolve, reject) => { 41 | request 42 | .post(getUrl(path)) 43 | .set('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8') 44 | .query(query) 45 | .send(formdata) 46 | .end((err, res) => { 47 | if (err) { 48 | errorHandler(err) 49 | reject(err); 50 | } else { 51 | resolve(res.body); 52 | } 53 | }); 54 | }) 55 | }; 56 | 57 | export default HttpClient; 58 | -------------------------------------------------------------------------------- /cms/app/components/topics.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {BrowserRouter as Router, Route, Link} from 'react-router-dom' 3 | 4 | import {connect} from 'react-redux'; 5 | 6 | import {increaseAction, multiAction} from '../action.js'; 7 | 8 | const Topic = ({match}) => ( 9 |
10 |
12 | )
13 | class Topics extends React.Component {
14 | render() {
15 | const {value, onIncreaseClick} = this.props;
16 | return (
17 | {match.params.topicId}
11 |
18 |
39 | (
40 |
43 | )
44 | }
45 | }
46 |
47 | // Map Redux state to component props
48 | function mapStateToProps(state) {
49 | return {value: state.count}
50 | }
51 |
52 | // Map Redux actions to component props
53 | function mapDispatchToProps(dispatch) {
54 | return {
55 | onIncreaseClick: () => {
56 | //可以触发多个
57 | dispatch(increaseAction())
58 | dispatch(multiAction())
59 | }
60 | }
61 | }
62 |
63 | // Connected Component 让Topics也连接上store
64 | module.exports = connect(mapStateToProps, mapDispatchToProps)(Topics);
65 |
--------------------------------------------------------------------------------
/lol/app/components/topics.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
3 |
4 | import {connect} from 'react-redux';
5 |
6 | import {increaseAction, multiAction} from '../action.js';
7 |
8 | const Topic = ({match}) => (
9 | 主题列表
19 |{value}
20 | 21 |-
22 |
- 23 | 24 | 使用 React 渲染 25 | 26 | 27 |
- 28 | 29 | 组件 30 | 31 | 32 |
- 33 | 34 | 属性 v. 状态 35 | 36 | 37 |
请选择一个主题。
41 | )}/> 42 |
10 |
12 | )
13 | class Topics extends React.Component {
14 | render() {
15 | const {value, onIncreaseClick} = this.props;
16 | return (
17 | {match.params.topicId}
11 |
18 |
39 | (
40 |
43 | )
44 | }
45 | }
46 |
47 | // Map Redux state to component props
48 | function mapStateToProps(state) {
49 | return {value: state.count}
50 | }
51 |
52 | // Map Redux actions to component props
53 | function mapDispatchToProps(dispatch) {
54 | return {
55 | onIncreaseClick: () => {
56 | //可以触发多个
57 | dispatch(increaseAction())
58 | dispatch(multiAction())
59 | }
60 | }
61 | }
62 |
63 | // Connected Component 让Topics也连接上store
64 | module.exports = connect(mapStateToProps, mapDispatchToProps)(Topics);
65 |
--------------------------------------------------------------------------------
/react/reactERP/src/utils/ajaxMiddleware.js:
--------------------------------------------------------------------------------
1 | import http from '../utils/HttpClient';
2 |
3 | export function ajaxMiddleware({ dispatch, getState }) {
4 |
5 | return next => action => {
6 | const {
7 | types,
8 | shouldCallAPI = () => true,
9 | query = {},
10 | payload = {},
11 | method = "get",
12 | path
13 | } = action;
14 |
15 |
16 | // if (!types) {
17 | // // Normal action: pass it on
18 | // return next(action);
19 | // }
20 |
21 |
22 |
23 | if (!path || !method) {
24 | return next(action)
25 | // throw new Error('path and method is required!');
26 | }
27 |
28 | if (!Array.isArray(types) || types.length !== 3 || !types.every(type => typeof type === 'string')) {
29 | throw new Error('Expected an array of three string types.');
30 | }
31 |
32 | if (!shouldCallAPI(getState())) {
33 | return;
34 | }
35 |
36 | const [requestType, successType, failureType] = types;
37 |
38 | dispatch(Object.assign({}, { query }, { payload }, {
39 | type: requestType,
40 | }));
41 |
42 | return http[method](path, query, payload)
43 | .then(
44 | response => dispatch(Object.assign({}, { query }, { payload }, {
45 | type: successType,
46 | body: response,
47 | lastFetched: Date.now()
48 | })),
49 | error => dispatch(Object.assign({}, { query }, { payload }, {
50 | type: failureType,
51 | error
52 | }))
53 | );
54 | };
55 | }
56 |
--------------------------------------------------------------------------------
/react/jsx/5.v-for.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 主题列表
19 |{value}
20 | 21 |-
22 |
- 23 | 24 | 使用 React 渲染 25 | 26 | 27 |
- 28 | 29 | 组件 30 | 31 | 32 |
- 33 | 34 | 属性 v. 状态 35 | 36 | 37 |
请选择一个主题。
41 | )}/> 42 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
60 |
61 |
--------------------------------------------------------------------------------
/react+webpack+react-router+redux/app/components/topics.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
3 |
4 | import {connect} from 'react-redux';
5 |
6 | import {increaseAction, multiAction} from '../action.js';
7 |
8 | const Topic = ({match}) => (
9 |
10 |
12 | )
13 | class Topics extends React.Component {
14 | render() {
15 | const {value, onIncreaseClick} = this.props;
16 | return (
17 | {match.params.topicId}
11 |
18 |
39 | (
40 |
43 | )
44 | }
45 | }
46 |
47 | // Map Redux state to component props
48 | function mapStateToProps(state) {
49 | return {value: state.count}
50 | }
51 |
52 | // Map Redux actions to component props
53 | function mapDispatchToProps(dispatch) {
54 | return {
55 | onIncreaseClick: () => {
56 | //可以触发多个
57 | dispatch(increaseAction())
58 | dispatch(multiAction())
59 | }
60 | }
61 | }
62 |
63 | // Connected Component 让Topics也连接上store
64 | module.exports = connect(mapStateToProps, mapDispatchToProps)(Topics);
65 |
--------------------------------------------------------------------------------
/组件/setState更改状态.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 主题列表
19 |{value}
20 | 21 |-
22 |
- 23 | 24 | 使用 React 渲染 25 | 26 | 27 |
- 28 | 29 | 组件 30 | 31 | 32 |
- 33 | 34 | 属性 v. 状态 35 | 36 | 37 |
请选择一个主题。
41 | )}/> 42 |
12 |
20 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/react/reactERP/src/components/home/nav/nav.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 | import {Link} from 'react-router'
3 | import './nav.scss'
4 |
5 | export default class NavComponent extends Component{
6 | toggleNav(){}
7 | toggleNavItem(){}
8 | render(){
9 | return (
10 | 13 | Clicked: 0 times 14 | 15 | 16 | 17 | 18 |
19 |
11 |
45 | )
46 | }
47 | }
--------------------------------------------------------------------------------
/react/component/src/render/condition-rendering.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | -
12 |
- 13 | 14 | 15 | 16 | 17 |
-
18 |
19 |
20 | 档案管理
21 |
22 |
23 |
-
24 |
- 客户档案 25 |
- 产品档案 26 |
- 供应商档案 27 |
- 人事档案 28 |
30 | -
31 |
32 |
33 | 系统设置
34 |
35 |
36 |
-
37 |
- 修改密码 38 |
- 修改信息 39 |
- 权限设置 40 |
- 模块设置 41 |
43 |
54 |
61 |
62 |
63 | )
64 | }
65 | }
--------------------------------------------------------------------------------
/react/redux/middleware/src/components/datagrid/datagridcomponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {connect} from 'react-redux'
3 |
4 | import SpinnerComponent from '../spinner/spinner'
5 |
6 | import * as actions from './datagridaction'
7 |
8 | class DatagridComponent extends React.Component{
9 | getKeys(item){
10 | let cols = item ? Object.keys(item) : [];
11 | return this.props.config.cols || cols;
12 | }
13 |
14 | componentWillMount(){
15 | this.props.refresh(this.props.config)
16 | }
17 | render(){
18 | return (
19 |
55 |
60 |
56 |
57 |
59 | ...
58 |
20 |
21 |
22 |
47 |
48 |
49 | )
50 | }
51 | }
52 |
53 | const mapStateToProps = (state) => {
54 | return {
55 | dataset: state.datagrid.dataset || [],
56 | show: state.datagrid.show,
57 | error: state.datagrid.error
58 | }
59 | }
60 |
61 | export default connect(mapStateToProps, actions)(DatagridComponent);
--------------------------------------------------------------------------------
/redux/demo1/angular+redux.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | | {key} | 26 | }) 27 | } 28 |
|---|
| {item[key]} | 38 | }) 39 | } 40 |
25 |
28 |
29 |
30 |
31 |
32 |
96 |
97 |
--------------------------------------------------------------------------------
/react/reactERP/src/utils/HttpClient.js:
--------------------------------------------------------------------------------
1 | import request from 'superagent'
2 |
3 | const LOCAL_SERVER = 'http://localhost:888/';
4 |
5 | const DEV_SERVER = '';
6 | const PRO_SERVER = 'http://www.wscats.com/cloudapi/';
7 |
8 | function getUrl(path) {
9 | if (path.startsWith('http')) {
10 | return path;
11 | }
12 | return `${PRO_SERVER}${path}`;
13 | }
14 |
15 | const errorHandler = (err) => {
16 | var str = err.response.status
17 | str += ' - '
18 | str += err.response.statusText
19 | str += '请求路径：
' 20 | str += err.response.error.url 21 | console.log(str); 22 | } 23 | 24 | const HttpClient = { 25 | get: (path, query) => new Promise((resolve, reject) => { 26 | // if(!window.localStorage.getItem('access_token')){ 27 | // router.push({name: 'login'}); 28 | // return false; 29 | // } 30 | var req = request 31 | .get(getUrl(path)) 32 | .query(query) 33 | .set('Authorization', window.localStorage.getItem('access_token')) 34 | .end((err, res) => { 35 | if (err) { 36 | errorHandler(err) 37 | reject(err); 38 | } else { 39 | resolve(res.body); 40 | } 41 | }); 42 | }), 43 | 44 | post: (path, formdata, query) => new Promise((resolve, reject) => { 45 | // if(path.indexOf('login/index') < 0 && !window.localStorage.getItem('access_token')){ 46 | // router.push({name: 'login'}); 47 | // return false; 48 | // } 49 | request 50 | .post(getUrl(path)) 51 | .set('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8') 52 | .set('Authorization', window.localStorage.getItem('access_token')) 53 | .query(query) 54 | .send(formdata) 55 | .end((err, res) => { 56 | if (err) { 57 | errorHandler(err) 58 | reject(err); 59 | } else { 60 | if(path.indexOf('login/index') > -1){ 61 | window.localStorage.setItem('access_token', res.body.token_type + ' ' + res.body.access_token) 62 | } 63 | resolve(res.body); 64 | } 65 | }); 66 | }) 67 | }; 68 | 69 | export default HttpClient; 70 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 认识 React 2 | React 是 facebook 开源的一套框架，可总结为以下几个特点： 3 | - 基于 JSX 语法糖实现 4 | - JUST THE UI：在多层架构的设计模式中，React 并不算 MVC 的架构，它可理解为 MVC 的 V 层。 5 | - VIRTUAL DOM：虚拟DOM，是轻量的 js 对象，只保留了原生 dom 的一些常用的属性和方法。 6 | - DATA FLOW： React是单向响应的数据流。 7 | 8 | # 技术点 9 | - [JSX 语法](https://github.com/wscats/react-tutorial/tree/master/react/jsx) 10 | - [组件定义](https://github.com/wscats/react-tutorial/tree/master/react/component/src/define) 11 | - [组件渲染](https://github.com/wscats/react-tutorial/tree/master/react/component/src/render) 12 | - [组件事件](https://github.com/wscats/react-tutorial/tree/master/react/component/src/event) 13 | - [state](https://github.com/wscats/react-tutorial/tree/master/react/component/src/state) 14 | - [样式绑定](https://github.com/wscats/react-tutorial/tree/master/react/component/src/style) 15 | - [表单](https://github.com/wscats/react-tutorial/tree/master/react/component/src/form) 16 | - [组件通信](https://github.com/wscats/react-tutorial/tree/master/react/component/src/communication) 17 | - [生命周期](https://github.com/wscats/react-tutorial/tree/master/react/component/src/lifecycle) 18 | - [模块化（webpack）](https://github.com/wscats/react-tutorial/tree/master/react/webpack) 19 | - [脚手架（create-react-app）](https://github.com/wscats/react-tutorial/tree/master/react/create-react-app) 20 | - [调试工具（react-dev-tool）](https://github.com/wscats/react-tutorial/tree/master/react/react-devtool) 21 | - [路由（3.0）](https://github.com/wscats/react-tutorial/tree/master/react/router)[和（4.0）](https://github.com/wscats/react-tutorial/tree/master/react/router4) 22 | - Redux 23 | - [Redux 简介和简单实现](https://github.com/wscats/react-tutorial/tree/master/react/redux) 24 | - [Redux 跨组件通信之入门篇 —— combineReducers](https://github.com/wscats/react-tutorial/tree/master/react/redux/combineReducers) 25 | - [Redux 跨组件通信之进阶篇 —— Provider 和 connect](https://github.com/wscats/react-tutorial/tree/master/react/redux/connetProvider) 26 | - [Redux 跨组件通信之高级篇 —— 中间件](https://github.com/wscats/react-tutorial/tree/master/react/redux/middleware) 27 | - [项目应用](https://wscats.github.io/react-tutorial/react/reactERP/index.html#/login) 28 | - [其他案例](https://github.com/Wscats/react-tutorial/blob/master/CASE.md) 29 | - [纲要总结](https://github.com/Wscats/react-tutorial/blob/master/react/summery/summery.md) 30 | 31 | # 题外话 32 | 33 | 这份教程是综合了[Y.Pig](https://github.com/Wscats/react-tutorial)和[DK](https://github.com/dk-lan/react)的内容，因为代码和文档比较多，整理中如有疏漏或者错误，可以在 Issues 中提出，多多谅解，希望对你们有帮助，如果你喜欢可以点个 Star 或者 Fork ，谢谢~ -------------------------------------------------------------------------------- /react/router/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
29 |
67 | )
68 | },
69 | componentDidMount() {
70 | this.getNews()
71 | }
72 | })
73 |
--------------------------------------------------------------------------------
/react/redux/middleware/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 | var ProgressBarPlugin = require('progress-bar-webpack-plugin');
4 | //css样式从js文件中分离出来,需要通过命令行安装 extract-text-webpack-plugin依赖包
5 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
6 | module.exports = {
7 | entry: './src/app.js',//唯一入口文件
8 | output: {//输出目录
9 | path: path.resolve(__dirname, './dist'),//打包后的js文件存放的地方(build 后的文件)
10 | publicPath: '/dist/',//指定资源文件引用的目录(build 在内存中的位置)
11 | filename: 'bundle.js'//打包后输出的js的文件名
12 | },
13 | module: {
14 | rules: [{
15 | test: /\.css$/,
16 | exclude: '/node_modules/',
17 | loader: 'style-loader!css-loader?sourceMap'
18 | }, {
19 | test: /\.scss$/,
20 | exclude: /node_modules/,
21 | use: [{
22 | loader: "style-loader" // creates style nodes from JS strings
23 | }, {
24 | loader: "css-loader" // translates CSS into CommonJS
25 | }, {
26 | loader: "sass-loader" // compiles Sass to CSS
27 | }]
28 | // loader: ExtractTextPlugin.extract("style", 'css!sass') //这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:'style!css!sass'
29 | } ,{
30 | test: /\.(js|jsx)$/, //一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须）
31 | exclude: '/node_modules/', //屏蔽不需要处理的文件（文件夹）（可选）
32 | use: ['babel-loader']
33 | },{
34 | test: /\.(woff|svg|eot|ttf)\??.*$/,
35 | exclude: /node_modules/,
36 | loader: 'url-loader?limit=50000&name=[path][name].[ext]'
37 | },{
38 | test: /\.(jpe?g|png|gif|svg)$/i,
39 | use: [{
40 | loader: 'file-loader',
41 | options: {
42 | query: {
43 | name:'assets/[name].[ext]'
44 | }
45 | }
46 | },{
47 | loader: 'image-webpack-loader',
48 | options: {
49 | query: {
50 | mozjpeg: {
51 | progressive: true,
52 | },
53 | gifsicle: {
54 | interlaced: true,
55 | },
56 | optipng: {
57 | optimizationLevel: 7,
58 | }
59 | }
60 | }
61 | }]
62 | }]
63 | },
64 | plugins: [
65 | new webpack.HotModuleReplacementPlugin(),
66 | new ProgressBarPlugin(),
67 | new ExtractTextPlugin('styles.css')
68 | ]
69 | };
--------------------------------------------------------------------------------
/react/router4/README.md:
--------------------------------------------------------------------------------
1 | # 路由
2 |
3 | 关于路由，我们得先了解，什么是单页面应用程序和多页面应用程序，因为路由是帮助我们实现单页面应用程序的关键
4 | |type|des|
5 | |-|-|
6 | |实现单页面应用程序single page application(SPA)|不刷新整个页面，永远在一个`index.html`，依靠路由切换具体的场景，首次加载大部分大部分东西，后面异步加载具体要更新的内容|
7 | |多页面应用程序|页面跳转，整体刷新，资源文件重新加载|
8 |
9 |
10 | 在[React-Router-DOM官方文档](https://reacttraining.com/react-router/web/guides/quick-start)中你会看到关于 React 路由有以下可以选装的模块
11 |
12 | |引用|作用|
13 | |-|-|
14 | |react-router|React Router 核心|
15 | |react-router-dom|用于DOM绑定的React Router|
16 | |react-router-native|用于React Native的React Router|
17 | |react-router-redux|React Router和Redux的集成|
18 | |react-router-config|静态路由配置的小助手|
19 |
20 | ## react-router和react-router-dom的区别
21 | 在React的使用中，我们一般要引入两个包，react 和 react-dom，react-router 和react-router-dom 并不是两个都要引用的
22 | 他们两个只要引用一个就行了，不同之处就是后者比前者多出了``和`图文组合列表
30 |
31 | {(function(self) {
32 | let html;
33 | if (self.state.news) {
34 | html = self.state.news.newslist.map((item) => {
35 | console.log(item);
36 | return (
37 |
38 |
60 | {/*
39 | 
40 |
41 |
42 |
45 |
46 | )
47 | })
48 | } else {
49 | return (
50 | {item.source}
43 |{item.title}
44 |
51 |
52 | 正在加载
53 |
54 | )
55 | }
56 | return html
57 | })(this)
58 | }
59 |
61 |
62 |
*/}
66 | 查看更多
63 |
64 |
65 |
31 |
32 |
33 |
58 |
59 |
60 | )
61 | }
62 | }
63 |
64 | const mapStateToProps = (state) => {
65 | return {
66 | dataset: state.datagrid,
67 | show: state.datagrid.show,
68 | error: state.datagrid.error
69 | }
70 | }
71 |
72 | export default connect(mapStateToProps, actions)(DatagridComponent);
--------------------------------------------------------------------------------
/react/reactERP/src/libs/bootstrap/datepicker/less/datepicker.less:
--------------------------------------------------------------------------------
1 | /*!
2 | * Datepicker for Bootstrap
3 | *
4 | * Copyright 2012 Stefan Petre
5 | * Licensed under the Apache License v2.0
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 | *
8 | */
9 |
10 | .datepicker {
11 | top: 0;
12 | left: 0;
13 | padding: 4px;
14 | margin-top: 1px;
15 | .border-radius(4px);
16 | &:before {
17 | content: '';
18 | display: inline-block;
19 | border-left: 7px solid transparent;
20 | border-right: 7px solid transparent;
21 | border-bottom: 7px solid #ccc;
22 | border-bottom-color: rgba(0,0,0,.2);
23 | position: absolute;
24 | top: -7px;
25 | left: 6px;
26 | }
27 | &:after {
28 | content: '';
29 | display: inline-block;
30 | border-left: 6px solid transparent;
31 | border-right: 6px solid transparent;
32 | border-bottom: 6px solid @white;
33 | position: absolute;
34 | top: -6px;
35 | left: 7px;
36 | }
37 | >div {
38 | display: none;
39 | }
40 | table{
41 | width: 100%;
42 | margin: 0;
43 | }
44 | td,
45 | th{
46 | text-align: center;
47 | width: 20px;
48 | height: 20px;
49 | .border-radius(4px);
50 | }
51 | td {
52 | &.day:hover {
53 | background: @grayLighter;
54 | cursor: pointer;
55 | }
56 | &.day.disabled {
57 | color: @grayLighter;
58 | }
59 | &.old,
60 | &.new {
61 | color: @grayLight;
62 | }
63 | &.active,
64 | &.active:hover {
65 | .buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
66 | color: #fff;
67 | text-shadow: 0 -1px 0 rgba(0,0,0,.25);
68 | }
69 | span {
70 | display: block;
71 | width: 47px;
72 | height: 54px;
73 | line-height: 54px;
74 | float: left;
75 | margin: 2px;
76 | cursor: pointer;
77 | .border-radius(4px);
78 | &:hover {
79 | background: @grayLighter;
80 | }
81 | &.active {
82 | .buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
83 | color: #fff;
84 | text-shadow: 0 -1px 0 rgba(0,0,0,.25);
85 | }
86 | &.old {
87 | color: @grayLight;
88 | }
89 | }
90 | }
91 |
92 | th {
93 | &.switch {
94 | width: 145px;
95 | }
96 | &.next,
97 | &.prev {
98 | font-size: @baseFontSize * 1.5;
99 | }
100 | }
101 |
102 | thead tr:first-child th {
103 | cursor: pointer;
104 | &:hover{
105 | background: @grayLighter;
106 | }
107 | }
108 | /*.dow {
109 | border-top: 1px solid #ddd !important;
110 | }*/
111 | }
112 | .input-append,
113 | .input-prepend {
114 | &.date {
115 | .add-on i {
116 | display: block;
117 | cursor: pointer;
118 | width: 16px;
119 | height: 16px;
120 | }
121 | }
122 | }
--------------------------------------------------------------------------------
/react/component/src/lifecycle/生命周期.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | | {key} | 37 | }) 38 | } 39 |
|---|
| {item[key]} | 49 | }) 50 | } 51 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
89 |
90 |
91 |
--------------------------------------------------------------------------------
/cms/app/components/basic.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {BrowserRouter as Router, Route, Link, Redirect, HashRouter} from 'react-router-dom'
3 | import {createBrowserHistory, createHashHistory} from 'history'
4 | const history = createHashHistory()
5 | //引入组件
6 | import Home from "./home.jsx";
7 | import Topics from "./topics.jsx";
8 | import About from "./about.jsx";
9 | import {ButtonGroup, Button, Grid, Row, Col} from 'react-bootstrap';
10 |
11 | import {increaseAction, multiAction} from '../action.js';
12 |
13 | import {connect} from 'react-redux';
14 |
15 | import {Tab, Tabs} from 'react-bootstrap';
16 |
17 | // React component
18 | class Basic extends React.Component {
19 | constructor(props) {
20 | super(props);
21 | // 设置 initial state
22 | this.state = {
23 | text: props.initialValue || 'Hello Wscats'
24 | };
25 | // ES6 类中函数必须手动绑定
26 | this.handleSubmit = this.handleSubmit.bind(this);
27 | }
28 | handleSubmit(event) {
29 | var page = event.target.id.charAt(event.target.id.length - 1);
30 | switch (page) {
31 | case "1":
32 | history.push('/');
33 | break;
34 | case "2":
35 | history.push('/about');
36 | break;
37 | case "3":
38 | history.push('/topics');
39 | break;
40 | }
41 | }
42 | render() {
43 | const {value, onIncreaseClick} = this.props
44 | return (
45 |
47 |
48 |
53 |
67 |
68 |
69 |
71 | {value}
54 | 55 | {/*-
56 |
- 57 | 首页 58 | 59 |
- 60 | 关于 61 | 62 |
- 63 | 主题列表 64 | 65 |