Overview
At Yudiz, we have a diverse team of developers with an in-depth knowledge of various programming languages used in web development services.
And, I’m happy to learn about the tricks and things used in Javascript’s library react js. It is useful to code in a speedy way without error(s). ?
Uses and Benefits of ESLint
- ESLint is basically used to analyse code to find error(s) and fix them quickly.
- It finds Many Problems Automatically
- You can use and customize ESLint to work exactly the way you need it for your project.
Steps:
npm install eslint --save-dev
npx eslint --init
- Follow Steps
- Also you can check dependencies in the package.json file
- How to Add Rules in .eslintrc.js
- Ex.
“rules”: {
semi: [‘error’, ‘never’],
‘comma-dangle’: [‘error’, ‘never’],
‘no-underscore-dangle’: 0,
‘max-len’: 0,
‘import/no-cycle’: 0,
‘linebreak-style’: 0 } - If you have add rules like semicolon then raise error like this see below img
- After clicking on like Bulb Icon multiple options are displayed and select the option as per your preference.
- If you are using VSCode also check this below image
- If have found a problem like below then click on message
- Apply Allow Everywhere
- If have found a problem like below then click on message
Issue in React Script Start Project
Steps
- Delete node_modules
- Open package.json file
- Add/Change Latest Version for react, react-dom and react-script see below image
- After Changes of Version, Install node_module by running command npm i
Patches
What is Use of Patch?
If your favourite NPM Library has a problem that needs to be fixed but is not possible via changes from your src folder then patch-package is used which allows you to modify files in your node module folder and patch the changes whenever you update that library.
Steps:
- Run Command npm install patch-package –save-dev
- If have made changes in node_modules in any library then run following command
- Ex. npx patch-package library1
- npx patch-package “package-banana” – this creates a folder /patches/library1.patch
ex.
- Add in package.json add
- “postinstall”: “patch-package“
Now when anyone runs the latest npm install, the build chain will automatically grab that version of the library library1 and apply your patch.
React Snippet
- React Snippet is feature/extension for Visual Studio Code
- It creates structure by entering one word e.g. rfce creates functional component structure.
- Supported Extensions
- JavaScript (.js)
- TypeScript (.ts)
- JavaScript React (.jsx)
- TypeScript React (.tsx)
- Just Type Trigger in .jsx File attached below triggers
- rfc – Create React Functional Component
- rfce – Create React Functional Component and export
- rfced – Create React Functional Component and export it by default
- rfcpt – Create React Functional Component with PropTypes
- Ex.
Conclusion
I hope that this blog might be useful to you. We will shortly come up with an update about “More Tricks and Things” on the same channel, so stay in touch.
You may also like
Top Laravel Development Companies in India to Watch Out For in 2024
Today’s modern-day consumers demand aesthetically pleasing...
Laravel 11: Suite of New Features Unlocked!
Web application development is at an all time high. And, so is the PhP framework giant- Laravel. Wit...
Why Your Business Need to Hire a Professional Web Development Company?
Businesses of all walks and sizes hinge on web development c...
