React on Time Friend

让Visual-Studio-Code按照ESLint规则格式化你的代码

Sun, 05 Nov 2017 19:33:33 +0000

项目加入ESLint之后,大家的代码是工整了许多. 但是因为刚刚不熟悉ESLint的规则,很多时候都在数进退多少空格,双引号还是单引号的删改切换.

严重影响了开发效率与心情!!!! 严重影响了开发效率与心情!!!! 严重影响了开发效率与心情!!!!

重要的事情说三遍!!!

下面介绍一种利用Visual-Studio-Code ESLint插件,配置之后,可以自动格式化成ESLint规定的格式

在Visual-Studio-Code 安装 ESLint插件
widnows 点击文件>首选项>设置 / mac 点击Code>首选项
搜索 eslint.autoFixOnSave, 找到之后修改为 true

重启你的Visual-Studio-Code,当你打开代码文件的后,直接保存文件. 代码会自动格式化成ESLint规定的格式.大大的提高了开发效率,并且统一了代码规范

下面分享一下我们项目里的一些ESLint规则

{
 rules: { // 具体规则
 'accessor-pairs': 2, // getter/setter成对出现
 'arrow-spacing': [1, { 'before': true, 'after': true }], // 箭头函数前后有空格
 'array-bracket-spacing': [1, 'never'], // 数组内前后无空格
 'block-spacing': [1, 'always'], // 单行{}前后有空格
 'brace-style': [2, '1tbs', { 'allowSingleLine': true }], // {}换行，单行不用
 'camelcase': [2, { 'properties': 'never' }], // 属性名可以不是驼峰
 'comma-dangle': [1, 'only-multiline'], // 数组/对象最后一个必须有,
 'comma-spacing': [1, { 'before': false, 'after': true }], // ,前有空格, 后无空格
 'comma-style': [2, 'last'], // ,在最后，不能换行
 'constructor-super': 1, // super()在必须构造函数内
 'curly': [2, 'multi-line'], // if/while等函数可以多行不带{}
 'dot-location': [2, 'property'], // .的位置可以在换行
 'eol-last': 1, // 文件末尾需要空白行
 'eqeqeq': [2, 'allow-null'], // 必须===, null除外
 'generator-star-spacing': [2, { 'before': true, 'after': true }], // generator函数前后有空格
 'handle-callback-err': [2, '^(err|error)$' ], // 有err/error必须处理异常
 'indent': [2, 2, { 'SwitchCase': 1 }], // 缩进2格，switch中1格
 'jsx-quotes': [2, 'prefer-single'], // jsx属性用单引号
 'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], // 对象属性前有空格, 后无空格
 'keyword-spacing': [2, { 'before': true, 'after': true }], // 关键词前后有空格, 如if-else
 'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }], // new后必须大写开头构造函数, 大写开头不一定要new
 'new-parens': 2, // new的构造函数必须带参数
 'object-curly-spacing': [2, 'always', { objectsInObjects: false }], // 对象{}前后有空格, 对象内的对象例外
 'no-array-constructor': 2, // Array(10)->yes, Array(1, 2)->no
 'no-caller': 2, // 禁止caller/callee
 'no-class-assign': 2, // 禁止赋值class
 'no-cond-assign': 2, // 条件不能有赋值
 'no-const-assign': 2, // 禁止赋值常量(const)
 'no-control-regex': 2, // reg中不能有控制符号
 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 1, // node环境prod禁用
 'no-delete-var': 2, // 不能delete变量，可以用在对象
 'no-dupe-args': 2, // 参数不能重复
 'no-dupe-class-members': 2, // class中方法不能有重复
 'no-dupe-keys': 2, // 对象key不能重复
 'no-duplicate-case': 2, // switch不能有重复case
 'no-empty-character-class': 2, // reg中不能有空字符串
 'no-empty-pattern': 2, // 解构不能有空解构模式
 'no-eval': 2, // 不能用eval
 'no-ex-assign': 2, // 不能复制catch中的error
 'no-extend-native': 2, // 不能扩展Object原型
 'no-extra-bind': 2, // bind的函数体中要有明确的this
 'no-extra-boolean-cast': 2, // 禁止多余的Boolean转换
 'no-extra-parens': [2, 'functions'], // 函数中禁止多余的括号
 'no-fallthrough': 2, // switch需要break
 'no-floating-decimal': 2, // float中0不能省略
 'no-func-assign': 2, // 禁止赋值函数
 'no-implied-eval': 2, // 禁止隐性eval
 'no-inner-declarations': [2, 'functions'], // 禁止在条件中声明function
 'no-invalid-regexp': 2, // 禁止无用的reg
 'no-irregular-whitespace': 2, // 禁止不规则空格
 'no-iterator': 2, // 禁止使用__iterator__属性
 'no-label-var': 2, // 禁止label var
 'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }], // 禁止label表达式
 'no-lone-blocks': 2, // 禁止无用的{}
 'no-mixed-spaces-and-tabs': 2, // space和tab不混用
 'no-multi-spaces': 2, // 禁止多空格
 'no-multi-str': 2, // 禁止多行的string
 'no-multiple-empty-lines': [2, { 'max': 1 }], // 禁止多空行，最大1行
 'no-native-reassign': 2, // 禁止赋值原生对象(window/Object...)
 'no-negated-in-lhs': 2, // !(key in object)->yes, !key in object->no
 'no-new-object': 2, // new Object()->no
 'no-new-require': 2, // new require(xxx)->no
 'no-new-symbol': 2, // new Symbol(xxx)->no
 'no-new-wrappers': 2, // String/Number等不能用new
 'no-obj-calls': 2, // 禁止calling全局对象属性，如Math/JSON
 'no-octal': 2, // 禁止八进制文字
 'no-octal-escape': 2, // 禁止八进制转义
 'no-path-concat': 2, // __dirname和__filename禁止string拼接
 'no-proto': 2, // 禁止使用__proto__
 'no-redeclare': 2, // 禁止重新复制var
 'no-regex-spaces': 2, // 禁止reg出现多个空格
 'no-return-assign': [2, 'except-parens'], // 禁止return中赋值
 'no-self-assign': 2, // 禁止自身赋值
 'no-self-compare': 2, // 禁止自身比较, 如果NaN->Number.isNaN
 'no-sequences': 2, // 禁止,操作符
 'no-shadow-restricted-names': 2, // 禁止跟踪严格模式下部分关键词
 'no-spaced-func': 2, // function的()不要空格
 'no-sparse-arrays': 2, // array不能用空元素
 'no-this-before-super': 2, // super()前不能用this
 'no-throw-literal': 2, // 禁止直接throw内容，必须是Error()
 'no-trailing-spaces': 1, // 禁止多余的空格
 'no-undef': 2, // 禁止使用未赋值变量
 'no-undef-init': 2, // 变量不能初始化为undefined
 'no-unexpected-multiline': 2, // 禁止有疑义的多行表达式
 'no-unmodified-loop-condition': 2, // 循环中的变量要在循环中修改
 'no-unneeded-ternary': [2, { 'defaultAssignment': false }], // 禁止不必要的三元操作符
 'no-unreachable': 2, // return/throw等之后不应有表达式
 'no-unsafe-finally': 2, // 禁止不安全的finally
 'no-unused-vars': [1, { 'vars': 'all', 'args': 'none' }], // 禁止不使用的变量，参数可以
 'no-useless-call': 2, // 禁止无用的call
 'no-useless-computed-key': 2, // 禁止无用的计算属性
 'no-useless-constructor': 2, // 禁止无用的constructor
 'no-whitespace-before-property': 2, // 属性前不能有空格
 'no-with': 2, // 禁用with
 'one-var': [2, { 'initialized': 'never' }], // 只能一个var, 初始化不检查
 'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }], // 操作符换行, 默认在行末, ?和:在下一行前
 'padded-blocks': [2, 'never'], // 作用域中没有padded的空行
 'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }], // 使用单引号, 转义或者模版可以例外
 'semi': [2, 'never'], // 禁用结尾;
 'semi-spacing': [2, { 'before': false, 'after': true }], // ;前有空格, 后无空格
 'space-before-blocks': [2, 'always'], // 作用域前有空格
 'space-in-parens': [2, 'never'], // 括号内无空格
 'space-infix-ops': 2, // 插入的操作符需要空格, 如+/-
 'space-unary-ops': [2, { 'words': true, 'nonwords': false }], // 操作符单词类要空格(new/delete), 非单词不要空格(++/--/!)
 'spaced-comment': [2, 'always', { 'markers': ['!', ',', '/', '-'] }], // 注释要空格，markers为例外
 'template-curly-spacing': [2, 'never'], // 模版字符串中变量无空格
 'use-isnan': 2, // 使用isNaN
 'valid-typeof': 2, // typeof的字符串必须正确
 'wrap-iife': [2, 'any'], // 立即调用的function必须有括号
 'yield-star-spacing': [2, 'both'], // yield的*前后有空格
 'yoda': [2, 'never'], // 条件中变量在前
 'prefer-const': 0, // 能用const场景用const
 'no-useless-escape': 0, // 不检查escape
 'space-before-function-paren': 0, // 函数括号无空格
 "react/jsx-uses-react": "error",
 "react/jsx-uses-vars": "error",
 }
}

Redux先放一边,开启MobX的新玩法

Sat, 04 Nov 2017 19:33:33 +0000

Mobx

Mobx是一个简单的,高扩展的状态管理工具.Mobx与Redux一样是为了解决react管理状态的一种工具. 但是在写代码体验上,会好过Redux.

安装

npm install mobx --save

//配合React: 
npm install mobx-react --save

一个简单的计数器

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { observer } from 'mobx-react'
import { observable, computed, action } from 'MobX'

class Store {
 @observable
 count = 0;

 @action
 add() {
 this.count ++
 }
 minus() {
 this.count --
 }
}

let countStore = new Store()

@observer
class CountComponent extends Component {
 render() {
 return (
 <div>
 <h2>{ countStore.count }</h2>
 <button key="add" onClick={countStore.add}>+</button>
 <button key="minus" onClick={countStore.minus}>-</button>
 </div>
 )
 }
}

ReactDOM.render(
 <CountComponent/>,
 document.getElementById('root')
)

在你的React项目中使用Decorator 装饰器

Wed, 01 Nov 2017 19:33:33 +0000

使用装饰器

目前只支持Babel/Typescript两种预编译器

Babel:

npm install babel-plugin-transform-decorators-legacy --save-dev

在你的 .babelrc配置文件中开启,没有 .babelrc文件的话,可以新建一个.

{
 "presets": [
 "es2015",
 "stage-1"
 ],
 "plugins": ["transform-decorators-legacy"]
}

插件的顺序千万要注意,非常重要：transform-decorators-legacy 应该放在插件的第一个。

当使用react native的时候，下面这个预设可以代替 transform-decorators-legacy

{
 "presets": ["stage-2", "react-native-stage-0/decorator-support"]
}

在create-react-app中使用装饰器

npm run eject

安装相关插件:

//针对react
npm install babel-preset-stage-2 --save-dev
npm install babel-preset-react-native-stage-0 --save-dev

根目录下创建.babelrc { “presets”: [“react-native-stage-0/decorator-support”] }

TypeScript

如果你的项目已经开始使用TypeScript,那我们只需要在tsconfig.json文件中的 experimentalDecorators 设置为 true

这样,我们就可以使用ES7新特性装饰器了

在vscode 移除不支持decorator特性的语法警告提示

在项目根目录创建tsconfig.json

{
 "compilerOptions": {
 "experimentalDecorators": true,
 "allowJs": true
 }
}

重启你的vscode,你会发现语法警告没有了.

React系列之父组件如何传递Props给this.props.children

Fri, 08 Sep 2017 19:33:33 +0000

问题

React使用router之后,以下形式会经常出现.

this.props.children

可是这样渲染出来的组件,父组件如何传递props给它呢?

解决

我们可以这样传递porps给子组件:

{ 
 React.cloneElement(this.props.children,{A:xxx,B:xxx2,C:xxx3}) 
 
 }

React系列之用create-react-native-app创建React Native应用

Sun, 30 Jul 2017 19:33:33 +0000

之前在介绍create-react-app的时候稍微提了一下create-react-native-app.

这东西其实用起来还是蛮有意思的.这东西最大的好处就是如果你没有安装Xcode,Android Studio这些工具的时候,也是可以在电脑上调试React Native 应用的.

这里说的电脑包括 Mac Windows Linux!!!!

create-react-native-app

Create React Native App 安装

$ npm install -g create-react-native-app
$ create-react-native-app my-app
$ cd my-app/
$ npm start

安装 Expo 这个APP在你的iphone或者安卓手机上. npm start 之后,控制台会出现一个二维码.用这个Expo 扫描这个二维码,就可以马上在你的手机上直接进行远程调试了.那是相当的方便啊.但是速度还是相对桌面模拟器调试慢一点.

Expo的桌面开发工具 Expo XDE

Expo XDE

我们不仅可以在控制里运行整个项目,用XDE也可以.并且支持使用模拟器直接在电脑里直接调试程序.速度不错,完全可以接受.

只不过我Mac的模拟器在安装expo的时候,花了好长的一段时间.如果大家有遇到类似的情况一定要耐心的等一等.

React系列之分享一个自适应高的iframe组件

Mon, 17 Jul 2017 19:33:33 +0000

在网页里面先要嵌入iframe,总是得要解决iframe高度的问题.

那我们在React下,该怎么做到呢?

class FullheightIframe extends Component {
 constructor() {
 super();
 this.state = {
 iFrameHeight: "0px"
 };
 }

 render() {
 return (
 <iframe
 style={ {
 width: "100%",
 height: this.state.iFrameHeight,
 overflow: "visible"
 }}
 onLoad={() => {
 const obj = ReactDOM.findDOMNode(this);
 this.setState({
 iFrameHeight: obj.contentWindow.document.body.scrollHeight + "px"
 });
 }}
 ref="iframe"
 src={this.props.src}
 width="100%"
 height={this.state.iFrameHeight}
 scrolling="no"
 frameBorder="0"
 />
 );
 }
}

React系列之让create-react-app支持导入less

Fri, 14 Jul 2017 19:33:33 +0000

目前来说,create-react-app并不支持直接导入LESS; 这里我就介绍一下,如何让它支持LESS的导入.

create-react-app是基于webpack的,只是没有暴露webpack.config相关的文件.想要支持less,肯定是要修改webpack的配置文件的. 以下命令可以做到暴露出配置文件来:

npm run eject

运行完毕之后,你会看见多出了一个config文件夹. 里面有webpack.config.dev.js和webpack.config.prod.js等配置文件.

接下来,安装less-loader

npm install less-loader less --save-dev

然后修改webpack.config.dev.js文件,

我们只需要修改两个地方

第一: 找到下面代码

exclude: [
 /\.html$/,
 /\.(js|jsx)$/,
 /\.css$/,
 /\.json$/,
 /\.bmp$/,
 /\.gif$/,
 /\.jpe?g$/,
 /\.png$/,
]

将.css改为.(css|less)，内容变为：

exclude: [
 /\.html$/,
 /\.(js|jsx)$/,
 /\.(css|less)$/,
 /\.json$/,
 /\.bmp$/,
 /\.gif$/,
 /\.jpe?g$/,
 /\.png$/,
]

第二个：找到test: /.css$/

更改为test: /.(css|less)$/

并在下面的use数组里面增加less-loader

{
 loader: require.resolve('less-loader') // compiles Less to CSS
}

更改完以后这部分代码大概长这个样子：


 {
 test: /\.(css|less)$/,
 use: [
 require.resolve('style-loader'),
 {
 loader: require.resolve('css-loader'),
 options: {
 importLoaders: 1,
 },
 },
 {
 loader: require.resolve('less-loader') // compiles Less to CSS
 }

 ...

 ],
 }

生产环境的配置跟上面也差不多.

React系列之JSX

Thu, 13 Jul 2017 19:33:33 +0000

JSX是一个有趣的东西。它看似像一个模板语言，但是又具备javascript的所有能力。

在React中，JSX用来生成React元素。

我们使用create-react-app创建一个APP后：

一段JSX代码

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

class App extends Component {
 render() {
 return (
 <div className="App">
 我是一个APP
 </div>
 );
 }
}

ReactDOM.render(<App />, document.getElementById('root'));

我们可以在JSX中内嵌表达式

 //插入数据 
 const data = {name:"小明"}
 const ele = <div>我的名字是：{data.name} </div>;

 //计算
 const ele1 = <div> {1+1} </div>;

 //三元表达式
 const ele2 = <div> {true?"我是小明"："我不是小明"} </div>;

 //在属性里
 const ele3 = <img src={date.xxx} />;

因为JSX使用Babel编译后,本身自己就是一个对象.

let ele = <div className="user">Hello World!</div>

编译后:

const element = React.createElement(
 'div',
 {className: 'user'},
 'Hello World!'
);

所以,这就是JSX可以与js代码混写的原因.

var a =1;
function switchView(){
 if(a>1){
 return <div className="user">Hello World!</div>
 }else{
 return <div className="user">Hello Ming!</div>
 }
}

编译后:

var a =1;
function switchView(){
 if(a>1){
 return React.createElement('div',{className: 'user'},'Hello world!');
 }else{
 return React.createElement('div',{className: 'user'},'Hello Ming!');
 }
}

防止XXS攻击

let content ="<span>我是HTML代码?</span>"

let ele = <div>{content}</div> 
//会直接输入<span>我是HTML代码?</span>,不会把这一段变成HTML

元素的class

因为在ES6里,class是关键字(不再是保留字).所以写的时候要注意,修改为className.

React系列之从一个脚手架开始说起:create-react-app

Wed, 12 Jul 2017 19:33:33 +0000

React的全家桶实在太过于庞大。如果初学者想直接品味React的魅力，这里介绍一个官方的脚手架。使用方法特别简单。

create-react-app

大概使用方法

安装

npm install -g create-react-app

创建一个app

create-react-app my-app
cd my-app/

文件结构：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ └── favicon.ico
│ └── index.html
│ └── manifest.json
└── src
 └── App.css
 └── App.js
 └── App.test.js
 └── index.css
 └── index.js
 └── logo.svg
 └── registerServiceWorker.js

启动应用：

npm start

用浏览器打开 http://localhost:3000/ 就可以直接看到你的应用了。

如果你想打包你的应用：

npm run build

特点

不需要配置；
对 React, JSX, ES6 和 Flow 可以直接编译；
开发服务器；
浏览器热加载的功能；
JavaScript 文件中可以直接 import CSS 和图片；
自动处理 CSS 的兼容问题，无需添加 -webkit 前缀；
集成好了编译命令，编译后直接发布成产品，包含 sourcemaps。

哎哟，路边又捡了一个叫 create-react-native-app 的脚手架: