DEV Community

Cover image for 3 Bash Commands to Effectively Work With React Components
Command Line Pirate 🏴‍☠️
Command Line Pirate 🏴‍☠️

Posted on

7

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
Enter fullscreen mode Exit fullscreen mode

#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
Enter fullscreen mode Exit fullscreen mode

#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
Enter fullscreen mode Exit fullscreen mode

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?

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (4)

Collapse
 
miguelneto profile image
Miguel Neto

Great stuff!

Collapse
 
cli-pirate profile image
Command Line Pirate 🏴‍☠️

Glad you found it useful @miguelneto

Collapse
 
ozkanpakdil profile image
özkan pakdil

that's really useful thanks

Collapse
 
cli-pirate profile image
Command Line Pirate 🏴‍☠️

Thanks for reading @ozkanpakdil

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!