React Skills

配置 ES6 环境

生成 package.json 文件

npm init -y
通过 npm --save 或者 npm --save-dev 安装依赖包，其版本号，会包含在文件中
- –save: 适用于生产和开发
- –save-dev: 适用于开发环境

脚本命令

npm run command

全局安装 babel-cli

npm install -g babel-cli

安装转换环境

1	npm install --save-dev babel-preset-es2015 babel-cli

新建配置文件

新建.babelrc

{
  "presets": [
    ["env", {
      "modules": false
    }]
  ]
}

自动构建

npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save-dev html-webpack-plugin
npm install --save-dev babel-loader babel-core
npm install --save-dev babel-preset-env
npm i --save-dev style-loader css-loader
npm install --save-dev sass-loader node-sass

新建 `webpack.config.js`

let HtmlWebpackPlugin = require('html-webpack-plugin'),
let path = require('path');

module.exports = {
  entry: {
    app: path.resolve(__dirname, 'src', 'index.js')
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: path.resolve(__dirname, 'src')
      },
      {
        test: /\.css$/,
        loader: ['style-loader', 'css-loader'],
        include: path.resolve(__dirname, 'src')
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html')
    })
  ]
};

`package.json`

"scripts": {
  // "start": "webpack-dev-server --port 3000"
  "start": "webpack-dev-server --hot --inline --port 3003"
},

前端 chrome 插件

React facebook 出品 (没什么大用处)
JSON viewer
Redux Devtool
UI Stack (查看网站用了哪些框架)
React Sight (太慢，太耗资源)

Visual Studio Code 插件

Vim
ESLint
React/React-Redux/React-Router
ES6 snippets
Terminal
auto file name
auto close tag
auto rename tag
npm intell
quokka
css peek
regex previewer

字体

Fira Code

setting

font size to larger
auto save

解决 npm install 慢问题

1 2	npm install -gd express --registry=http://registry.npm.taobao.org npm config set registry http://registry.npm.taobao.org

修改 .npmrc

registry=https://registry.npm.taobao.org
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

React

新建 react 项目 (creact-react-app)

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

React 组件数据

prop：对外接口
- Component 构造函数
- 通过 this.props 访问到父组件传递过来的 props 值
- propTypes：接口规范
state：内部状态
- defaultProps：属性默认值

React-Redux

安装 react-redux

npm install --save redux
npm install --save react-redux
npm install --save-dev redux-devtools
npm install --save redux-thunk
npm install --save react-router

实现

状态设计：Store
action 构造函数
- actionTypes
- export action
组合 Reducer
view
- mapStateToProps：Store => props
  - dispatch：this.props.dispatch
- mapDispatchToProps
  - 定义方法
- 对于动态数量的子组件，每个子组件必需带上一个 key 属性

Redux-sage

安装

1	npm install --save redux-saga

dva

安装 dva-cli

npm install dva-cli -g

创建新应用

1
2
3

dva new dir
cd dir
npm start

Material UI

SVG ICON

安装 material UI

1 2	npm install material-ui npm i --save react-tap-event-plugin

注意事项

// 导入使点击事件有效
import injectTapEventPlugin from 'react-tap-event-plugin';
// 组件外面需要包装一层 MuiThemeProvider
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'

Ant Design

Install

1 2	npm install antd --save npm install babel-plugin-import --save-dev

按需加载

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd", "style": true }]
  ]
}

国际化

import enUS from 'antd/lib/locale-provider/en_US';

return (
  <LocaleProvider locale={enUS}>
    <App />
  </LocaleProvider>
);

Ant Design 3.0 默认支持英文

fetch

1
2
3

npm install --save isomorphic-fetch es6-promise

import fetch from 'isomorphic-fetch'

React-Router 4

JS librays

lodash
ImmutableJS
moment
react-ace
styled-components

前后端分离

JSON 传递数据： jackson

Icon

iconfont

git 冷门但有用命令

删除分支

git branch -d branch_name

删除远端分支

git push origin --delete branch_name

撤销修改和 commit

1 2	git reset file git reset --hard HEAD~1

Npm

npm 查看全局安装过的包命令

npm list -g --depth 0

卸载全局包命令

npm uninstall -g

更新全局依赖

npm update -g package_name