3 Bash Commands to Effectively Work With React Components

Working with React Components can get daunting at times especially with large codebases.

In this post, I’m sharing 3 bash commands that I use to make some of that work easier.

Let’s dive in!

#1: Find Components With Hardcoded Text

For easier debugging you might have harcoded some values in code.

But it’s always a good idea to get rid of them before productionization. As hard coding text makes localization difficult which becomes a barrier in globalizing the app.

You can use the following command to find hardcoded text, so that your app can support multiple languages:

grep -Er "['\"].*['\"]" src/**/*.jsx | grep -v 'i18n' | tee hardcoded_text.log

#2: identify Components Missing a Test File

Another command which i regularly use to debug low test coverage.

It’s to find what all components miss a test.

Use this command to list all react components that are missing a test file:

find src -name '*.jsx' | sed 's/.jsx$/.test.js/' | while read file; do [ ! -f "$file" ] && echo "Missing test: $file"; done

#3: Check Deprecated Lifecycle Methods

If you’re upgrading your React codebase to a new version, first problem you’ll face is of deprecated lifecycle method.

Run the following bash command to proactively identify outdated code and smoother upgrades.

grep -Er '(componentWillMount|componentWillReceiveProps|componentWillUpdate)' src/**/*.jsx

And that’s it.

Hope you’d find these commands useful while working with React components.

Also, comment below which boring coding task are you procrastinating to automate?

Comments

[Miguel Neto]

Great stuff!

[Command Line Pirate 🏴‍☠️]

Glad you found it useful @miguelneto

[özkan pakdil]

that's really useful thanks

[Command Line Pirate 🏴‍☠️]

Thanks for reading @ozkanpakdil