Make a React component.

MakeReactComponent

#!/bin/bash -e

ORIGINAL_WORKING_DIR=$(pwd)
WORKSPACE=$(cd $(dirname $0); pwd)

# A POSIX variable
OPTIND=1         # Reset in case getopts has been used previously in the shell.

# Initialize our own variables:
NAME=""
CLASS=0

while getopts "cn:" opt; do
    case "$opt" in
    c)  CLASS=1
        ;;
    n)  NAME=$OPTARG
        ;;
    esac
done

shift $((OPTIND-1))

[ "$1" = "--" ] && shift

mkdir $NAME
cd $NAME

if [ $CLASS -eq 1 ]
then
echo 'Creating React Component Class: $Name'
cat > 'index.js' << EOF
import React, { Component, PropTypes } from 'react'
import styles from './styles'

export default class $NAME extends Component {

  static propTypes = {

  }

  render () {
    const {} = this.props

    return (
      <div className={styles.main} data-x='$NAME'>

      </div>
    )
  }
}
EOF
else
echo 'Creating React Component Function: $Name'
cat > 'index.js' << EOF
import React, { PropTypes } from 'react'
import styles from './styles'

$NAME.propTypes = {

}

export default function $NAME ({}) {
  return (
    <div className={styles.main} data-x='$NAME'>

    </div>
  )
}
EOF
fi
touch 'styles.css'
subl 'styles.css'
subl 'index.js'

# ----

cd $ORIGINAL_WORKING_DIR

Useful when working in the client application for MOBI3.
Creates a directory with the given name, inside the directory 2 files: index.js & styles.css

Inside index.js a React component class or function and a reference to the styles.css

Opens both files in Sublime text (assuming subl is in PATH)

Usage

MakeReactComponent -n ExampleFunction

Creates a React component function.

MakeReactComponent -cn ExampleClass

Creates a React component class.

Examples:

index.js with React component function:

import React, { PropTypes } from 'react'
import styles from './styles'

ExampleFunction.propTypes = {

}

export default function ExampleFunction ({}) {
  return (
    <div className={styles.main} data-x='ExampleFunction'>

    </div>
  )
}

index.js with React component class:

import React, { Component, PropTypes } from 'react'
import styles from './styles'

export default class ExampleClass extends Component {

  static propTypes = {

  }

  render () {
    const {} = this.props

    return (
      <div className={styles.main} data-x='ExampleClass'>

      </div>
    )
  }
}