Skip to content

Instantly share code, notes, and snippets.

Avatar

Shubham Kanodia pastelsky

View GitHub Profile
View gist:95d1f5006f1a757dc073a22fb95dcaab
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC2AWKrVzu8bA4boguZDHU3ehtfKr3YSheJZ1ydQ9xlbksdSM2rWENvPUQkSO2Dx6BPU780yG6pgiSQiYDnML2ULMuqw2V4fA+0i+ZdI6pOpgl1WNxwr3xkmHxQiktQDvbHsoJucJkILp4jmzFqoKjfez9nyuGFgj9vpHrZwvKyiO8qMQgxjy+kkIgbwwvZJSluU7xYlSKdimFOvx8A2l2GnLt3gDjJfNQUFvmyB90nFxtOxIwe88v8SQfOJaEt0aagKAqU/cd9pIxNjQsKUAzMlt8DNzTrmiT+m3kbrVqyyPM6/j0KHAFvMFtS55AqP38PKDLndr9XGrpCiC1wB+X1 skanodia@C02W42GKHTD8
@pastelsky
pastelsky / component.jsx
Created Mar 30, 2017
Destructure all things
View component.jsx
import React, { Component, PropTypes } from 'react'
class HelloWorld extends Component {
static propTypes = {
show: PropTypes.bool
}
render() {
const { show } = this.state
View components.jsx
function ProductCard /* vs. P̶r̶o̶d̶u̶c̶t̶ */ ({ ... }) { }
function AutoSuggestionList /* vs. A̶u̶t̶o̶S̶u̶g̶g̶e̶s̶t̶i̶o̶n̶s̶ */ ({ ... }) { }
@pastelsky
pastelsky / components.jsx
Last active Mar 30, 2017
Idiomatic naming of components
View components.jsx
// Extends DOM functionality
function SearchInput /* vs. S̶e̶a̶r̶c̶h̶ */ ({ ... }) { }
// Structural components
function ProductCard /* vs. P̶r̶o̶d̶u̶c̶t̶ */ ({ ... }) { }
function AutoSuggestionList /* vs. A̶u̶t̶o̶S̶u̶g̶g̶e̶s̶t̶i̶o̶n̶s̶ */ ({ ... }) { }
@pastelsky
pastelsky / component.jsx
Last active Mar 30, 2017
Order your methods
View component.jsx
class SearchPage extends Component {
// Helper Functions
fetchResults() { ... }
fireAnalyticsEvent() { ... }
// Event Handlers
handlePagination() { ... }
@pastelsky
pastelsky / component.jsx
Created Mar 30, 2017
Short render functions
View component.jsx
class SearchPage extends Component {
get resultCount() {
const { count, query } = this.state
if (count === 0) {
return `No results for you, sorry!`
} else if (count === 1) {
return `Found 1 result for ${ query }`
} else {
@pastelsky
pastelsky / component.jsx
Last active Mar 30, 2017
Consistent Naming
View component.jsx
class ProductList extends Component {
handleAccordionClick() {
//...
}
handleButtonClick(){
//...
}
@pastelsky
pastelsky / component.jsx
Last active Mar 30, 2017
Clean and consistent naming
View component.jsx
class Accordion extends Component {
static propTypes = {
// Booleans
isOpen: PropTypes.boolean,
showArrow: PropTypes.boolean,
shouldAnimate: PropTypes.boolean,
// Events
onOpen: PropTypes.func,
onHeaderClick: PropTypes.func,
@pastelsky
pastelsky / Component.jsx
Last active Jan 13, 2019
Class Properties
View Component.jsx
class Accordion extends Component {
/*
contructor() {
this.handleHeaderClick = this.handleHeaderClick.bind(this)
this.handleArrowClick = this.handleArrowClick.bind(this)
}
*/
handleHeaderClick () => {
this.setState({ isOpen: !this.state.isOpen })
View PurchaseTable.jsx
[TableColumns.COST, {
render: (cost, record) => (
<Cell.Number value={ cost }
isEditable={ this.canEdit(TableColumns.COST) }
onSubmit={ value => this.handleCostSubmit(value, record) }
/>
),
}],
[TableColumns.IS_PRIORITY, {
render: (isPriority, record) => (
You can’t perform that action at this time.