Use Multiline JSX in a Component

import React from 'react';
import ReactDOM from 'react-dom';

class QuoteMaker extends React.Component {
  render() {
    return (
      <blockquote>
        <p>
          The world is full of objects, more or less interesting; I do not wish to add any more.
        </p>
        <cite>
          <a target="_blank"
            href="http://bit.ly/1WGzM4G">
            Douglas Huebler
          </a>
        </cite>
      </blockquote>
    );
  }
};

ReactDOM.render(
  <QuoteMaker />,
  document.getElementById('app')
);

The return statement in <QuoteMaker /> class has a multiline JSX expression wrapped in ().

Use Variable Attribute in a Component

const redPanda = {
  src: 'http://bit.ly/1U92LL3',
  alt: 'Red Panda',
  width:  '200px'
};

class RedPanda extends React.Component {
  render() {
    return (
      <div>
        <h1>Cute Red Panda</h1>
        <img 
          src={redPanda.src} 
          alt={redPanda.alt} 
          width={redPanda.width} />
      </div>
    );
  }
}

ReactDOM.render(
  <RedPanda />,
  document.getElementById('app')
);

The <img /> tag's attributes src, alt and width are all injected {} with JavaScript from the redPanda object's properties.

Put Logic in a Render Function

class Random extends React.Component {
  render() {

    // First, some logic that must happen
    // before rendering:
    const n = Math.floor(Math.random()*10+1);

    // Next, a return statement
    // using that logic:
    return <h1>The number is {n}!</h1>;
  }
}

Use a Conditional in a Render Function

import React from 'react';
import ReactDOM from 'react-dom';

const fiftyFifty = Math.random() < 0.5;

class TonightsPlan extends React.Component {
  render() {
    if (fiftyFifty) {
      return <h1>Tonight I'm going out WOOO</h1>;
    } else {
      return <h1>Tonight I'm going to bed WOOO</h1>;
    }
  }
}

ReactDOM.render(
    <TonightsPlan />,
    document.getElementById('app')
);

Use this in a Component

class IceCreamGuy extends React.Component {
  get food() {
    return 'ice cream';
  }

  render() {
    return <h1>I like {this.food}.</h1>;
  }
}

this refers to an instance of IceCreamGuy, this always refers to its enclosing object. this.food will evaluate to a call of IceCreamGuy's .food method, which evaluates to a string 'ice cream'.

No () is required for this.food since it's a _getter _method which is indicated with get keyword.

Use an Event Listener in a Component

An event handler is a function that gets called in response to an event: <div onHover={myFunc}>

render() {
  return (
    <div onHover={myFunc}>
    </div>
  );
}

In React, you define event handlers as methods in the component class. Like this:

class MyClass extends React.Component {
  myFunc() {
    alert('Stop it.  Stop hovering.');
  }

  render() {
    return (
      <div onHover={this.myFunc}>
      </div>;
    );
  }
}

MyClass component has two methods: myFunc() and .render(). .myFunc() is being used as the event handler. .myFunc() will be called any time that a user hovers over the rendered <div></div>.