erikthedeveloper

/**
 * Given a date, how many days are in the month?
 *  Peek ahead to "next month" and look back to "last day of target month" via date=0
 * @param {Date} targetMonthDate
 * @return int
 */
function daysInMonth(targetDate) {
  // Create a new Date for the "next month"
  //  Also discard date's date (set to 1) to avoid any overflow
  //  Example: Attempting to set date to February 31 when there are only 28 days

erikthedeveloper

/**
 * Given an array of "steps", execute them while accounting for delay
 * See: https://medium.com/@kitze/js-coding-challenge-1-test-your-skills-63c2af5446d0#.n2wq6jyqu
 * @param {function|int[]} steps
 */
const sequence = (steps) => steps.reduce(
  // Reduce the steps, keeping track of an accumulated timeout
  (timeout, step) => typeof step === 'function'
    // Yes: invoke it with the currently accumulated timeout
    ? setTimeout(step, timeout) && timeout

erikthedeveloper

import React from 'react';

const SomeForm = React.createClass({
  getInitialState() {
    return {firstName: ''}
  },
  
  handleChangeFirstName(event) {
    this.setState({
      firstName: event.target.value

erikthedeveloper

import React, {PropTypes} from 'react'

const examplePropTypes = {
  // Require the title
  title: PropTypes.string.isRequired,
  // Optional function
  doThisWhenClicked: PropTypes.func,
  // Some array of "special things with a certain shape"
  specialThings: PropTypes.arrayOf(
    PropTypes.shape({

erikthedeveloper

/**
 * The parent "owns" and manages the state.
 * It passes down props to its children
 *  Some props are data and the children simply display them "read"
 *  Some props are functions that can update/affect state "write"
 */
const ShoppingCart = React.createClass({
  getInitialState() {
    return {
      cartQuantity: 0,

erikthedeveloper

/**
 * See: http://facebook.github.io/react/docs/reusable-components.html#stateless-functions
 */
const SomeStatelessComponent = (props) => {
  return (
    <div>
      <h1>Hello, I am SomeStatelessComponent!</h1>
      <h3>{props.message}</h3>
      // Only render children when we are not loading
      {props.loading ? 'Loading...' : props.children}

erikthedeveloper

/**
 * See http://facebook.github.io/react/docs/component-specs.html
 */
const SomeStatefulComponent = React.createClass({

  // Define the initial "state" of our component
  // Update state via this.setState({loading: true})
  getInitialState() {
    return {
      loading: false,

erikthedeveloper

/**
 * Embrace the JSX! It isn't magic. Just sugar.
 * See for yourself!
 *  All 3 Header components below are equivalent.
 *  Examples based on Header.js from https://github.com/erikthedeveloper/example-react-app-react-mail/blob/d0b0216d5b4b4bee1c1551054aa54146cc42e3f1/src/components/Header.js
 *  1) With JSX
 *  2) Without JSX
 *  3) Without JSX (using DOM helpers)
 * React must be within the Scope for JSX
 * http://facebook.github.io/react/docs/jsx-in-depth.html

erikthedeveloper

import React, { PropTypes } from 'react';
import ReactTransitionGroup from 'react/lib/ReactTransitionGroup';

/**
 * An Item... to Transition!
 */ 
const TransitionItem = React.createClass({
  getInitialState() {
    return {
      opacity: 0.0,

erikthedeveloper

/**
 * Variation 01 - Dead Simple Controlled Component
 */
(function() {
  class Modal extends Component {
    render() {
      const {show, close, children} = this.props;
      return !show ? null : (
        <div className="some-class-for-styling">
          <a onClick={close}>x</a>