https://github.com/zyj1022/ife-code-snippets
Self-use Daily React and JS&TS snippets
https://github.com/zyj1022/ife-code-snippets
react-snippets snippets snippets-library
Last synced: about 1 month ago
JSON representation
Self-use Daily React and JS&TS snippets
- Host: GitHub
- URL: https://github.com/zyj1022/ife-code-snippets
- Owner: zyj1022
- License: mit
- Created: 2021-05-12T06:23:34.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-05-12T07:41:17.000Z (about 4 years ago)
- Last Synced: 2025-02-15T18:34:40.605Z (3 months ago)
- Topics: react-snippets, snippets, snippets-library
- Homepage: https://marketplace.visualstudio.com/items?itemName=zhiking.ife-code-snippets
- Size: 17.6 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# 💻 [iFE-code-snippets](https://github.com/zyj1022/ife-code-snippets)
This extension provides you React/TS/JS snippets for [VS Code](https://code.visualstudio.com/)
## 📚 Supported languages (file extensions)
* JavaScript (.js)
* JavaScript React (.jsx)
* TypeScript (.ts)
* TypeScript React (.tsx)
## 📖 Snippets
Below is a list of all available snippets and the triggers of each one. The `⇥` means the `TAB` key.
## 📦 Import package
| Trigger | Content | Description |
| -------: | ------- | ------- |
| `imr` | `import React from 'react';` | |
| `imfc` | `import React, { Fragment, Component } from 'react';` | |
| `imhs` | `import React, { useState, useContext, useEffect, useCallback, useMemo } from 'react';` | |
**imall**
```
import React, { Fragment, Component } from 'react';
import { observer, inject } from 'mobx-react';
import { toJS } from 'mobx';
import styled from 'styled-components';
import { Button } from 'antd';
```
## 🪝 React hooks
| Trigger | Content | Description |
| -------: | ------- | ------- |
| `uses` | `const [, set] = useState();` | useState |
| `usee` | `useEffect(() => { }, []);` | useEffect |
| `usec` | `const = useContext();` | useContext |
| `usecb` | `const memoizedCallback = useCallback(() => {doSomething(a, b)},[a, b],);` | useCallback |
| `user` | `const = useRef();` | useRef |
| `usem` | `const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);` | useMemo |
## 🍚 Basic methods
| Trigger | Content |
| -------: | ------- |
| `clog` | `console.log()` |
## 📒 React components
**Class Component**
`cc`
```
export default class extends Component {
state = { }
render() {
return ( );
}
}
```
**Function Component**
`fc`
```
export interface Props {
}
const : React.FC = () => {
return ( );
}
export default ;
```
**render**
`render`
```
render() {
return (
);
}
```
## License
[MIT](./LICENSE.txt)