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

[Nickie Noble]

To effectively work with React components, there are three essential Bash commands. First, npx create-react-app quickly sets up a new React project, creating the necessary files and structure to start development. Once your project is ready, npm start launches the development server, allowing you to see changes in real-time as you work on your components. Finally, when your application is ready for production, npm run build bundles your React app into optimized static files for deployment. These commands streamline the React development process, from setup to production-ready builds.
If anyone want to know about Gold price in Kuwait visit here