https://github.com/niklaspor/react-ts-cheatsheet
React TypeScript Snippet Collection
https://github.com/niklaspor/react-ts-cheatsheet
Last synced: 24 days ago
JSON representation
React TypeScript Snippet Collection
- Host: GitHub
- URL: https://github.com/niklaspor/react-ts-cheatsheet
- Owner: NiklasPor
- Created: 2019-05-04T18:56:27.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-05T11:32:48.000Z (almost 6 years ago)
- Last Synced: 2025-02-14T06:48:09.506Z (3 months ago)
- Language: TypeScript
- Size: 185 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-TS-Snippets
1. [Components](#components)
1. [Basic](#c-basic)
2. [With Props](#c-with-props)
3. [With State and Button](#c-with-state-and-button)
4. [With State and Timer](#c-with-state-and-timer)
5. [With Child Components](#c-children)
2. [Templating](#templating)
1. [If](#t-if)
2. [If-Else](#t-if-else)
3. [List](#t-list)
4. [Inline List](#t-inline-list)
3. [Forms](#forms)
1. [Input](#f-input)
2. [TextArea](#f-textarea)
3. [Select or Dropdown](#f-select)
### Basic
```typescript
class HelloMessage extends React.Component{
render() {
return
Hello there!
;
}
}
```
### With Props (Input Parameter)
```typescript
class HelloMessage extends React.Component<{userName: string}>{
render() {
return
Hello user: {this.props.userName} !
;
}
}
```
### With State and Button
```typescript
class Ticker extends React.Component<{start: number, modifier: number}, {counter: number}> {
private timer!: NodeJS.Timeout;
constructor(props: {start: number, modifier: number}) {
super(props);
this.state = {counter: props.start};
this.onClick = this.onClick.bind(this);
}
onClick(): void {
this.setState((state, props) => ({counter: state.counter + props.modifier}))
}
render() {
return (
Actually, I can count: { this.state.counter }
Add {this.props.modifier}!
);
}
}
```
### Child Components or Containment
```typescript
class App extends React.Component {
render() {
return (
);
}
}
class Sidebar extends React.Component {
render() {
return (
{ this.props.children }
);
}
}
class GeneralMenu extends React.Component {
render() {
return (
General
- Messages
- Groups
- Configuration
);
}
}
class UserMenu extends React.Component {
render() {
return (
User
- Name
- Birthday
- Country
);
}
}
```
### With State and Timer
```typescript
class Ticker extends React.Component<{start: number, modifier: number}, {ticker: number}> {
private timer!: NodeJS.Timeout;
constructor(props: {start: number, modifier: number}) {
super(props);
this.state = {ticker: props.start};
}
componentDidMount() {
this.timer = setInterval(
() => this.setState((state, props) => ({ticker: state.ticker + props.modifier})),
250
)
}
componentWillUnmount() {
clearInterval(this.timer)
}
render() {
return (
Actually, I can count: { this.state.ticker}
);
}
}
```
### If
```typescript
class Joke extends React.Component<{answer: boolean}> {
render() {
return (
Knock Knock!
{ this.props.answer &&
Who is there??
}
);
}
}
```
### If-Else (Regular Ternary Operator)
```typescript
class Joke extends React.Component<{angry: boolean}> {
render() {
return (
Knock Knock!
{ this.props.angry
? Leave me alone!!
: Yes...?
}
);
}
}
```
### Inline List
```typescript
class Numbers extends React.Component<{numbers: number[]}> {
render() {
return (
this.renderNumbers()
);
}
renderNumbers() {
return this.props.numbers.map((n) =>
{ n }
);
}
}
```
### List
```typescript
class Numbers extends React.Component<{numbers: number[]}> {
render() {
return (
{ this.props.numbers.map((n) =>
{ n }
)}
);
}
}
```
### Input
```typescript
class InputTextSync extends React.Component<{}, {text: string}> {
constructor(props: {}) {
super(props)
this.state = {text: 'Start Text'}
this.onChange = this.onChange.bind(this);
}
onChange(event: FormEvent) {
this.setState({text: event.currentTarget.value});
}
render() {
return (
{ this.state.text }
);
}
}
```
### TextArea
```typescript
class TextAreaSync extends React.Component<{}, {text: string}> {
constructor(props: {}) {
super(props)
this.state = {text: 'Start Text'}
this.onChange = this.onChange.bind(this);
}
onChange(event: FormEvent) {
this.setState({text: event.currentTarget.value});
}
render() {
return (
{ this.state.text }
);
}
}
```
### Select or Dropdown
```typescript
class FavoriteColor extends React.Component<{}, {selected: string}> {
constructor(props: {}) {
super(props)
this.state = {selected: 'red'}
this.onChange = this.onChange.bind(this);
}
onChange(event: FormEvent) {
this.setState({selected: event.currentTarget.value});
}
render() {
return (
{ this.state.selected }
Red
Green
Blue
Black is not a color.
);
}
}
```