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
This commit is contained in:
32
snippets/TypescriptReactSetup.md
Normal file
32
snippets/TypescriptReactSetup.md
Normal file
@ -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 -->
|
||||||
Reference in New Issue
Block a user