JavaScript

style vs class

Style

    const dropZone = {
        backgroundColor: '#fafafa',
        border: '2px solid #eee',
        borderRadius: '5px',
        padding: '5px',
    };

Dropzone style={dropZone}... 

Class

file.css
.dropZoneSmall {
    background-color: #f5f5f5;
    border: 2px solid #eee;
    border-radius: 5px;
    padding: 5px;
}

file.js
Dropzone className="dropZoneSmall"... 

These are not swappable – different things. Style is a object of name/value pairs of style attributes. Class is apply this class (defined differently as css.

That’s why one uses ‘style’ and the other uses ‘className’.

How to select and change the color of an element in Google Chrome Devtools

jQuery("#contractQuantityEdit").attr('style', 'background-color: red')

ReactJS

When your state is null (this.state == null)
or
You don’t have access to props (this.props.pipelineSystemId)
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 />) :
            
                {translate('add')}
            ;
};

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

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

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

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

const getDefaultSortOrder = () =&gt; {
  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 =&gt; (
     <tr id="{rs.Id}">
       <td>{rs.Name}</td>
     </tr>);
));

// Note how the block of code needs a return and () 
const dataRows = _.map(this.state.rateSchedules, rs =&gt; {       
    return (
     <tr id="{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',
  borderColor: '#fff', 
  color: '#f00':
};


You can convert to CSS and still override like this

.popoverStyle {
    max-width: 800px;
}

Note: React uses CamelCase. CSS lowercase.

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s

%d bloggers like this: