JavaScript

ReactJS

When your state is null (this.state == null)
Check to see if you are missing a bind
this.foo = this.foo.bind(this);

Invoking a method vs passing

Know the difference between when you want to invoke a method

handleYesResponse={this.handleConfirmedSaved(this.state.editLineIndex)}

vs pass is as a function

handleYesResponse={() => this.handleConfirmedSaved(this.state.editLineIndex)}

Creating new application /w Create React App

> npm install -g create-react-app
> create-react-app my-app
> cd my-app
> npm start
> npm run build (packages for production)
> npm test

https://facebook.github.io/react/docs/installation.html#creating-a-new-application

Sublime

Column highlighting – Left click + Option (then select)

Text highlighting
Command + Shift + P
Install (for PackageControll:InstallPackage)
Then type the name of the package

Split screen
Option + Command + 2 (drag files)

Hacks

This is away to check that a object is not null before asking for it’s property.

const goLiveGasDay = gasDay && moment(gasDay);

When converting between class and method
* props -> this.props
* translate -> this.context.translate

Difference between a method on it’s own and a method in a function


const tableHeaders = ( // JSX);
const foo = () => {};

// This is a lambda expression (a function)
const addButton = () => {
        return props.isViewOnlyUser ? (<div/>) :
            <Button>
                {translate('add')}
            </Button>;
};

// When you call it, you need the parentheses
{ addButton() }

// This is the same declaration, only as a const variable
const addButton =
        props.isViewOnlyUser ? (<div/>) :
            <Button>
                {translate('add')}
            </Button>;

// No need for the parentheses here - it's not a function and has already been evaluated
{ addButton }

const quantityTypeSorter = () => (props.isAdding ? undefined : props.handleFoo('xxx'));

const getDefaultSortOrder = () => {
  return {
    properties: ['Id'],
    directions: ['asc'],
  };
};
    
getDefaultSortOrder() {
  return {
    properties: ['Id'],
    directions: ['asc'],
  };
}

// Here is a const as an expression () and another as a block of code {}
const dataRows = _.map(this.state.rateSchedules, rs => (
     <tr id={rs.Id} key={rs.Id}>
       <td>{rs.Name}</td>
     </tr>);
));

// Note how the block of code needs a return and () 
const dataRows = _.map(this.state.rateSchedules, rs => {       
    return (
     <tr id={rs.Id} key={rs.Id}>
       <td>{rs.Name}</td>
     </tr>);
});

Converting between code and class in CSS

If you have CSS defined in code

const popoverStyle = {
  maxWidth: '800px',
};

<Popover style={popoverStyle} >

You can convert to CSS and still override like this

.popoverStyle {
    max-width: 800px;
}
<Popover className="popoverStyle" style={{ width: '500px' }}>

MaxWidth is what React needs for naming. Remember to convert to proper CSS for style sheet.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: