리액트 템플릿 자동완성 스니펫 / 자주 사용하는 스니펫 / ES7+ React/Redux/React-Native snippets / VS Code extension

Visual Studio Code에서 
ES7+ React/Redux/React-Native snippets를 설치해 주세요

템플릿이 자동완성되어 시간 단축에 좋습니다.
 
자주 사용하는 스니펫

Basic Methods

✅ imp

import moduleName from 'module'

 

✅ nfn

const functionName = (params) => { }

 

React

✅ imr //리액트 가져오기

import React from 'react'

 

✅ imrc //리액트 + Component 가져오기

import React, { Component } from 'react'

 

Console

✅ clg

console.log(object)

 

 

React Components

✅ rcc //리액트 클래스 컴퍼넌트

import React, { Component } from 'react'

export default class App extends Component {

  render() {
    return (
      <div>App</div>
    )
  }
}

 

✅ rfc //리액트 함수형 컴퍼넌트

import React from 'react'

export default function App() {
  return (
    <div>App</div>
  )
}

 

 

✅ rfce //React Function Component + Export 

import React from 'react'

function App() {
  return (
    <div>App</div>
  )
}

export default App

 

 

✅ rafce

import React from 'react'

const App = () => {
  return (
    <div>App</div>
  )
}

export default App

 

 

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>
    )
  }
}

 

✅ rnf

import React from 'react'
import { View, Text } from 'react-native'


export default function $1() {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  )
}

 

✅ rnfs

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'

export default function $1() {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  )
}

const styles = StyleSheet.create({})

 

 

이외에도 다양한 스니펫이 있으니
사이트에서 확인해 주세요.
 
Snippets
https://github.com/ults-io/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md