react开发插件-ES7 React/Redux/GraphQL/React-Native snippets(二)

简介: react开发插件-ES7 React/Redux/GraphQL/React-Native snippets

React Components


rcc

import React, { Component } from 'react'
export default class FileName extends Component {
  render() {
    return <div>$2</div>
  }
}


rce

import React, { Component } from 'react'
export class FileName extends Component {
  render() {
    return <div>$2</div>
  }
}
export default $1


rcep

import React, { Component } from 'react'
import PropTypes from 'prop-types'
export class FileName extends Component {
  static propTypes = {}
  render() {
    return <div>$2</div>
  }
}
export default $1


rpc

import React, { PureComponent } from 'react'
export default class FileName extends PureComponent {
  render() {
    return <div>$2</div>
  }
}


rpcp

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
export default class FileName extends PureComponent {
  static propTypes = {}
  render() {
    return <div>$2</div>
  }
}


rpce

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
export class FileName extends PureComponent {
  static propTypes = {}
  render() {
    return <div>$2</div>
  }
}


export default FileName


rccp

import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class FileName extends Component {
  static propTypes = {
    $2: $3,
  }
  render() {
    return <div>$4</div>
  }
}

rfcp

import React from 'react'
import PropTypes from 'prop-types'
function $1(props) {
  return <div>$0</div>
}
$1.propTypes = {}
export default $1


rfc

import React from 'react'
export default function $1() {
  return <div>$0</div>
}


rfce

import React from 'react'
function $1() {
  return <div>$0</div>
}
export default $1


rafcp

import React from 'react'
import PropTypes from 'prop-types'
const $1 = props => {
  return <div>$0</div>
}
$1.propTypes = {}
export default $1


rafc

import React from 'react'
const $1 = () => {
  return <div>$0</div>
}
export default $1


rafce

import React from 'react'
const $1 = () => {
  return <div>$0</div>
}
export default $1


rmc

import React, { memo } from 'react'
export default memo(function $1() {
  return <div>$0</div>
})


rmcp


         


rcredux

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
export class FileName extends Component {
  static propTypes = {
    $2: $3,
  }
  render() {
    return <div>$4</div>
  }
}
const mapStateToProps = state => ({})
const mapDispatchToProps = {}
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(FileName)


reduxmap

const mapStateToProps = state => ({})
const mapDispatchToProps = {}


React Native Components


rnc

import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    )
  }
}


rncs

import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'
export default class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    )
  }
}
const styles = StyleSheet.create({})


rnce

import React, { Component } from 'react'
import { Text, View } from 'react-native'
export class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    )
  }
}
export default $1


rncredux

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
export class FileName extends Component {
  static propTypes = {
    $2: $3,
  }
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    )
  }
}
const mapStateToProps = state => ({})
const mapDispatchToProps = {}
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(FileName)


Others


cmmb

/**
|--------------------------------------------------
| $1
|--------------------------------------------------
*/


desc

describe('$1', () => {
  $2
})


test

test('should $1', () => {
  $2
})


tit

it('should $1', () => {
  $2
})


stest

import React from 'react'
import renderer from 'react-test-renderer'
import { ${1:ComponentName} } from '../${1:ComponentName}'
describe('<${1:ComponentName} />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(<${1:ComponentName} {...defaultProps} />)
  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})


srtest

import React from 'react'
import renderer from 'react-test-renderer'
import { Provider } from 'react-redux'
import store from 'src/store'
import { ${1:ComponentName} } from '../${1:ComponentName}'
describe('<${1:ComponentName} />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(
    <Provider store={store}>
      <${1:${TM_FILENAME_BASE}} {...defaultProps} />)
    </Provider>,
  )
  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

sntest

import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'
import ${1:ComponentName} from '../${1:ComponentName}'
describe('<${1:ComponentName} />', () => {
  const defaultProps = {
  }
  const wrapper = renderer.create(<${1:ComponentName} {...defaultProps} />)
  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})


snrtest

import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'
import { Provider } from 'react-redux'
import store from 'src/store/configureStore'
import ${1:ComponentName} from '../${1:ComponentName}'
describe('<${1:ComponentName} />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(
    <Provider store={store}>
      <${1:ComponentName} {...defaultProps} />
    </Provider>,
  )
  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})


hocredux

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
export const mapStateToProps = state => ({
})
export const mapDispatchToProps = {
}
export const ${1:hocComponentName} = (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />
  hocComponent.propTypes = {
  }
  return hocComponent
}
export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))


hoc

import React from 'react'
import PropTypes from 'prop-types'
export default WrappedComponent => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />
  hocComponent.propTypes = {}
  return hocComponent
}

目录
相关文章
|
2月前
|
前端开发 JavaScript API
React开发需要了解的10个库
本文首发于微信公众号“前端徐徐”,介绍了React及其常用库。React是由Meta开发的JavaScript库,用于构建动态用户界面,广泛应用于Facebook、Instagram等知名网站。文章详细讲解了Axios、Formik、React Helmet、React-Redux、React Router DOM、Dotenv、ESLint、Storybook、Framer Motion和React Bootstrap等库的使用方法和应用场景,帮助开发者提升开发效率和代码质量。
127 4
React开发需要了解的10个库
|
2月前
|
存储 JavaScript 前端开发
掌握现代Web开发的基石:深入理解React与Redux
【10月更文挑战第14天】掌握现代Web开发的基石:深入理解React与Redux
33 0
|
20天前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
24 1
|
2月前
|
存储 JavaScript 前端开发
React中使用redux
【10月更文挑战第15天】
32 3
|
3月前
针对react-captcha-code第三方插件不能每次触发深颜色的处理
针对`react-captcha-code`插件生成浅色验证码的问题,通过改造成class组件`MyCaptcha.js`,自定义颜色和验证码生成逻辑,解决了颜色问题。
32 1
针对react-captcha-code第三方插件不能每次触发深颜色的处理
|
2月前
|
前端开发 JavaScript 开发者
React 组件化开发最佳实践
【10月更文挑战第4天】React 组件化开发最佳实践
57 4
|
2月前
|
存储 JavaScript 前端开发
如何使用React和Redux构建现代化Web应用程序
【10月更文挑战第4天】如何使用React和Redux构建现代化Web应用程序
|
2月前
|
JavaScript 前端开发
使用 React 和 Redux 构建动态图表应用
【10月更文挑战第3天】使用 React 和 Redux 构建动态图表应用
|
2月前
|
JavaScript 前端开发
使用 React 和 Redux 构建一个计数器应用
【10月更文挑战第3天】使用 React 和 Redux 构建一个计数器应用
|
2月前
|
存储 JavaScript 前端开发