🧾 Purpose

This script automates the creation and registration of a new React component within a categorized directory structure. It also updates the router.jsx file to import and route the new component.

 

🧩 Step-by-Step Breakdown

1. User Input

  • Prompts the user to enter:

    • A category name (e.g., admin, tools)

    • A component name (e.g., Home, Dashboard)

2. Input Normalization

  • Converts the component name to lowercase and removes spaces.

  • Capitalizes the first letter for use as a React component name.

  • Converts the category name to lowercase and removes spaces.

3. Logging Normalized Values

  • Displays the normalized category, component, and componentCap (capitalized component name).

 

🛠️ File System Operations

4. Directory Creation

  • Checks if the category directory exists under:

    Code
    src/components/guests/pages/tools/<category>

    • If not, it creates the directory.

5. Component File Creation

  • Checks if the component file (<componentCap>.jsx) exists inside the category directory.

    • If not, it creates the file.

6. Boilerplate Injection

  • Adds basic JSX boilerplate to the new component file:

    jsx
    function ComponentName () {
  return (<div><h1>ComponentName Component</h1></div>)
}
export default ComponentName
 

🔁 Router Integration (src/router.jsx)

7. Import Statement

  • Uses sed to insert an import line after the comment //IMPORTSAUTOGENERATED:

    js
    import ComponentName from "./components/guests/pages/tools/category/ComponentName";

8. Route Registration

  • Uses sed to insert a new route object after the marker AUTOGENERATEDROUTES:

    js
    { path: '/category/component', element: <ComponentName /> },
 

🧑‍💻 Final Step

  • Opens the newly created component file in Visual Studio Code for immediate editing.

 

✅ Error Handling

  • Each critical operation (import, route, boilerplate) checks for success and exits with an error message if it fails.

[Router.jsx]

you must add the following comments for the location where you want the import and route to go. example:

Import:

//IMPORTSAUTOGENERATED
import Memory from "./components/guests/pages/tools/education/Memory";

//END AUTO

Children Routes

      //AUTOGENERATEDROUTES
{ path: '/education/memory', element: <Memory/> },

[create-new-component.sh]

# create a new bash script file to prompt user to enter the name of the caegory and the name of the compoonent
# then create a new directory with the name of the category if it does not exist
# then create a new directory with the name of the component inside the category directory

# add "{ path: '/home', element: <Home /> }," after "children: [" in router.jsx  using sed command

APP_PATH_TOOLS="src/components/guests/pages/tools"

echo "Enter the name of the category:"
read category
echo "Enter the name of the component:"
read COMPONENT_NAME
# convert COMPONENT_NAME to lowercase
component=$(echo "$COMPONENT_NAME" | tr '[:upper:]' '[:lower:]')
# capitalize first letter of component
componentCap="$(tr '[:lower:]' '[:upper:]' <<< ${component:0:1})${component:1}"
# remove spaces from component
component=$(echo "$component" | tr -d ' ')
# remove spaces from category
category=$(echo "$category" | tr -d ' ')
# convert category to lowercase
category=$(echo "$category" | tr '[:upper:]' '[:lower:]')

echo "Category: $category"
echo "Component: $component"
echo "Component Capitalized: $componentCap"

# ADD IMPORT TO ROUTER.JSX
echo "Adding import to src/router.jsx"
# use sed to add the new import after the line that contains "//AUTO"
sed -i "/\/\/IMPORTSAUTOGENERATED/a import $componentCap from \"./components/guests/pages/tools/$category/$componentCap\";" src/router.jsx
if [ $? -ne 0 ]; then
    echo "Error adding import to src/router.jsx"
    exit 1
fi
echo "Added import to src/router.jsx successfully."


# ADD NEW COMPONENT TO ROUTER.JSX CHILDREN ARRAY
echo "Adding new route to src/router.jsx"
# use sed to add the new route to the routes array after "children: ["
sed -i "/AUTOGENERATEDROUTES/a { path: '\/$category/$component', element: <$componentCap\/> }," src/router.jsx
if [ $? -ne 0 ]; then
    echo "Error adding new route to src/router.jsx"

    exit 1
fi
echo "Added new route to src/router.jsx successfully."


# check if category directory exists
if [ -d "$APP_PATH_TOOLS/$category" ]; then
    echo "Category $category already exists."
else
    echo "Category $category does not exist. Creating category $category."
    mkdir "$APP_PATH_TOOLS/$category"
    echo "Category $category created successfully."
fi

# check if componentCap file exists
if [ -f "$APP_PATH_TOOLS/$category/$componentCap.jsx" ]; then
    echo "Component $componentCap already exists in category $category."
else
    echo "Component $componentCap does not exist in category $category. Creating component $componentCap."
    # create componentCap sjx file
    touch "$APP_PATH_TOOLS/$category/$componentCap.jsx"
    echo "Component $componentCap created successfully in category $category."
fi

# add boilerplate code to componentCap file
echo "Adding boilerplate code to $componentCap.jsx"
echo "function $componentCap (){return (<div><h1>$componentCap Component</h1></div>)}export default $componentCap" > "$APP_PATH_TOOLS/$category/$componentCap.jsx"
if [ $? -ne 0 ]; then
    echo "Error adding boilerplate code to $componentCap.jsx"
    exit 1
fi
echo "Added boilerplate code to $componentCap.jsx successfully."

# open new componentCap in vscode
code "$APP_PATH_TOOLS/$category/$componentCap.jsx"
# DONE
Source: /f/apachefriends/xampp/htdocs/REACT/APPS/my-react-tools-mdb/appv3/my-react-tools-mdb