26th Apr 2021

React JS tips and tricks

Web

Written By, Vishal Kacha

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:

  • Follow Steps
    react-js-eslint-step-1
    react-js-eslint-step-2
    react-js-eslint-step-3
    react-js-eslint-step-4
    react-js-eslint-step-5
    react-js-eslint-step-6
    react-js-eslint-step-7

    • Also you can check dependencies in the package.json file
    • How to Add Rules in .eslintrc.js
      react-js-eslintjs
    • 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
      react-js-error
    • 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
    react-js-eslint-extension

    • If have found a problem like below then click on message
      react-js-eslint-problem
    • Apply Allow Everywhere
      react-js-allow-everywhere

Issue in React Script Start Project

react-js-issue
Steps

  1. Delete node_modules
  2. Open package.json file
  3. Add/Change Latest Version for react, react-dom and react-script see below image
    react-js-version
  4. 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:

  1. Run Command npm install patch-package –save-dev
  2. If have made changes in node_modules in any library then run following command
    1. Ex. npx patch-package library1
  3. npx patch-package “package-banana” – this creates a folder /patches/library1.patch
    ex.
    react-js-patches
  4. Add in package.json add
    1. 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

  • React Snippet is feature/extension for Visual Studio Code
    react-js-snippets
  • 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.
    react-js-shortcut
    react-js-shortcut-output

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.

Written By,

Jr. Web Designer at Yudiz Solutions Pvt. Ltd