Bash scripts for React, automating tasks

Bash scripting is primarily used to automate development tasks such as code compilation, debugging, version control, and testing. In this post, we will explore three simple scripts that will allow us to automate tasks in our React code.

These are simple commands that will work for any React project, but you can also use them as a foundation to customize them according to your project’s needs. So, consider this post more as a guide for the developer

1-Creating a React component

is a fairly straightforward yet repetitive task, something we can automate. With a single command, we can take care of this. For this purpose, I’ve created a script that allows us to create, within the SRC folder, a directory and within it, an empty React component along with its test file. The test file simply verifies the existence of the default created H1 element.

# Check if a folder and component name is provided
if [ -z "$1" ] || [ -z "$2" ]; then
  echo "Uso: $0 <folder_name> <component_name>"
  exit 1
fi

# Variables
CARPETA=$1
COMPONENTE=$2

# src folder directory
SRC_DIR="src"

# Check if src exists
if [ ! -d "$SRC_DIR" ]; then
  echo "Error: The folder '$SRC_DIR' does not exist. Make sure you are in the main directory of the React project."
  exit 1
fi

# Create component folder
COMPONENTE_DIR="$SRC_DIR/$CARPETA"
mkdir -p "$COMPONENTE_DIR"

# Change to component folder directory
cd "$COMPONENTE_DIR"

# Create component files
echo "import React from 'react';" > $COMPONENTE.js
echo "" >> $COMPONENTE.js
echo "const $COMPONENTE = () => {" >> $COMPONENTE.js
echo "  return (" >> $COMPONENTE.js
echo "    <div>" >> $COMPONENTE.js
echo "      {/* Component content */}" >> $COMPONENTE.js
echo "    <h1>" >> $COMPONENTE.js
echo "     $COMPONENTE" >> $COMPONENTE.js
echo "    </h1>" >> $COMPONENTE.js
echo "    </div>" >> $COMPONENTE.js
echo "  );" >> $COMPONENTE.js
echo "};" >> $COMPONENTE.js
echo "" >> $COMPONENTE.js
echo "export default $COMPONENTE;" >> $COMPONENTE.js


# Create test file 
echo "import React from 'react';" > "${COMPONENTE}.test.js"
echo "import { render } from '@testing-library/react';" >> "${COMPONENTE}.test.js"
echo "import $COMPONENTE from './$COMPONENTE';" >> "${COMPONENTE}.test.js"
echo "" >> "${COMPONENTE}.test.js"
echo "test('renders $COMPONENTE component', () => {" >> "${COMPONENTE}.test.js"
echo "  const { getByText } = render(<$COMPONENTE />);" >> "${COMPONENTE}.test.js"
echo "  const linkElement = getByText(/$COMPONENTE/i);" >> "${COMPONENTE}.test.js"
echo "  expect(linkElement).toBeInTheDocument();" >> "${COMPONENTE}.test.js"
echo "});" >> "${COMPONENTE}.test.js"

# Inform the user everything was OK
echo "React component '$COMPONENTE' created in folder '$CARPETA'."

I’ve commented on each section of the script to better understand what is done in each part. Basically, we obtain the folder and component name from the user, check if the SRC folder exists. If it does, we proceed to create a new folder. Inside this folder, we begin generating the component along with its test file

And now, how do I run it?

First, make sure that the script is created in a file with a .sh extension in the root path of the project like this:

Now in our terminal, we simply type ./[script filename] [folder name] [component name]

./create-react-component.sh MiCarpeta MiComponente

Let’s imagine we have the following structure: inside SRC, we have the ATOMS folder, and within it, various components. We want to create our component within ATOMS. For this, in our script, we just set the folder name as the path from src/atoms/new folder.

./create-react-component.sh atoms/input input

2-Check the version of NODE.js and NPM.

It often happens when someone is new to the project; they need to set up their environment to use the same versions that we have installed for the project. Sometimes, something so simple is overlooked. So, we can create a script that takes care of validating this information, as follows:

# Define expected versions
expected_node_version="14.17.3"
expected_npm_version="6.14.13"

# Get the current version of Node.js and npm
current_node_version=$(node -v 2>&1)
current_npm_version=$(npm -v 2>&1)

echo "Current version of Node.js: $current_node_version"
echo "Current version npm: $current_npm_version"

# Comparar las versiones
if [ "$current_node_version" = "$expected_node_version" ] && [ "$current_npm_version" = "$expected_npm_version" ]; then
  echo "The versions match."
else
  echo "WARNING: The versions do not match. Node.js expected $expected_node_version and npm $expected_npm_version."
fi

It is worth noting that in this script, the required versions are hardcoded. So, your task is to make them dynamic so that if someday you update these versions for the project, you don’t have to modify this file as well. But to start, this script works well. To run it, simply do the following:

 ./check-version.sh

Improvements that can be made to these scripts:

1. Inform the user if a component with the entered name already exists, and avoid overwriting it.
2. Check the Node.js versions that the project uses without hardcoding them in the script.

However, these improvements will be the task of the readers or for a future post.

like always here is the code:

GitHub - danilo95/Bash-script-for-react