How to add React Snippets in VS Code to create React Native components faster!

Ina HranovaIna Hranova 2 minutes 822 views

Share:

Visual Studio Code(VS Code) is  the most popular, lightweight code editor today. It does borrow heavily from other popular code editors, mostly Sublime Text and Atom. When you’re working with React, you should wonder how to add components faster.  There’s got to be better way. In this article we will look at the ES7 React/Redux/GraphQL/React-Native snippets extension here. Yes, it is superpower and provides amazing snippents. Code Snippets help you write repetitive code quickly.

VS Code React Native Snippets

Javascript imports

Import React

//imr

import React from 'react'

Import React and Component.

//imrc

import React, { Component } from 'react'

Create a React Class Component using the filename as the classname

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

Create a React Class Component with Proptypes

//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 

Create React Functional Component

//rfc

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

Other Snippents

There are a ton of methods available, check out here

  • React Native
  • Prop Types
  • Redux
  • Tests
  • Writing to the Console