Skip to content

Instantly share code, notes, and snippets.

@KasRoudra
Last active May 15, 2022 16:39
Show Gist options
  • Save KasRoudra/ed218a5f09b6e87df3e350bacb10c390 to your computer and use it in GitHub Desktop.
Save KasRoudra/ed218a5f09b6e87df3e350bacb10c390 to your computer and use it in GitHub Desktop.
Create React Functional Component (including javascript and css) with just one command "create"
crc() {
if [ -z "$1" ]; then
echo "Usage: crc <Component>"
return 1
fi
file=`echo ${1} | awk '{ print toupper(substr($0, 1, 1)) substr($0, 2) }'`
folder=`echo ${1} | awk '{ print tolower(substr($0, 1, 1)) substr($0, 2) }'`
if [[ -d ${1} || -d ${folder} || -d ${file} ]]; then
echo "Already Exists!"
return 1
fi
mkdir $folder
echo "import React from \"react\";
import \"./${file}.css\";
const ${file} = () => {
return (
<div>
${file}
</div>
)
}
export default ${file};" > ${folder}/${file}.js
touch ${folder}/${file}.css
echo "export { default as $1 } from \"./${folder}/${file}\"" >> index.js
if [[ -d ${folder} ]]; then
echo "React functional component ${file} successfully created!"
fi
}
create() {
if [ -z $1 ]; then
echo "Usage: create <Component1> <Component2> ..."
return 1
fi
args=( "$@" )
for (( i=1;i<=$#;i++ ))
do
if [[ "$SHELL" =~ "bash" ]]; then
crc ${!i}
elif [[ "$SHELL" =~ "zsh" ]]; then
crc ${args[i]}
else
echo "${SHELL} is not supported!"
fi
done
}
@KasRoudra
Copy link
Author

KasRoudra commented Mar 9, 2022

Place that code(which are function definitions) in your main config file like bash.bashrc or .bashrc or .zshrc. Currently, it only supports bash and zsh. Then use command create <Component1> <Component2>... to create multiple components by single command.
Ex: create Header Footer Input This will create 3 folders and 6 files.
Or you can also use crc command to create single component: crc Header

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment