app.on('ready', () => {
  // 创建窗口、加载页面等操作
  createWindow()
})

app.on('window-all-closed', () => {
  if(process.platform !== 'darwin'){
      app.quit();     // 退出应用
  }
})

win = new BrowserWindow({
  width: 1100,         // 窗口宽度
  height: 800,        // 窗口高度
  minWidth: 900,
  minHeight: 600,
  title: '布丁笔记',
  fullscreen: false,  // 不允许全屏
  resizable: false    // 不允许改变窗口size，不然布局就乱了啊
})

win.loadURL('app://./index.html')

import { shell } from 'electron'

shell.moveItemToTrash(fullPath)   // 将文件删除至电脑回收站
shell.openExternal(`file://${postPath}.html`)    // 在默认浏览器中打开URL

// 在渲染进程引入ipcRenderer
import { ipcRenderer } from 'electron'
ipcRenderer.send('sync-render', '我是来自渲染进程的异步消息')
const msg = ipcRenderer.sendSync('async-render', '我是来自渲染进程的同步消息')

ipcMain.on('sync-render', (event, data) => {
  console.log(data);
})

ipcMain.on('sync-render', (event, data) => {
  console.log(data);
  event.sender.send('main-reply', '主进程收到了渲染进程的【异步】消息！')
})

ipcRenderer.on('main-reply', (event, msg) => {
  console.log(msg);
})

ipcMain.on('async-render', function (event, arg) {
  event.returnValue = '主线程收到了渲染进程的同步消息！'
})

import { remote } from 'electron'

const BrowserWindow = remote.BrowserWindow      // 访问主进程中的BrowserWindow模块

let win = new BrowserWindow()                  // 其他的跟主进程的操作都一样

win.setRepresentedFilename(this.post.localPath)
win.setDocumentEdited(true)
win.setTitle('布丁笔记')

import { app } from 'electron'
app.getPath('userData')

<script src="https://cdn.bootcss.com/moment.js/2.9.0/moment.js"></script>

var moment = require('moment')

moment() // 当前时间

moment('2018-01-21') // 2018-01-21 
moment(Date.now() - 24 * 60 * 60 * 1000) // 昨天
moment(new Date(2018, 01, 22)) // 2018-01-22
moment({year:2015,month:10,day:26,hour:22}) // 传入一个具有日期字段的对象

moment().format('YYYY年MM月DD日 HH:mm:ss') // 2018年01月22日 18:01:41
moment().format('YYYY-MM-DD HH:mm:ss') // 2018-01-22 18:02:35
moment().format('YYYY/MM/DD HH:mm:ss') // 2018/01/22 18:03:29
moment().format('hh:m:ss') // 06:2:32
moment().format('YYYY') // "2018"
moment().format('d') // 今天是星期几
moment().format('X') // 转换当前时间的Unix时间戳

moment().toDate() // Mon Jan 22 2018 18:11:55 GMT+0800 (**标准时间)
moment('2018-01-20').toDate() // Tue Jan 20 2015 00:00:00 GMT+0800 (**标准时间)
moment('2018-01-22 10:20:15').toDate() // Mon Jan 22 2018 10:20:15 GMT+0800 (**标准时间)
moment(1448896064621).toDate() //毫秒转日期

moment().second() // 秒
moment().second(Number) // 设置 秒 0 到 59

moment().date() // 日
moment().day() // 星期几
moment().dayOfYear() // 一年里的第几天
moment().week() // 一年里的第几周
moment().month() // 月-1
moment().quarter() // 一年里的第几个季度
moment().year() // 年
moment().daysInMonth() // 当前月有多少天

moment('20160901', 'YYYYMMDD').fromNow() // 1 years ago

moment().add(7, 'days') // 当前时间加上7天 第2个参数还可以是 'months', 'years' 等
moment().add(7, 'd') // 与上面一行代码的运行结果一样
moment().subtract(1, 'months') // 当前的月份减去1个月

moment().startOf('week') // 本周第一天
moment().startOf('hour') // 等效于moment().minutes(0).seconds(0).milliseconds(0)

moment().endOf('year') // 将时间设置为今年的最后时刻
moment().startOf('month') // 将时间设置为这个月的开始
moment().endOf('week') // 将时间设置为本周的最后时刻

a = moment().add(7, 'days')
b = moment().subtract(1, 'days')
moment.max(a, b)
moment.min(a, b)

a = moment().add(7, 'days')
b = moment().subtract(1, 'days')
a.diff(b) // 86400000
a.diff(b, 'days') // 1 返回相差的天数

moment('2018-01-22').isBefore('2018-01-21') // true
moment('2018-01-22').isBefore('2018-02-23', 'year') // false
moment('2018-01-22').isBefore('2019-01-01', 'year') // true

moment('2018-01-22').isSame('2018-01-22') // true
moment('2018-01-22').isSame('2017-12-31', 'year') // false
moment('2018-01-22').isSame('2018-01-01', 'year') // true

moment('2018-01-22').isAfter('2010-10-21') // true
moment('2018-01-22').isAfter('2018-01-01', 'year') // false
moment('2018-01-22').isAfter('2017-12-31', 'year') // true

moment('2018-01-22').isBetween('2018-01-01', '2018-10-25') // true
moment('2018-01-22').isBetween('2017-01-01', '2018-01-28', 'year') // false
moment('2018-01-22').isBetween('2017-12-31', '2019-01-01', 'year') // true

moment().isLeapYear() // 是否是闰年

document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

document.documentElement.style.fontSize = innerWidth/10 + "px"

function buildOne (fileIn, fileOut) {
  var origCode = fs.readFileSync(fileIn, 'utf8')
  var ast = jsp.parse(origCode)  
  ast = pro.ast_mangle(ast)  
  ast = pro.ast_squeeze(ast)  

  var finalCode = pro.gen_code(ast)

  fs.writeFileSync(fileOut, finalCode, 'utf8')
}

buildOne('src/index.js', 'build/index-min.js')

function buildOne (fileIn, fileOut) {
  var origCode = fs.readFileSync(fileIn, 'utf8')
  var ast = jsp.parse(origCode)  
  ast = pro.ast_mangle(ast)  
  ast = pro.ast_squeeze(ast)  

  var finalCode = pro.gen_code(ast)

  fs.writeFileSync(fileOut, finalCode, 'utf8')
}

buildOne('src/index.js', 'build/index-min.js')

function buildAll (fileIn, fileOut) {
    if (fileIn.length > 0) {
        var finalCode = []
        var origCode = ''
        var ast = ''
        
        for (var i = 0, len = fileIn.length; i < len; i++) {
            origCode = fs.readFileSync(fileIn[i], 'utf8')
            ast = jsp.parse(origCode)
            ast = pro.ast_mangle(ast)
            ast = pro.ast_squeeze(ast)

            finalCode.push(pro.gen_code(ast), ';')
        }
    }
    fs.writeFileSync(fileOut, finalCode, 'utf8')
}

buildAll(['index.js', 'compile.js'], 'build.min.js')

constructor(props) {
  super(props)
  this.state = {
    show: true
  }
  this.handleToggle = this.handleToggle.bind(this)
}

render() {
  return (
    <Fragment>
      <div className={this.state.show ? 'show' : 'hide'}>hello</div>
      <button onClick={this.handleToggle}>toggle</button>
    </Fragment>
  );
}

handleToggle() {
  this.setState({
    show: this.state.show ? false : true
  })
}

<Transition
  in={this.state.show}
  timeout={1000}
  // unmountOnExit
>
  {state=>{
    if(state === 'entering' || state === 'entered')
      return <div className="on">{state}</div>
    else 
      return <div className="off">{state}</div>
  }}
</Transition>
<button onClick={this.handleAddItem}>toggle {`${this.state.show}`}</button>

render() {
  return (
    <Fragment>
      <CSSTransition
        in={this.state.show}
        timeout={1000}
        // 前缀名注意S
        classNames='fade'
      >
        <div>hello</div>
      </CSSTransition>
      <button onClick={this.handleToggle}>toggle</button>  
    </Fragment>
  )
}

handleToggle() {
  this.setState({
    show: this.state.show ? false : true
  })
}

<CSSTransition
  in={this.state.show}
  timeout={1000}
  classNames='fade'
  unmountOnExit
  onEntered={(el) => {el.style.color='blue'}}
>
  <div>hello</div>
</CSSTransition>

constructor(props) {
  super(props)
  this.state = {
    data: []
  }
  this.handleAddItem = this.handleAddItem.bind(this)
}

render() {
  return (
    <Fragment>
      <TransitionGroup>
      {
        this.state.data.map((item, index) => {
          return (
            <CSSTransition
              timeout={1000}
              classNames='fade'
              unmountOnExit
              onEntered={(el) => {el.style.color='blue'}}
              appear={true}
              key={index}
            >
              <div>{item}</div>
            </CSSTransition>
          )
        })
      }
      </TransitionGroup>
        <button onClick={this.handleAddItem}>toggle</button>
    </Fragment>
  )
}

handleAddItem() {
  this.setState((prevState) => {
    return {
      data: [...prevState.data, 'item']
    }
  })
}

class Radio extends PureComponent {
  state= {
    currentIndex: null,
    value: null
  }

  setCurrentIndex = (e) => {
    this.setState({
      currentIndex: parseInt(e.currentTarget.getAttribute('index'), 10)
    })
  }

  handleChange = (e) => {
    this.setState({
      value: e.target.value
    })
  }

  render () {
    const arr = ['京东超市', '天猫超市', '京东生鲜', '京东到家', '果蔬好', '盒马生鲜', '无人超市', '每日生鲜']
    const itemList = arr.map((item, index) => {
      return (
        <li 
          key={index} 
          className={`${styles.item} ${this.state.currentIndex === index ? styles.active : ''}`} 
          index={index} 
          onClick={this.setCurrentIndex}
        >
          {item}
        </li>
      )
    })
    return (
      <Card title="单选列表" bordered={false} className={styles.main}>
        <div className={styles.content}>
          <div className={styles.top}>
            <div className={styles.name}>点击或悬浮选中的li高亮：</div>
            <ul className={styles.list}>{itemList}</ul>
          </div>
          <div className={styles.bottom}>
            <div className={styles.name}>您的性别为：</div>
            <div className={styles.list}>
              <label className={styles.item}><input type="radio" name='gender' value="男生" onChange={this.handleChange}/>男生</label>
              <label className={styles.item}><input type="radio" name='gender' value="女生" onChange={this.handleChange}/>女生</label>
            </div>
            <div className={styles.sex}>性别: {this.state.value}</div>
          </div>
        </div>     
      </Card>
    )
  }
}

class Checkbox extends PureComponent {
  state = {
    fruit: [],
    value: []
  }

  handleChange  = (e) => {
      let item = e.target.value
      let items = this.state.fruit.slice()
      let index = items.indexOf(item)
      index === -1 ? items.push(item) : items.splice(index, 1)
      this.setState({fruit: items})
  }

  onclickIcon = (e) => {
    let item = parseInt(e.currentTarget.getAttribute('index'), 10)
    let items = this.state.value.slice()

    let index = items.indexOf(item)
    index === -1 ? items.push(item) : items.splice(index,1)
    this.setState({
      value: items
    })
  }

  render() {
    const listArr = ['羽绒服', '裙子', '帽子', '围巾']
    return (
      <Card title="多选列表" bordered={false} className={styles.main}>
        <div className={styles.content}>
          <div className={styles.left}>
            <div className={styles.title}>Choose fruit : </div>
            <div className={styles.list}>
              <label className={styles.item}><input type="checkbox" name="fruit" value="apple"
                            onChange={this.handleChange}/>apple</label>
              <label className={styles.item}><input type="checkbox" name="fruit" value="banana"
                            onChange={this.handleChange}/>banana</label>
              <label className={styles.item}><input type="checkbox" name="fruit" value="pear"
                            onChange={this.handleChange}/>pear</label>
            </div>
            <div>Choosen : {this.state.fruit.join('-')}</div>
          </div> 
          <div className={styles.right}>    
            <div className={styles.tag}>点亮我的喜欢：</div>
            <ul className={styles.card}>
            {
              listArr.map((item,index) => {
                return (
                  <li 
                    key={index} 
                    className={styles.item} 
                    index={index} 
                    onClick={this.onclickIcon}
                  >
                    <svg 
                      className={`${styles.svg} ${this.state.value.indexOf(index) === -1? styles.icon : styles.iconColor}`} aria-hidden="true">
                      <use xlinkHref={this.state.value.indexOf(index) === -1? "#icon-lovetaoxin" : "#icon-shixintaoxin"}></use>
                    </svg>
                    <span to='#' target="_blank" className={styles.text}>{item}</span>
                  </li>
                )
              })
            }
            </ul> 
          </div> 
        </div>           
      </Card>
    )
  }
}

class NewDropdown extends PureComponent {
  state = {
    value: 'basketball'
  }

  handleChange = (e) => {
    this.setState({
      value: e.target.value
    })
  }

  handleMenuClick = ({ key }) => {
    if (key === 'radio') {
      router.push('/selector/radio');
      return;
    }
    if (key === 'checkbox') {
      router.push('/selector/checkbox');
      return;
    }
    if (key === 'dropdown') {
      return;
    }
  };

  render () {
    const menu = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.handleMenuClick}>
        <Menu.Item key="radio">
          <Icon type="user" />
          <FormattedMessage id="menu.selector.radio" defaultMessage="radio" />
        </Menu.Item>
        <Menu.Item key="checkbox">
          <Icon type="setting" />
          <FormattedMessage id="menu.selector.checkbox" defaultMessage="checkbox" />
        </Menu.Item>
        <Menu.Item key="dropdown">
          <Icon type="close-circle" />
          <FormattedMessage id="menu.selector.dropdown" defaultMessage="dropdown" />
        </Menu.Item>
      </Menu>
    );
    return (
      <Card title="下拉列表" bordered={false} className={styles.main}>
        <div className={styles.content}>
          <div className={styles.left}>
            <label className={styles.select}>choose favorite sports：
              <select value={this.state.value} onChange={this.handleChange}>
                  <option value="running">running</option>
                  <option value="basketball">basketball</option>
                  <option value="skiing">skiing</option>
              </select>
            </label>
            <div className={styles.chosen}>chosen: {this.state.value}</div>
          </div>
          <div className={styles.right}>
            <Dropdown overlay={menu}>
              <span className={styles.action}>
                <span className={styles.name}>查看示例</span>
              </span>
            </Dropdown>
          </div>
        </div>
      </Card>
    )
  }
}

export function MP(ak) {
  return new Promise(function (resolve, reject) {
    window.onload = function () {
      resolve(BMap)
    }
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "//api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
    script.onerror = reject;
    document.head.appendChild(script);
  })
}

<script>
import {MP} from './map.js'  
export default {
    data() {
        return {
            ak: '秘钥',
            ....
        }
    }
    mounted(){  
          MP(this.ak).then(BMap => {  
              //在此调用api  
          })
     } 
     ......
}
</script>

const routerConfig = {
    '/': {
      component: dynamicWrapper(app, [], () => import('../layouts/BasicLayout')),
    },
    '/dashboard/monitor': {
      component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgMonitor')),
    },
    '/dashboard/workplace': {
      component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgWorkSpace')),
    },
    '/testpage': {
      component: dynamicWrapper(app, ['monitor'], () => import('../routes/Test/Test')),
    },
}

const menuData = [{
  name: 'dashboard',
  icon: 'dashboard',  // https://demo.com/icon.png or <icon type="dashboard">
  path: 'dashboard',
  children: [{
    name: '分析页',
    path: 'analysis',
  }, {
    name: '监控页',
    path: 'monitor',
  }, {
    name: '工作台',
    path: 'workplace',
  }, {
    name: '测试页',
    path: 'testpage',
  }],
}, {
  // 更多配置
}];

import React, { PureComponent } from 'react';
export default class Testpage extends PureComponent {
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}

import React from 'react';
import styles from './index.less';    // 按照 CSS Modules 的方式引入样式文件。
export default ({ src, desc, style }) => (
  <div style="{style}" classname="{styles.imageWrapper}">
    <img classname="{styles.img}" src="{src}" alt="{desc}">
    {desc &amp;&amp; <div classname="{styles.desc}">{desc}</div>}
  </div>
);

import React from 'react';
import ImageWrapper from '../../components/ImageWrapper';  // 注意保证引用路径的正确
export default () => (
  <imagewrapper src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" desc="示意图">;
)

componentDidMount() {
  const { dispatch } = this.props;
  dispatch({
    type: 'project/fetchtagA',
  });
  dispatch({
    type: 'activities/fetchtagB',
  });
}

export default {
  namespace: 'pagetest',
  state: {
    ServicesA: [],
    ServicesB: [],
  },
  effects: {
    *fetchtagA(_, { call, put }) {
      const response = yield call(getServiceAList);
      yield put({
        type: 'ServiceAList',
        tagAServices: response.result,
      });
    },
    *fetchtagB(_, { call, put }) {
      const response = yield call(getServiceBList);
      yield put({
        type: 'ServiceBList',
        tagBServices: response.result,
      });
    },
  },
  reducers: {
    ServiceAList(state, action) {
      return {
        ...state,
        ServicesA: action.tagAServices,
      };
    },
    ServiceBList(state, action) {
      return {
        ...state,
        ServicesB: action.tagBServices,
      };
    },
  },
};

export async function getServiceAList() {
  return request('/api/get_service_list', {
    method: 'POST',
    body: {"type": "waiting"},
  });
}
export async function getServiceBList() {
  return request('/api/get_service_list', {
    method: 'POST',
    body: {"type": "current"},
  });
}

const { pagetest, loading } = this.props;
// pagetest指的是相当于数据流
const { ServicesA, ServicesB } = pagetest;
// 从数据流中取出了具体的变量

import { createStore } from 'redux' // 引入一个第三方的方法

const store = createStore() // 创建数据的公共存储区域（管理员）

export default store

const defaultState = {}

export default (state = defaultState, action) => {
  return state
}

import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

const defaultState = {
  inputValue: '123',
  list: [1, 2]
}

import store from './store'

class TodoList extends Component {
  
  constructor(props) {
    super(props)
    console.log(store.getState())
  }

  render () {
    ...
  }
}

render () {
  return (
    <div style={{marginTop: '10px', marginLeft: '10px'}}>
      <div>
        <Input value={this.state.inputValue} placeholder='todo info' style={{width: '300px', marginRight: '10px'}}></Input>
        <Button type="primary">提交</Button>
      </div>
      <List
        style={{marginTop: '10px', width: '300px'}}
        bordered
        dataSource={this.state.list}
        renderItem={item => (<List.Item>{item}</List.Item>)}
      />
    </div>
  )
}

constructor(props) {
  super(props)
  this.state = store.getState()
  this.handleInputChange = this.handleInputChange.bind(this)
}

... ...

handleInputChange(e) {
  const action = {
    type: 'change_input_value',
    value: e.target.value
  }
  store.dispatch(action)
}

export default (state = defaultState, action) => {
  console.log(state, action)
  return state
}

export default (state = defaultState, action) => {
  if (action.type === 'change_input_value') {
    const newState = JSON.parse(JSON.stringify(state)) // 对之前的state做一次深拷贝
    newState.inputValue = action.value
    return newState
  }
  return state
}

constructor(props) {
  super(props)
  this.state = store.getState()
  this.handleInputChange = this.handleInputChange.bind(this)
  this.handleStoreChange = this.handleStoreChange.bind(this)
  store.subscribe(this.handleStoreChange) 
}

handleStoreChange() {
  this.setState(store.getState())
}

<Button type="primary" onClick={this.handleBtnClick}>提交</Button>

handleBtnClick() {
  const action = {
    type: 'add_todo_item',
  }
  store.dispatch(action)
}

export default (state = defaultState, action) => {
  if (action.type === 'change_input_value') {
    const newState = JSON.parse(JSON.stringify(state))
    newState.inputValue = action.value
    return newState
  }
  if (action.type === 'add_todo_item') {
    const newState = JSON.parse(JSON.stringify(state))
    newState.list.push(newState.inputValue)
    newState.inputValue = ''
    return newState
  }
  return state
}

 <List
  style={{marginTop: '10px', width: '300px'}}
  bordered
  dataSource={this.state.list}
  renderItem={(item, index) => (<List.Item onClick={this.handleItemDelete.bind(this, index)}>{item}</List.Item>)}
/>

handleItemDelete(index) {
  const action = {
    type: 'delete_todo_item',
    index
  }
  store.dispatch(action)
}

if (action.type === 'delete_todo_item') {
  const newState = JSON.parse(JSON.stringify(state))
  newState.list.splice(action.index, 1) // 找到对应的下标，删除即可
  return newState
}

export const CHANGE_INPUT_VALUE = 'change_input_value'
export const ADD_TODO_ITEM = 'add_todo_item'
export const DELETE_TODO_ITEM = 'delete_todo_item'

import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './actionTypes'

export const getInputChangeAction = (value) => ({
  type: CHANGE_INPUT_VALUE,
  value
})

handleInputChange(e) {
  const action = getInputChangeAction(e.target.value)
  store.dispatch(action)
}

class TodoListUI extends Component {
  render() {
    return (
      <div style={{marginTop: '10px', marginLeft: '10px'}}>
        // ... ...
      </div>
    )
  }
}

const TodoListUI = (props) => {
  return (
    <div style={{marginTop: '10px', marginLeft: '10px'}}>
      // ... ...
    </div>
  )
}

export const initListAction = (data) => ({
  type: INIT_LIST_ACTION,
  data
})

export const INIT_LIST_ACTION = 'init_list_action'

componentDidMount() {
  axios.get('/list.json').then((res) => {
    const data = res.data
    const action = initListAction(data)
    store.dispatch(action)
  })
}

if (action.type === INIT_LIST_ACTION) {
  const newState = JSON.parse(JSON.stringify(state))
  newState.list = action.data
  return newState
}

import { createStore, applyMiddleware } from 'redux'
import reducer from './reducer'
import thunk from 'redux-thunk'

const store = createStore(
  reducer,
  applyMiddleware(thunk) // applyMiddleware可以使用中间件模块
) 

export default store

export const getTodoList = () => {
  return (dispatch) => {
    axios.get('/list.json').then((res) => {
      const data = res.data
      const action = initListAction(data)
      dispatch(action)
    })
  }
}

componentDidMount() {
  const action = getTodoList()
  store.dispatch(action) // 调用 store.dispatch()这个函数时，action这个函数就会被执行
}

import { createStore, applyMiddleware } from 'redux'
import reducer from './reducer'
import createSagaMiddleware from 'redux-saga'

const sagaMiddleware = createSagaMiddleware() // 创建saga中间件

// 创建数据的公共存储区域
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
) 

export default store

function* mySaga() {
  
}

export default mySaga

import { takeEvery } from 'redux-saga/effects'
import { GET_INIT_LIST } from './actionTypes'
import { initListAction } from './actionCreator'
import axios from 'axios'

function* getInitList() {
  axios.get('/list.json').then((res) => {
    const data = res.data
    const action = initListAction(data)
    console.log(action)
  })
}

// generator 函数
function* mySaga() {
  yield takeEvery(GET_INIT_LIST, getInitList) // takeEvery捕捉每一个派发出来的action type类型为GET_INIT_LIST的时候，就会执行getInitList方法
}

export default mySaga

import { takeEvery, put  } from 'redux-saga/effects'
import { GET_INIT_LIST } from './actionTypes'
import { initListAction } from './actionCreator'
import axios from 'axios'

function* getInitList() {
  const res = yield axios.get('/list.json')
  const action = initListAction(res.data)
  yield put(action)
}

function* mySaga() {
  yield takeEvery(GET_INIT_LIST, getInitList)
}

export default mySaga

function* getInitList() {
  try {
    const res = yield axios.get('/list.json')
    const action = initListAction(res.data)
    yield put(action)
  } catch(e) {
    console.log('list.json 网络请求失败')
  }
}

import React from 'react'
import ReactDOM from 'react-dom'
import TodoList from './TodoList'
import { Provider } from 'react-redux'
import store from './store'

const App = (
  <Provider store={store}>
    <TodoList />
  </Provider>
)

ReactDOM.render(App, document.getElementById('root'))

import React, { Component } from 'react'
import { connect } from 'react-redux'

class TodoList extends Component {
  render () {
    return (
      <div>
        <div>
          <input value={this.props.inputValue} />
          <button>提交</button>
        </div>
        <ul>
          <li>Dell</li>
        </ul>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,

  }
}

export default connect(mapStateToProps, null)(TodoList)

import React, { Component } from 'react'
import { connect } from 'react-redux'

class TodoList extends Component {
  render () {
    return (
      <div>
        <div>
          <input value={this.props.inputValue} onChange={this.props.handleInputChange} />
          <button>提交</button>
        </div>
        <ul>
          <li>Dell</li>
        </ul>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    handleInputChange(e) {
      const action = {
        type: 'change_input_value',
        value: e.target.value
      }
      dispatch(action)
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)

<button onClick={this.props.handleClick}>提交</button>

const mapDispatchToProps = (dispatch) => {
  return {
    handleInputChange(e) {
      const action = {
        type: 'change_input_value',
        value: e.target.value
      }
      dispatch(action)
    },

    handleClick() {
      const action = {
        type: 'add_todo_item'
      }
      dispatch(action)
    }
  }
} 

export default (state = defaultState, action) => {
  if (action.type === 'change_input_value') {
    const newState = JSON.parse(JSON.stringify(state))
    newState.inputValue = action.value
    return newState
  }
  if (action.type === 'add_todo_item') {
    const newState = JSON.parse(JSON.stringify(state))
    newState.list.push(newState.inputValue)
    newState.inputValue = ''
    return newState
  }
  return state
}

class BasicPlugin{
  // 在构造函数中获取用户给该插件传入的配置
  constructor(options){
  }
  
  // Webpack 会调用 BasicPlugin 实例的 apply 方法给插件实例传入 compiler 对象
  apply(compiler){
    compiler.hooks.run.tap(pluginName, compilation => {
      // console.log("webpack 构建过程开始！")
    })
  }
}

// 导出 Plugin
module.exports = BasicPlugin

const BasicPlugin = require('BasicPlugin.js')
module.export = {
  plugins:[
    new BasicPlugin(options),
  ]
}

/**
* 广播出事件
* event-name 为事件名称，注意不要和现有的事件重名
* params 为附带的参数
*/
compiler.apply('event-name',params)

/**
* 监听名称为 event-name 的事件，当 event-name 事件发生时，函数就会被执行。
* 同时函数中的 params 参数为广播事件时附带的参数。
*/
compiler.hooks.event-name.tap('plugin-name',function(params) {
  
})

class LogWebpackPlugin {

  constructor(doneCallback, emitCallback) {
    // 存下在构造函数中传入的回调函数
    this.emitCallback = emitCallback
    this.doneCallback = doneCallback
  }

  apply(compiler) {
    compiler.hooks.emit.tap('LogWebpackPlugin', () => {
      // 在 emit 事件中回调 emitCallback
      this.emitCallback()
    })
    compiler.hooks.done.tap('LogWebpackPlugin', () => {
      // 在 done 事件中回调 doneCallback
      this.doneCallback()
    })
    compiler.hooks.compilation.tap('LogWebpackPlugin', () => {
      // compilation（'编译器'对'编译ing'这个事件的监听）
      console.log("The compiler is starting a new compilation...")
    })
    compiler.hooks.compile.tap('LogWebpackPlugin', () => {
      // compile（'编译器'对'开始编译'这个事件的监听）
      console.log("The compiler is starting to compile...")
    })
  }
}

// 导出插件 
module.exports = LogWebpackPlugin

const logWebpackPlugin = require('log-webpack-plugin') 

module.exports = {
  plugins: [
    // 在初始化 logWebpackPlugin 时传入了两个参数，分别是在成功时的回调函数和模块完成转换的回调函数；
    new logWebpackPlugin(() => {
      // Webpack 模块完成转换成功
      console.log('emit 事件发生啦，所有模块的转换和代码块对应的文件已经生成好~')
    } , () => {
      // Webpack 构建成功，并且文件输出了后会执行到这里，在这里可以做发布文件操作
      console.log('done 事件发生啦，成功构建完成~')
    })
  ]
}

{
      path:"/user",
      name:"user",
      component:user
    }

this.$router.push({path:'/user',query:{userName:'ls',userId:'02'}});

{
      path:"/user",
      name:"user",
      component:user
    }

this.$router.push({path:'/user',query:{userName:'ls',userId:'02'}});

console.log(this.$route.params.userName )

this.$router.push({name:'user',query:{userName:'ls',userId:'02'}});

{
      path:"/user/:userName/:userId",
      name:"user",
      component:user
    }

sessionStorage.setItem('userName','ls'); 

sessionStorage.getItem('userName')

let userInf = {
    userName: 'ls',
    userId: 02
}

// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userInf))

// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user')

userInf = JSON.parse(userJsonStr);
console.log(userEntity.userName); // => ls

handleChangeBtnColor() {
  this.setState({
    tag: !this.state.tag
  })
}

render() {
  return (
    <div>
      <button
        className={this.state.tag? 'red_btn' : 'green_btn'}
        type="button"
        onClick={this.handleChangeBtnColor}
      >
        change
      </button>
    </div>
  )
}

constructor(props) {
  super(props)
}