diff --git a/UltiSnips/javascript.snippets b/UltiSnips/javascript.snippets
index c0fcd10..527154e 100644
--- a/UltiSnips/javascript.snippets
+++ b/UltiSnips/javascript.snippets
@@ -4,7 +4,7 @@ endsnippet
 
 snippet if "if ( ... ) { ... }"
 if ($1) {
-  $0
+	$0
 }
 endsnippet
 
@@ -18,21 +18,21 @@ endsnippet
 
 snippet if "if ( ... ) { ... }"
 if ($1) {
-  $0
+	$0
 }
 endsnippet
 
 snippet ifelse "if ( ... ) { ... } else { ... }"
 if ($1) {
-  $2
+	$2
 } else {
-  $0
+	$0
 }
 endsnippet
 
 snippet for "for ( ... ) { ... }"
 for (let ${1:index} = ${2:0}; $1 $3; $1${4:++}) {
-  $0
+	$0
 }
 endsnippet
 
@@ -42,36 +42,74 @@ setTimeout(() => {$0
 endsnippet
 
 snippet jsx "import React ..."
-import React from "react"
+import React from "react";
+
+class $1 extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+		}
+	}
+
+	render() {
+		return (
+			<${2:div} className={this.props.className}>
+				$0
+			</$2>
+		);
+	}
+}
 
 export default () => (
-  <${1:div}>$0</$1>
-)
+	<S.$1}></S.$1>
+);
 endsnippet
 
-snippet jsxs "import React ... (styled)"
-import React from "react"
-import styled from "styled-components"
+snippet jsxs "import React ... styled"
+import React from "react";
+import styled from "styled-components";
 
-const $1 = styled.${2:div}\`
-  $3
-\`
+const S = {};
+
+class $1 extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+		}
+	}
+
+	render() {
+		return (
+			<${2:div} className={this.props.className}>
+				$0
+			</$2>
+		);
+	}
+}
+
+S.$1 = styled($1)\`
+\`;
 
 export default () => (
-  <$1>$0</$1>
-)
+	<S.$1}></S.$1>
+);
 endsnippet
 
-snippet xc "class ..."
-class $1 extends React.component {
-  constructor(props) {
-    super(props)
-    this.setState({$0})
-  }
+snippet jsc "class ... extends React.Component"
+class $1 extends React.Component \{
+${2:	constructor(props) \{
+		super(props);
+		this.state = \{
+		\}
+	\}}
 
-  render() {
-    return (
-    )
-  }
+	render() \{
+		return (
+			<${3:div}${4: className=\{this.props.className\}}>
+				$0
+			</$3>
+		);
+	}
 }
 endsnippet
+