Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

fetch effects, context providers, named export react fc#173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Closed
BryceHamilton wants to merge4 commits intor5n-labs:masterfromBryceHamilton:master
Closed
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 162 additions & 0 deletionsREADME.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -64,6 +64,14 @@ Here is direct link to marketplace [ES7 React/Redux/React-Native/JS Snippets](ht
Every space inside `{ }` and `( )` means that this is pushed into next line :)
`$` represent each step after `tab`.

Use `tab` to skip to the next step.
In some cases, text will be capitalized. For example: `useState`
<br>
![Alt Text](./images/capitalize.gif)
<br>

After `count` is entered for `$1`, once `tab` is typed, `setCount` is capitalized.

Copy link
Author

@BryceHamiltonBryceHamiltonMar 27, 2021•
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

I was shy to use react-snippets before I understood thetab skipping and that some snippets would camelCase capitalize automatically. Thought this might be useful for others 😁

_TypeScript_ has own components and own snippets. Use search or just type `ts` before every component snippet.

I.E. `tsrcc`
Expand DownExpand Up@@ -414,6 +422,16 @@ const $1 = () => {
export default $1
```

### `rafcne`

```javascript
import React from 'react'

export const $1 = () => {
return <div>$0</div>
}
```

### `rmc`

```javascript
Expand All@@ -439,6 +457,150 @@ $1.propTypes = {}
export default $1
```

### `fet`

```javascript
useEffect(() => {
const url = '$0'
fetch(url)
.then((res) => res.json())
.then((json) => {
console.log(json)
})
}, [])
```

### `feta`

```javascript
useEffect(() => {
const url = '$0'
async function fetchApi() {
const res = await fetch(url)
const json = await res.json()
console.log(json)
}
fetchApi()
}, [])
```

### `fets`

```javascript
const [{$1}, set{$1}] = useState($2)

useEffect(() => {
const url = '$0'
fetch(url)
.then((res) => res.json())
.then((json) => {
set{$1}(json)
})
}, [])
```

### `fetas`

```javascript
const [{$1}, set{$1}] = useState($2)

useEffect(() => {
const url = '$0'
async function fetch{$1}() {
const res = await fetch(url)
const json = await res.json()
set{$1}(json)
}
fetch{$1}()
}, [])

```

### `rfcfets`

```javascript
import React, { useState, useEffect } from 'react'

const $1 = () => {
const [{$2}, set{$2}] = useState($3)

useEffect(() => {
const url = '$0'
fetch(url)
.then((res) => res.json())
.then((json) => {
set{$2}(json)
})
}, [])

return <div>{$2}</div>
}

export default $1
```

### `rfcfetas`

```javascript
import React, { useState, useEffect } from 'react'

const $1 = () => {
const [{$2}, set{$2}] = useState($3)

useEffect(() => {
const url = '$0'
async function fetch{$2}() {
const res = await fetch(url)
const json = await res.json()
set{$2}(json)
}
fetch{$2}()
}, [])

return <div>{$2}</div>
}

export default $1

```

### `rcp`

```javascript
import React, { useState } from 'react'

const {$1}Context = React.createContext()

function {$1}Provider({ children }) {
const [{$1}, set{$1}] = useState($2)
const value = { {$1}, set{$1} }
return <{$1}Context.Provider value={value}>{children}</{$1}Context.Provider>
}
export { {$1}Provider }
```

### `rcphook`

```javascript
import React, { useState } from 'react'

const {$1}Context = React.createContext()

function {$1}Provider({ children }) {
const [{$1}, set{$1}] = useState($2)
const value = { {$1}, set{$1} }
return <{$1}Context.Provider value={value}>{children}</{$1}Context.Provider>
}
function use{$1}() {
const context = React.useContext({$1}Context)
if (context === undefined) {
throw new Error('use{$1} must be used within a {$1}Provider')
}
return context
}
export { {$1}Provider, use{$1} }
```

### `rcredux`

```javascript
Expand Down
Binary file addedimages/capitalize.gif
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
172 changes: 169 additions & 3 deletionssnippets/snippets.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -407,6 +407,18 @@
],
"description":"Creates a React Arrow Function Component with ES7 module system"
},
"reactArrowFunctionNamedExportComponent": {
"prefix":"rafcne",
"body": [
"import React from 'react'",
"",
"export const ${1:${TM_FILENAME_BASE}} = () => {",
" return <div>$0</div>",
"}",
""
],
"description":"Creates a React Arrow Function Component with ES7 module system with named export"
},
Copy link
Author

@BryceHamiltonBryceHamiltonMar 27, 2021•
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

The codebase at my work uses named exports for components exclusively, it makes tracking them a lot easier. :)

"reactArrowFunctionComponent": {
"prefix":"rafc",
"body": [
Expand DownExpand Up@@ -594,6 +606,58 @@
],
"description":"Creates a React component class with PropTypes and ES7 module system"
},
"reactFunctionalComponentFetchWithState": {
"prefix":"rfcfets",
"body": [
"import React, { useState, useEffect } from 'react'",
"",
"const ${1:${TM_FILENAME_BASE}} = () => {",
" const [${2:state}, set${2/(.*)/${1:/capitalize}/}] = useState($3)",
"",
" useEffect(() => {",
" const url = '$0'",
" fetch(url)",
" .then((res) => res.json())",
" .then((json) => {",
" set${2/(.*)/${1:/capitalize}/}(json)",
" })",
" }, [])",
"",
" return <div>{$2}</div>",
"}",
"",
"export default ${1:${TM_FILENAME_BASE}}",
""
],
"description":"Creates a React Function component with a data fetching effect with state"
},

"reactFunctionalComponentFetchAwaitWithState": {
"prefix":"rfcfetas",
"body": [
"import React, { useState, useEffect } from 'react'",
"",
"const ${1:${TM_FILENAME_BASE}} = () => {",
" const [${2:state}, set${2/(.*)/${1:/capitalize}/}] = useState($3)",
"",
" useEffect(() => {",
" const url = '$0'",
" async function fetch${2/(.*)/${1:/capitalize}/}() {",
" const res = await fetch(url)",
" const json = await res.json()",
" set${2/(.*)/${1:/capitalize}/}(json)",
" }",
" fetch${2/(.*)/${1:/capitalize}/}()",
" }, [])",
"",
" return <div>{$2}</div>",
"}",
"",
"export default ${1:${TM_FILENAME_BASE}}",
""
],
"description":"Creates a React Function component with a data fetching effect (await syntax) with state"
},
"reactClassCompomentRedux": {
"prefix":"rcredux",
"body": [
Expand DownExpand Up@@ -816,6 +880,46 @@
"body": ["const ${1:contextName} = React.createContext()",""],
"description":"Create React context"
},
"contextProvider": {
"prefix":"rcp",
"body": [
"import React, { useState } from 'react'",
"",
"const ${1/(.*)/${1:/capitalize}/}Context = React.createContext()",
"",
"function ${1/(.*)/${1:/capitalize}/}Provider({ children }) {",
" const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($0)",
" const value = { $1, set${1/(.*)/${1:/capitalize}/} }",
" return <${1/(.*)/${1:/capitalize}/}Context.Provider value={value}>{children}</${1/(.*)/${1:/capitalize}/}Context.Provider>",
"}",
"export { ${1/(.*)/${1:/capitalize}/}Provider }"
],
"description":"Create React Context Provider"
},
"contextProviderWithHook": {
"prefix":"rcphook",
"body": [
"import React, { useState } from 'react'",
"",
"const ${1/(.*)/${1:/capitalize}/}Context = React.createContext()",
"",
"function ${1/(.*)/${1:/capitalize}/}Provider({ children }) {",
" const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($0)",
" const value = { $1, set${1/(.*)/${1:/capitalize}/} }",
" return <${1/(.*)/${1:/capitalize}/}Context.Provider value={value}>{children}</${1/(.*)/${1:/capitalize}/}Context.Provider>",
"}",
"",
"function use${1/(.*)/${1:/capitalize}/}() {",
" const context = React.useContext(${1/(.*)/${1:/capitalize}/}Context)",
" if (context === undefined) {",
" throw new Error('use${1/(.*)/${1:/capitalize}/} must be used within a ${1/(.*)/${1:/capitalize}/}Provider')",
" }",
" return context",
"}",
"export { ${1/(.*)/${1:/capitalize}/}Provider, use${1/(.*)/${1:/capitalize}/} }"
],
"description":"Create React Context Provider with custom useContext Hook"
},

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

"createRef": {
"prefix":"cref",
"body": ["this.${1:refName}Ref = React.createRef()",""],
Expand DownExpand Up@@ -1480,6 +1584,68 @@
"}, [${3:input}])"
]
},
"useEffectFetch": {
"prefix":"fet",
"body": [
"useEffect(() => {",
" const url = '$0'",
" fetch(url)",
" .then((res) => res.json())",
" .then((json) => {",
" console.log(json)",
" })",
"}, [])"
],
"description":"Create a data fetching React effect"
},
"useEffectFetchAwait": {
"prefix":"feta",
"body": [
"useEffect(() => {",
" const url = '$0'",
" async function fetchApi() {",
" const res = await fetch(url)",
" const json = await res.json()",
" console.log(json)",
" }",
" fetchApi()",
"}, [])"
],
"description":"Create a data fetching React effect (await syntax)"
},
"useEffectFetchWithState": {
"prefix":"fets",
"body": [
"const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($2)",
"",
"useEffect(() => {",
" const url = '$0'",
" fetch(url)",
" .then((res) => res.json())",
" .then((json) => {",
" set${1/(.*)/${1:/capitalize}/}(json)",
" })",
"}, [])"
],
"description":"Create a data fetching React effect with state"
},
"useEffectFetchAwaitWithState": {
"prefix":"fetas",
"body": [
"const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($2)",
"",
"useEffect(() => {",
" const url = '$0'",
" async function fetch${1/(.*)/${1:/capitalize}/}() {",
" const res = await fetch(url)",
" const json = await res.json()",
" set${1/(.*)/${1:/capitalize}/}(json)",
" }",
" fetch${1/(.*)/${1:/capitalize}/}()",
"}, [])"
],
"description":"Create a data fetching React effect (await syntax) with state"
},
"useContext": {
"prefix":"useContext",
"body": ["const ${1:context} = useContext(${2:contextValue})"]
Expand DownExpand Up@@ -1859,7 +2025,7 @@
"}",
"",
"export default ${1:${TM_FILENAME_BASE}}"
],
"description":"Creates a React Custom Hook with ES7 module system"
}
],
"description":"Creates a React Custom Hook with ES7 module system"
}
}
[8]ページ先頭
©2009-2025 Movatter.jp