Skip to content

Instantly share code, notes, and snippets.

@pattiereaves
Last active February 8, 2019 14:25
Show Gist options
  • Save pattiereaves/5e821b45be27381e5c8bf645ea4bd638 to your computer and use it in GitHub Desktop.
Save pattiereaves/5e821b45be27381e5c8bf645ea4bd638 to your computer and use it in GitHub Desktop.
Add this to your shell and it will scaffold a React component.
NAME=$1
CAPITAL_NAME=$(tr '[:lower:]' '[:upper:]' <<< ${NAME:0:1})${NAME:1}
# Make directory
echo "Creating directory $NAME"
mkdir $1
# Make index,js
echo "Creating $NAME/index.js"
cat <<EOF >$NAME/index.js
import React from 'react';
// Styles
import styles from './$NAME.css';
export default class $CAPITAL_NAME extends React.PureComponent {
render() {
return (
<div className={styles.$NAME}>
$CAPITAL_NAME
</div>
);
}
}
EOF
# Make stylesheet
echo "Creating $NAME/$NAME.css"
cat <<EOF >$NAME/$NAME.css
/* $CAPITAL_NAME component styles */
.$NAME {
background-color: magenta;
}
EOF
# Make readme
echo "Creating $NAME/readme.md"
cat <<EOF >$NAME/readme.md
## $CAPITAL_NAME component
Example use of $CAPITAL_NAME component.
\`\`\`jsx
<$CAPITAL_NAME />
\`\`\`
EOF
echo "Success!"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment