Last active
February 8, 2019 14:25
-
-
Save pattiereaves/5e821b45be27381e5c8bf645ea4bd638 to your computer and use it in GitHub Desktop.
Add this to your shell and it will scaffold a React component.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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