From 503930bec5c601d1e64922a797771af5eb00bd3b Mon Sep 17 00:00:00 2001
From: Malte <35011002+malteA@users.noreply.github.com>
Date: Mon, 15 Oct 2018 09:52:27 +0200
Subject: [PATCH] Added Typescript React Base Setup (#7)

* Added Typescript React Base Setup

* Fixed PR#7 Issues

* Added Tags and Expertise fix for PR#7

* Update TypescriptReactSetup.md
---
 snippets/TypescriptReactSetup.md | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 snippets/TypescriptReactSetup.md

diff --git a/snippets/TypescriptReactSetup.md b/snippets/TypescriptReactSetup.md
new file mode 100644
index 000000000..e521602de
--- /dev/null
+++ b/snippets/TypescriptReactSetup.md
@@ -0,0 +1,32 @@
+### Typescript React Component
+
+To get started with React and Typescript you need to import the React Module.
+Next you define your Interface for the Props. Typescript requires that you define the types as well.
+After you defined your interfaces you pass them as Type Arguments into the React.Component function call. The first Parameter is for the Props and the second for the State.
+As soon as you passed in the Props you are able to display them.
+
+```tsx
+import * as React from "react";
+
+interface IProps {
+    greeting: string;
+}
+
+class TypescriptComponent extends React.Component<IProps, {}> {
+  public render(): JSX.Element {
+    return <div>{this.props.greeting}</div>;
+  }
+}
+
+```
+
+```tsx
+const htmlNode: HtmlElement = document.getElementById("demoTypescript");
+if (htmlNode) {
+    ReactDOM.render(<TypescriptComponent greeting="Hello 30 Seconds of Code" />, htmlNode);
+}
+```
+
+<!-- tags: setup, typescript -->
+
+<!-- expertise: 0 -->