1
// 이렇게 class 문법을 사용해서 선언함
2
class App extends Component {
3
  componentDidMount() {
4
    // App 컴포넌트가 로드되고나서 실행할 코드
5
  }
6
  componentDidUpdate() {
7
    // App 컴포넌트가 업데이트 되고나서 실행할 코드
8
  }
9
  componentWillUnmount() {
10
    // App 컴포넌트가 삭제되기전에 실행할 코드
11
  }
12
  render() {
13
    const name = 'react'
14
    return <div className="react">{name}</div>
15
  }
16
}

1
import React from 'react'
2
import './App.css'
3

4
function App() {
5
  const name = '리액트'
6
  return <div className="react">{name}</div>
7
}
8

9
export default App

1
{
2
  // Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
3
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
4
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
5
  // same ids are connected.
6
  // Example:
7
  // "Print to console": {
8
  // 	"prefix": "log",
9
  // 	"body": [
10
  // 		"console.log('$1');",
11
  // 		"$2"
12
  // 	],
13
  // 	"description": "Log output to console"
14
  // }
15
  "reactFunction": {
16
    "prefix": "rfc",
17
    "body": "import React from 'react';\n\nexport default function ${1:${TM_FILENAME_BASE}}() {\n\treturn (\n\t\t<div>\n\t\t\t\n\t\t</div>\n\t);\n}\n\n",
18
    "description": "Creates a React Function component"
19
  },
20
  "reactStatelessImplicitReturn": {
21
    "prefix": "rsi",
22
    "body": "import React from 'react';\n\nexport const ${1:${TM_FILENAME_BASE}} = (props) => (\n\t\t\t$0\n\t);",
23
    "description": "Creates a React Function component"
24
  },
25
  "Import Module CSS": {
26
    "prefix": "icss",
27
    "body": ["import styles from './$TM_FILENAME_BASE.module.css'"],
28
    "description": "Import PostCSS"
29
  },
30
  "ClassName": {
31
    "prefix": "cn",
32
    "body": ["className={styles.$1}"],
33
    "description": "Adding className"
34
  }
35
}