소개
- Redux, React Hook 등 React와 관련된 Snippet들을 단축키로 간단하게 생성할 수 있게 해줍니다.
- .js .ts .jsx .tsx 파일 확장자를 지원해줍니다.
Snippets
React Componets
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
rfce
import React from 'react'
export default function $1() {
return <div>$0</div>
}
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'
export const $1 = () => {
return <div>$0</div>
}
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
import React, { memo } from 'react'
import PropTypes from 'prop-types'
const $1 = memo(function $1(props) {
return <div>$0</div>
})
$1.propTypes = {}
export default $1
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)
rfcredux
import React, { Component } from 'react'
import { connect } from 'react-redux'
export const FileName = () => {
return <div>$4</div>
}
const mapStateToProps = (state) => ({})
const mapDispatchToProps = {}
export default connect(mapStateToProps, mapDispatchToProps)(FileName)
rfreduxp
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
export const FileName = () => {
return <div>$4</div>
}
FileName.propTypes = {
$2: $3,
}
const mapStateToProps = (state) => ({})
const mapDispatchToProps = {}
export default connect(mapStateToProps, mapDispatchToProps)(FileName)
reduxmap
const mapStateToProps = (state) => ({})
const mapDispatchToProps = {}
더 자세한 내용은 아래 링크에서 확인하시면 됩니다.
https://github.com/r5n-dev/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md
'ETC > 💡KnowHow' 카테고리의 다른 글
[API] TMDB API Key 발급 (0) | 2024.08.17 |
---|---|
[CodeBlock] highlight.js 적용 가이드 (0) | 2024.07.30 |
[Tistory Skin] hELLO 적용 가이드 (0) | 2024.07.30 |
[Download] Git 설치 가이드 by Windows (0) | 2024.07.30 |