style vs class


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

Dropzone style={dropZone}... 


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

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')


When your state is null (this.state == null)
You don’t have access to props (this.props.pipelineSystemId)
Check to see if you are missing a bind =;

Invoking a method vs passing

Know the difference between when you want to invoke a method


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


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)


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 />) :

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

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

// 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 =, rs =&gt; (
     <tr id="{rs.Id}">

// Note how the block of code needs a return and () 
const dataRows =, rs =&gt; {       
    return (
     <tr id="{rs.Id}">

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.


Leave a Reply

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

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

Connecting to %s

%d bloggers like this: