I’m happy to learn about the tricks and things used in 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.
1npm install eslint --save-dev
1npx eslint --init
- Follow Steps
- Also you can check dependencies in the package.json file
- How to Add Rules in .eslintrc.js
semi: [‘error’, ‘never’],
‘comma-dangle’: [‘error’, ‘never’],
‘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
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.
- 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
- 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.
Reference Link :- http://johnliu.net/blog/2018/12/hot-patching-our-dependencies-with-patch-package
- 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
- TypeScript (.ts)
- 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
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.