React and Next.js Snippets for VSC

react-next-snippets.json

{
/*
	// Place your snippets for JavaScript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
*/
  "React Class Component": {
    "prefix": "react_class_component",
    "body": [
      "import React, { Component } from 'react';",
      "class CCOMPONET extends Component {",
      "  render() {",
      "    return (",
      "$0",
      "    );",
      "  };",
      "}",
      "export default CCOMPONET;"
    ],
    "description": "Create Generic Class"
  },
  "React Functional Component": {
    "prefix": "react_functional_component",
    "body": [
      "import React from 'react';",
      "const FCOMPONET = () => {",
      "  return (",
      "$0",
      "  );",
      "}",
      "export default FCOMPONET;"
    ],
    "description": "Create Functional Component"
  },
  "React Component Will Mount": {
    "prefix": "react_component_will_mount",
    "body": [
      "componentWillMount() {",
      "  $0",
      "}"
    ],
    "description": "React Component Will Mount"
  },
  "React Component Did Mount": {
    "prefix": "react_component_did_mount",
    "body": [
      "componentDidMount() {",
      "  $0",
      "}"
    ],
    "description": "React Component Did Mount"
  },
  "React MouseMove": {
    "prefix": "react_on_mouse_move",
    "body": [
      "onDocumentMouseMove(event) {",
      "  $0",
      "}"
    ],
    "description": "React MouseMove Listener"
  },
  "React TouchStart": {
    "prefix": "react_on_touch_start",
    "body": [
      "onDocumentTouchStart(event) {",
      "  $0",
      "}"
    ],
    "description": "React TouchStart Listener"
  },
  "React TouchMove": {
    "prefix": "react_on_touch_move",
    "body": [
      "onDocumentTouchMove(event) {",
      "  $0",
      "}"
    ],
    "description": "React TouchMove Listener"
  },
  "Styled Div": {
    "prefix": "styled_div",
    "body": [
      "const StyledDiv = styled.div`$0`"
    ],
    "description": "Styled Div"
  },
  "Next Router": {
    "prefix": "next_router",
    "body": [
      "const routes = (module.exports = require('next-routes')())",
      "routes",
      "  .add('index', '/')"
    ],
    "description": "Next Js Basic Router"
  },
  "Next Server": {
    "prefix": "next_server",
    "body": [
      "require('dotenv').config()",
      "const next = require('next')",
      "const routes = require('./routes')",
      "const app = next({ dev: process.env.NODE_ENV !== 'production' })",
      "const handler = routes.getRequestHandler(app)",
      "const express = require('express')",
      "app.prepare().then(() => {",
      "  console.log(process.env.TEST)",
      "  express()",
      "    .use(handler)",
      "    .listen(3000)",
      "})"
    ],
    "description": "Next Js Server"
  },
  "Next Page": {
    "prefix": "next_page",
    "body": [
      "import React, { Component, PureComponent } from 'react'",
      "import withRedux from 'next-redux-wrapper'",
      "import { bindActionCreators } from 'redux'",
      "import styled from 'styled-components'",
      "import Page from '../components/shared/Page'",
      "",
      "class Index extends Component {",
      "  render() {",
      "    return (",
      "      <div/>$0",
      "    )",
      "  }",
      "}",
      "",
      "export default withRedux(",
      "  initStore,",
      "  state => {",
      "    return {}",
      "  },",
      "  dispatch => {",
      "    return {}",
      "  }",
      ")(Index)"
    ],
    "description": "BootStrap Next.js Page"
  },
  "Next Three Js": {
    "prefix": "next_three_js",
    "body": [
      "import React, { Component, PureComponent } from 'react'",
      "import Page from '../components/shared/Page'",
      "import styled from 'styled-components'",
      "import React3 from 'react-three-renderer'",
      "import * as THREE from 'three'",
      "import ReactDOM from 'react-dom'",
      "import { initStore } from '../state'",
      "import withRedux from 'next-redux-wrapper'",
      "import { bindActionCreators } from 'redux'",
      "class Index extends Component {",
      "  constructor(props, context) {",
      "    super(props, context);",
      "    this.cameraPosition = new THREE.Vector3(0, 0, 5);",
      "    this.state = {",
      "      cubeRotation: new THREE.Euler(),",
      "    };",
      "    this._onAnimate = () => {",
      "      this.setState({",
      "        cubeRotation: new THREE.Euler(",
      "          this.state.cubeRotation.x + 0.1,",
      "          this.state.cubeRotation.y + 0.1,",
      "          0",
      "        ),",
      "      });",
      "    };",
      "  }",
      "  render() {",
      "    const {",
      "      width,",
      "      height,",
      "    } = this.props;",
      "    return (",
      "      <React3",
      "        mainCamera='camera' // this points to the perspectiveCamera below",
      "        width={width}",
      "        height={height}",
      "",
      "        onAnimate={this._onAnimate}",
      "      >",
      "        <scene>",
      "          <perspectiveCamera",
      "            name='camera'",
      "            fov={75}",
      "            aspect={width / height}",
      "            near={0.1}",
      "            far={1000}",
      "",
      "            position={this.cameraPosition}",
      "          />",
      "          <mesh",
      "            rotation={this.state.cubeRotation}",
      "          >",
      "            <boxGeometry",
      "              width={1}",
      "              height={1}",
      "              depth={1}",
      "            />",
      "            <meshBasicMaterial",
      "              color={0x00ff00}",
      "            />",
      "          </mesh>",
      "        </scene>",
      "      </React3>",
      "    );",
      "  }",
      "}",
      "export default withRedux(",
      "  initStore,",
      "  state => {",
      "    return {}",
      "  },",
      "  dispatch => {",
      "    return {}",
      "  }",
      ")(Index)"
    ],
    "description": "Next Js Basic ThreeJS Implementation"
  }
}