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

Add rfe/rfep/cmmb#1

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

Merged
ice-chillios merged 8 commits intor5n-labs:masterfromYutHelloWorld:master
Aug 28, 2017
Merged

Add rfe/rfep/cmmb#1

ice-chillios merged 8 commits intor5n-labs:masterfromYutHelloWorld:master
Aug 28, 2017

Conversation

@YutHelloWorld
Copy link
Contributor

@YutHelloWorldYutHelloWorld commentedAug 25, 2017
edited
Loading

Add 3 snippets for React Functional Component and Comments big block.
Inspired byOur Best Practices for Writing React Components.

  1. rfe -> React functional export component
  2. rfep -> React functional export component with propTypes
  3. cmmb -> comment big block
  4. modify code style: delete semi and add space before function parentheses inspired byJavaScript Standard Style
  5. change mapDispatchToProps as object. Seereact-redux/mapDispatchToProps

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.

Thank you for these great snippets!

Copy link
Member

@ice-chilliosice-chillios left a comment

Choose a reason for hiding this comment

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

Just a few thoughts :) I'm glad that someone is using those snippets :) I hope there will be more of contributions in future :) 🚀

"prefix":"rfe",
"body": [
"import React from 'react'",
"function ${1:componentName} () {",
Copy link
Member

Choose a reason for hiding this comment

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

Please add spaces after imports, also to keep consistency you can just writeconst ComponentName = () =>. I would like to keep this as arrow function. :)

Copy link
ContributorAuthor

Choose a reason for hiding this comment

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

constExpandableForm=({ onExpand, expanded, children})=>{

Looks very modern, but the function here is actually unnamed.
This lack of name will not be a problem if your Babel is set up correctly — but if it’s not, any errors will show up as occurring in <> which is terrible for debugging.

README.md Outdated
|`cdup→`|`componentDidUpdate = (prevProps, prevState) => { }`|
|`cwun→`|`componentWillUnmount = () => { }`|
|`ren→`|`render() { return( ) }`|
|`ren→`|`render() { return( ) }`|
Copy link
Member

Choose a reason for hiding this comment

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

I'm not quite a fan of adding space after render, It's just a called function which is getting weird with something like.this.functionName () thanthis.functionName()

Copy link
ContributorAuthor

Choose a reason for hiding this comment

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

I‘m wrong. :). It should be as this:

render(){  ...something}functionMyComponent(){   ...something}

It should not put a space between function name and ( .

@YutHelloWorld
Copy link
ContributorAuthor

YutHelloWorld commentedAug 26, 2017
edited
Loading

@dsznajder I fixed some thing just now

README.md Outdated

exportclass$1extendsComponent {
render() {
render() {
Copy link
Member

Choose a reason for hiding this comment

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

✂️ Space :D

"prefix":"ren",
"body": [
"render() {",
"render() {",
Copy link
Member

Choose a reason for hiding this comment

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

Space ✂️

"",
"export default class ${1:componentName} extends Component {",
" render() {",
" render() {",
Copy link
Member

Choose a reason for hiding this comment

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

Space ✂️

"",
"export class ${1:componentName} extends Component {",
" render() {",
" render() {",
Copy link
Member

Choose a reason for hiding this comment

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

Space ✂️

Copy link
ContributorAuthor

Choose a reason for hiding this comment

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

fixed these 😂

"",
"}",
"",
"function ${1:componentName} () {",
Copy link
Member

Choose a reason for hiding this comment

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

Space after the name of a function is correct for you? :) Still, I'm not a fan offunction :).

@ice-chillios
Copy link
Member

Ok :)@YutHelloWorld Nice work :) Thanks for contribution

@ice-chilliosice-chillios merged commitd08974f intor5n-labs:masterAug 28, 2017
@YutHelloWorld
Copy link
ContributorAuthor

the stateless functional components is not in readme, maybe you need add them

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment

Reviewers

@ice-chilliosice-chilliosice-chillios approved these changes

Assignees

No one assigned

Labels

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@YutHelloWorld@ice-chillios

[8]ページ先頭

©2009-2025 Movatter.jp