DEV Community: Rajiv Chaulagain

Best Practices for Writing Clean and Maintainable JavaScript Code

Rajiv Chaulagain — Tue, 22 Oct 2024 08:18:53 +0000

1. Meaningful Variable and Function Names:
Tip: Use descriptive names that clearly indicate the purpose of the variable or function.
Example:

Copy code
// Bad
const x = calculate(5);

// Good
const totalPrice = calculatePrice(5);

2. Descriptive Comments:
Tip: Write concise but meaningful comments to explain complex logic or intent. Comments should clarify why something is done, not what is being done (which should be clear from the code itself).
Example:

// Bad
// Loops through the array
array.forEach(item => doSomething(item));

// Good
// Process each item to filter out non-active users
array.forEach(item => filterActiveUsers(item));

3. Single Responsibility Principle:
Tip: Ensure that functions and methods perform one specific task, making them reusable and easy to debug.
Example:

// Bad
function handleUserLoginAndDisplayUserProfile() { /* multiple tasks */ }

// Good
function handleUserLogin() { /* one task */ }
function displayUserProfile() { /* one task */ }

4. Consistent Formatting and Style:
Tip: Use consistent code formatting (indentation, spaces) and follow style guidelines (camelCase for variables, PascalCase for classes, etc.).
Example:

js
Copy code
// Bad
function fetchData(){return 'data'}

// Good
function fetchData() {
  return 'data';
}

5. Avoid Magic Numbers and Strings:
Tip: Use named constants instead of hardcoding numbers or strings, which makes your code more readable and maintainable.
Example:

// Bad
const discount = total * 0.1;

// Good
const DISCOUNT_RATE = 0.1;
const discount = total * DISCOUNT_RATE;

6. Write Modular Code:
Tip: Break down your code into smaller, reusable modules or functions. This increases reusability and maintainability.
Example:

// Bad
function processOrder(order) { /* many tasks */ }

// Good
function validateOrder(order) { /* one task */ }
function calculateTotal(order) { /* one task */ }

7. Use Meaningful Error Handling:
Tip: Catch and handle errors properly, giving meaningful feedback to developers or users.
Example:

// Bad
try {
  processOrder(order);
} catch (e) {
  console.log(e);
}

// Good
try {
  processOrder(order);
} catch (error) {
  console.error(`Failed to process order: ${error.message}`);
}

8. DRY Principle (Don't Repeat Yourself):
Tip: Avoid duplicating code by refactoring common logic into functions or modules.
Example:

// Bad
const userAge = getUserAge();
const userName = getUserName();

// Good
function getUserDetails() {
  return {
    age: getUserAge(),
    name: getUserName(),
  };
}

When to use if-else, switch-case, or functions like Array.prototype.includes() or Array.prototype.find()

Rajiv Chaulagain — Fri, 27 Sep 2024 09:07:11 +0000

In JavaScript, choosing between if-else, switch-case, or functions like Array.prototype.includes() or Array.prototype.find() depends on the specific use case, readability, performance, and the type of conditions you are handling. Below is a comparison of these constructs, along with suggestions for when to use each.

1. if-else:
Purpose: Evaluates a sequence of conditions and executes code based on whether a condition is true or false.
Behavior: Each condition is checked in sequence, and the first matching condition is executed.
Use case: Best suited for handling boolean logic, range checks, or complex conditions.
Example:

let age = 25;

if (age < 18) {
    console.log('Too young');
} else if (age >= 18 && age <= 65) {
    console.log('Eligible for work');
} else {
    console.log('Retired');
}

When to use:
Complex or multiple conditions: Use if-else when you need to check more complex or non-discrete conditions, such as logical combinations, ranges, or dynamic evaluations.
Small number of conditions: Ideal for situations where there are only a few conditions to evaluate.
Flexible condition evaluation: if-else allows you to combine logical operators (&&, ||, etc.) for more complex checks.

2. switch-case:
Purpose: Compares a single expression (often a variable or value) against multiple possible cases.
Behavior: The expression is evaluated once, and the corresponding case block is executed. If no cases match, the default block runs.
Use case: Best suited for discrete or enumerated values where multiple cases need to be evaluated.
Example:

let day = 'Monday';

switch (day) {
    case 'Monday':
        console.log('Start of the week');
        break;
    case 'Wednesday':
        console.log('Midweek');
        break;
    case 'Friday':
        console.log('Almost weekend');
        break;
    default:
        console.log('Unknown day');
}

When to use:
Discrete values: Use switch-case when you have a single variable that could take one of a limited number of known values (e.g., enums, constants, or states).
Many possible values: It’s ideal when you have multiple specific cases to handle.
Readability: switch-case makes code easier to read than using multiple if-else for discrete values.

3. Functions like includes() and find():
Purpose: Used to check for the existence of a value in an array (includes()) or to find an object/value within an array (find()).
Behavior: These functions operate on arrays, returning a boolean (includes) or the found value (find).
Use case: Best suited for array-based checks, such as finding if a value is present in a list or array of objects.

Example of includes():

const fruits = ['apple', 'banana', 'cherry'];

if (fruits.includes('banana')) {
    console.log('We have bananas!');
} else {
    console.log('No bananas here');
}

Example of find():

const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
];

const user = users.find(user => user.id === 2);
console.log(user);  // Output: { id: 2, name: 'Bob' }

When to use:

Array lookups: Use includes() when you want to check if a value exists in an array.
Finding objects in arrays: Use find() when searching for an object in an array of objects based on a specific condition.
Efficient membership tests: These methods are particularly effective when you need to check for the presence of an item in a large dataset (array).

Running an Android App in React-Native CLI

Rajiv Chaulagain — Thu, 20 Jun 2024 05:03:04 +0000

This guide will walk you through the steps to run an Android app using React Native CLI. By following these steps, you can ensure your development environment is properly set up and your application runs smoothly on your connected device.

Steps

Step 1: Check Connected Devices

Connect Your Device:
- Use a USB cable to connect your PC/Mac to your testing mobile phone.
- Make sure USB debugging is enabled on your mobile phone.
Check Connected Devices:
- Open a terminal on your PC/Mac.
- Run the following command to check the list of connected devices:

adb devices

This command will show a list of devices attached. If your device appears in the list, it is correctly connected.

Step 2: Clean Previous Builds

Run the following command to clean the previous cache and builds. This helps prevent unwanted bugs:

./gradlew clean

Step 3: Run the React Native App

Go back to the root directory of your project:
Run the React Native App:

npx react-native run-android

Optional: Reset Metro Bundler Cache:

npx react-native start --reset-cache

Step 4: Generate the Debug APK

Build the Debug APK:
By running the previous commands, React Native will create an APK file named debug.apk for testing purposes.

Essential React Libraries for Web Development in 2024

Rajiv Chaulagain — Fri, 07 Jun 2024 08:49:08 +0000

In 2024, the React ecosystem is thriving with numerous libraries that significantly simplify web application development. As a React developer, I've found several libraries indispensable for creating efficient and visually appealing applications. Here's a rundown of the libraries I frequently use and recommend:

UI Library:

Mantine UI: In 2024, Mantine UI has become my go-to choice for a comprehensive UI library. It stands out due to its unique and highly practical components that are ready to use out of the box. This library eliminates the need to design components from scratch, allowing developers to focus more on functionality. Mantine also offers its own hooks for form state management, which is incredibly convenient. For handling complex tables, I rely on mantine-react-table. I highly recommend trying Mantine UI in your projects and sharing your experience.

State Management (Global and Server-Side):

For global state management, I use a combination of react-hooks with react-context and react-reducer hooks. For smaller state management tasks, I sometimes incorporate react-stateful hooks.
For server-side data fetching, react-query is my preferred choice. It efficiently handles data fetching and mutations, making server-side state management straightforward. I also use axios for making HTTP requests, which pairs well with react-query.

Charts:

While Mantine provides some minimal charting capabilities, for more complex charting needs, I turn to nivo charts. Nivo offers a rich set of features for creating beautiful and interactive charts.
PDF Generation:

For generating PDFs

react-to-pdf is my tool of choice. It simplifies the process of converting React components into PDF documents, making it a valuable addition to my development toolkit.

These libraries have proven to be incredibly valuable in my development workflow, enhancing productivity and the overall quality of the applications I build. I encourage you to explore these tools and see how they can benefit your projects.

Let's print fibonacci series with js with all explanation and problem solving.

Rajiv Chaulagain — Thu, 20 Oct 2022 07:44:39 +0000

Here, Problem solving is the only skill a programmer needs so I would like to show some case for it.
In above question we can find that we have to print fibonacci series,

Now fibonacci series looks like this :
1 , 1, 2 , 3 , 5 , 8 ......
Now, we have to print this fibonacci series so first thing we need is the pattern here , we find that the first number and second number while adding gives the third number.
For eg : 1 + 1 -> 2 , 1 + 2 -> 3 , 2 + 3 -> 5 .

woo we found the pattern half of the solution is done. Try solving this problem into some paper before writing on code.
Then start coding immediately

let a = 0;
let b = 1;
let c;
for (let index = 0; index < 10; index++) {
    console.log(b);
    c = a + b
    a = b 
    b = c
}

Now what we have done .
1 -> Declaring variable a , b ,c
2 -> looping so that we can get how much interval or value we want
3 -> logging the first value as b that gives 1.
4 -> Now variable c adds two variable 1 and 0 in initial
5 -> a takes value of b and b takes value of c

Conclusion,
Hence this is about the problem solving not about coding

How to Get Started With React – A Beginner's Guide Part -2

Rajiv Chaulagain — Mon, 17 Oct 2022 10:20:46 +0000

If you have read my first blog then you have got some tips about starting with react js. Today let's learn more about react js and start creating your web apps.

Why react js ?

-> React js is very popular library and it is popular because you can create your app with minimal code meaning you can write code once and reuse it again and again so the development would be faster and also react uses some extensions like jsx which lets you use html tags with javascript so that you have no need to append or manipulate dom , in simple terms React js is declarative.

Virtual vs Real Dom.

-> If you are familiar with Js then you might know about DOM. Dom is basically a Document model in browser that contains the html elements or tags. Basically with help of js we manipulate those DOM elements to create an awesome user experience. So in react ,the concept of virtual dom is quite interesting.React js creates a virtual dom that takes all our work rather than in real dom and when we work during development our components are rendered as tree structure in virtual dom.React then compares out virtual dom with real-dom and only changes those components that's need to be changed meaning it doesn't change all the code overtime so , our app would render much faster than the ordinary , typical websites. for eg , if you create a component and render the date in the component then you can find the component only is ticking rather than the whole page.

To get start with react there is a package so simply create
your development server with below code

npx create-react-app my-app

Now , you have created a react app named as my-app
now if you go to the package.json -> scripts you can find something like this,

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Start -> It starts your react app eg, npm start
Build -> It build your app for production and genrates a static file. eg, npm run build,
Test -> It is used to test you app or any components.
Eject -> If you want to revert the app then eject.

so, when we do npm start , the development start's in port 3000;

Now you can find the main file index.js that renders our whole app using react-dom. The code looks like this.

import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
          <React.StrictMode>
            <App />
          </React.StrictMode>
);

Here, basically we have appended our app component to the div tag.There is only one html tag with

.
We take this root and append our js inside this div tag.
Now , our App.js we will be rendered and it is termed as a component in react js.

1. Component in react js.

-> In react js ,component is termed as the building block. We create small components and later enscapulate them to create a complex UI.Component basically takes props as input and returns jsx.

In App.js,

const App = (some props) => {

   return (
    // it returns jsx 
   // <> </> this is and react fragment.
      <>This an simple app</>
 )
}

Here , we created an simple App component and hence some rules of component are :

Use first letter of component as capital eg : App , Navbar etc. else it will be treated as regular functions.
Call the component by close the tag else JSX treat it as error.
You can nest as much as components as you want.

for eg :

export const Navbar = () => {
return (
<div>This is a navbar</div>
)
};

export const App = () => {
return (
<App />
)}

2. JSX

-> JSX is simply an javascript xml that helps to use html and javascript in single place
for eg :

const App = () => {
   const name = "rajiv";
    return (
     <h1>My name is {name}</h1>
)
}

Some rules while using JSX are :
a. Component should have only one div tag.
eg:

const App = () => {
return (
   <>Hello</>
   <>Wow</>
)};

It throws error so , it would be wrap on single tag.

b. Jsx is compiled to normal html by babel.

Conclusion,

I guess now you can get started and I will bring part-3. Till then if any problem consult me ,
https://www.facebook.com/Rajiv.chaulgain/,
https://github.com/rajivchaulagain

How to Get Started With React – A Beginner's Guide

Rajiv Chaulagain — Sat, 15 Oct 2022 06:14:05 +0000

React js is a javascript library and it is also termed as a framework because it can be directly be compared with javascript frameworks like angular , view.

Most people including me used react because of it’s huge community support and you can find many article and solutions like this about react js everywhere on goggle.

I used react js because it was so popular and in demand , but after using it I felt that this is the fastest way to design web apps and It was amazing experience while coding because now frontend is not only about designing but it is also about implementing business logics and techniques.

Many developers want to learn react but learning react can be difficult if you directly jump into in without learning basics of Javascript.

Some of the terms to be learned before diving into react js are :

HTML

— Learn basics of HTML 5 like div tags , classes and id’s of HTML and stuffs like semantic tags as (section , aside , header , footer);

CSS

— Learning CSS helps to learn react js faster cause styling is necessity for front-end developers.

JAVASCRIPT

— Learning basics of Js is important as what we use is only ES6 stand for EcmaScript 2015. Learn following things in ES6 like : map method , filter method , template strings , var , let , const , hoisting , arrow functions , this keyword , class in js , OOP in js , destructuring etc.

REACT DOCS

— Learn react docs more than anything in world then you feel react js is so easy that a common man learn do it within months.

Conclusion

Now, create more projects like todolist, ecommerce website, api covid tracker and many crud projects to be used in react.

How to upload image with base64 and validate it with formik

Rajiv Chaulagain — Sat, 15 Oct 2022 06:08:07 +0000

Lets upload image with formik and react js.

Now,Base64 is a group of binary-to-text encoding schemes that represent binary data (more specifically, a sequence of 8-bit bytes) in sequences of 24 bits that can be represented by four 6-bit Base64 digits.

Now we will create a single image .

const singleImage = () => {

 const convertToBase64 = (file) => {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = () => {
        resolve(fileReader.result);
      };
      fileReader.onerror = (error) => {
        reject(error);
      };
    });
  };

  const handleIcon = async (e, setFieldValue) => {
    const file = e.target.files[0];
       //check the size of image 
    if (file?.size/1024/1024 < 2) {
      const base64 = await convertToBase64(file);
      setFieldValue('profile_image', base64);
    }
    else {
      toast.error('Image size must be of 2MB or less');
    };
  };

  return (
       <div className="mb-3 form-group">
          <label className="required">Upload Photo</label>
               <Field name='profile_image'>
                   {({ form, field }) => {
                     const { setFieldValue } = form
                        return (
                          <input
                            type="file"
                             className='form-control'
                              required
                          onChange={(e) => handleIcon(e, setFieldValue)}
                             />
                            )
                          }}
                     </Field>
                   <div className="text-danger">
               <ErrorMessage name="profile_image" />
         </div>
     </div>
 )
};

So, here formik handles the image and then we take the image from onchange function and check the size and if the size is less than the condition then , convertToBase64 function converts the image into base64 as string and hence the image is converted to base64.

const multipleImage = () => {

export const convertToBase64 = (file) => {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = () => {
        resolve(fileReader.result);
      };
      fileReader.onerror = (error) => {
        reject(error);
      };
    });
  };

const handleProfile = async (e, setFieldValue) => {
    const file = e.target.files[0];
    if (file?.size / 1024 / 1024 < 2) {
        const base64 = await convertToBase64(file);
        setFieldValue('image', base64);
    }
    else {
        toast.error('Image size must be of 2MB or less');
    };

return (
          <div className="mb-3 form-group">
            <label>Upload Cover Photo</label>
            <Field name={name}>
                {({ form, field }) => {
                    const { setFieldValue } = form
                    return (
                        <input
                            type="file"
                            className='form-control'
                            onChange={(e) => handleProfile(e, setFieldValue)}
                        />
                    )
                }}
            </Field>
        </div>
)
}

Conclusion

Hence in the formik data we can find our image as converted to base64.

React Query Custom Hooks Example in react js

Rajiv Chaulagain — Sat, 15 Oct 2022 04:39:53 +0000

Let's create a custom hook with react query.
Now we will create a component that fetches list of products with react query.

Now in Product.js component ,

const Product = () => {
  const products = useProducts()
   if(products.isLoading) return "Loading ....."
   if(products.isError) return "Error ...." 
  return(
   <>
      products.map((product) => (
     <h4 key={product.id}>{product.title}</h4>
  ))
   </>
)
}

Lets create a hook as useProducts.js

const useProducts = () => {
  return useQuery(['products'] , getProducts)
};

Now if we want to fetch single data then we can pass id

const Product = () => {
const params = useParams();
const id = Number(params?.id)
  const product = useProduct(id)
   if(product.isLoading) return "Loading ....."
   if(product.isError) return "Error ...." 
  return(
   <>
     <h4>{product.title}</h4>
  ))
   </>
)
}

const useProduct = (id) => {
  return useQuery(['product' , id] , () => getProduct(id))
};

Now for post and edit,

const AddProduct = () => {
  const mutation = useAddProduct()
  const [data , setData] = useState('');
  return(
   <>
    <input value={data} onChange={(e) => 
        setData(e.target.value) } /> 
    <button onClick={mutation.mutate(data)}></button>
   </>
  )
)
};

const useAddProduct = () => {
  return useMutation(postProduct , {
  onSuccess : () => {
    toast.success(`Added successfully`)
  }
})
};

for edit ,

const EditProduct = () => {
  const params = useParams();
  const id = Number(params.id);
  const mutation = useEditProduct()
  const [data , setData] = useState('');
  return(
   <>
    <input value={data} onChange={(e) => 
        setData(e.target.value) } /> 
    <button onClick={mutation.mutate(data , id)}></button>
   </>
  )
)
};

const useEditProduct = () => {
  return useMutation(editProduct , {
  onSuccess : () => {
    toast.success(`edited successfully`)
  }
})
};

Conclusion,

This is the best way to manage the server side data and separate the business logics with the UI components and hence anyone from outer world can check , edit and understand the code. This is the best way to work with react and only the needed component will use the data from the custom hook.

React Hook Form - Combined Add/Edit (Create/Update) Form Example

Rajiv Chaulagain — Fri, 14 Oct 2022 15:59:45 +0000

Today we are going to perform a crud app where we will add and edit the form with same component .
We will use react-router-dom , formik and yup. so let's dive to the code.

Create a component as AddEdit.js

import React, { useEffect, useState } from 'react'
import { Formik, Form } from 'formik'
import { useMutation, useQuery, useQueryClient } from 'react-query'


const AddEdit = () => {

  const history = useHistory()

  const user = useUser()

  const params: any = useParams()

  const queryClient = useQueryClient()

  const id: number = Number(params?.id)

  const isAddMode = !id

  const { data, isLoading, isError } = useQuery(['data', id], () => getData(id), {
    enabled: !!id,
  })

  const onFormSubmit = (values: any) => {
    isAddMode ? addFnc : editFnc
  }

  const initValues = {
    name: isAddMode ? '' : data?.name
  }

  return (
    <>
      <div className=''>
        <Formik validationSchema={Schema} initialValues= {initValues} onSubmit={onFormSubmit}>
          {(props) => (
            <Form className='w-100 pb-10'>
              <Field name="name" />
              <button
                type='submit'>
                  'Submit'
              </button>
            </Form>
          )}
        </Formik>
      </div>
    </>
  )
}

export default AddEdit

So here , we created a function and hence we added the code.

React Hooks : How to use Authorization in react js with custom hook.

Rajiv Chaulagain — Fri, 14 Oct 2022 15:31:35 +0000

Here today I am gonna use custom hook and create a authorization for admin and other manager roles.

Lets start by creating a custom hook as useUserRole.js

import {useEffect} from 'react'
import { toast } from 'react-toastify'

import {useAuth} from './useAuth'

export const useUserRole = (allowedRoles) => {
  const {session} = useAuth()
  useEffect(() => {
    if (!allowedRoles.includes(session?.user?.role)) {
      localStorage.removeItem('session')
      window.location.reload()
      toast.error(`Unauthorized`)
    }
  }, [allowedRoles , session])
  return true
}

here , we created an custom hook that takes allowedRoles and we are checking the allowedRoles with the role on our session during the login

here the condition is , if the allowedRoles is equal to the role in session then they are allowed to view the provided route else they will be redirect to login page.

Now we can specify the roles.

export const ROLE = {
  Admin: 'Admin',
  Manager: 'Manager',
  User: 'User'
}

Now in any component like Blog.js


import React, { useState } from 'react'

import { useUserRole } from '../../../hooks/useUserRole'
import { ROLE } from '../../../_helpers/Role'

const Blog = () => {

//checking the role
  useUserRole([ROLE.Admin]);

  return ( 
        <>Blog page</>
  )
}

export default Blog

Conclusion

Hence , the authorization is success and hence we can reuse the hook for the protected routes.

TanStack Query v4 Powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte

Rajiv Chaulagain — Fri, 14 Oct 2022 15:22:39 +0000

Let's learn react query V4.

React Query is often described as the missing data-fetching library for React. Still, in more technical terms, it makes fetching, caching, synchronizing, and updating server state in your React applications a breeze.

Why react query ?
-> React query as often said is used for state management of server data and using react query the we should write less code so it is also an alternate of redux toolkit.

Starting with react-query we need to provide a context provider given by react-query and then we can use the hook provided by react-query , Let's look onto and example.

In app.js file configure by following ways,

import {
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'

// Create a client
const queryClient = new QueryClient()

export function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
    //out app goes here......
    </QueryClientProvider>
  )
}

Now inside our component we can access the data.

So for fetching data in component Products.js ,

`import {
useQuery,
} from '@tanstack/react-query'
import { getProducts } from '../my-api'

function Products() {

// Queries
const {data , isLoading , isError} = useQuery(['products'], getProducts)
if(isLoading) return "Loading ..."
if(isError) return "Error ..."

//then we can assume the data is success

return (

{product.title}

)
}`

Here , we provided and unique key as "products" inside useQuery hook that provides the caching and it should be unique.
The getProducts function is a promise based function that returns data if success and throws error if any error

Here we used the hook called useQuery from react-query that provides following things.

data -> It gives the data from server eg : data : [{title : 'title'}]
isLoading -> It provides the loading state as boolean and till our data is being fetched and currently in loading state.
isError -> if there is any problem while fetching data the error will be provided on error state. some more ways are :-
error -> It provides the error message .
isFetching -> after every render react-query fetches and isFetching will be true while isLoading is only true during initial render.

Now for posting data we use Next hook as useMutation .

so In AddProduct Component ,


mport {
  useMutation,
  useQueryClient,
} from '@tanstack/react-query';

const AddProducts = () => {
const [data , setData] = useState('');
 // Access the client
  const queryClient = useQueryClient();

const mutation = useMutation(mutationFn , {
onSuccess : () => {
   // Invalidate and refetch
      queryClient.invalidateQueries(['products'])}
}
)

return (
<>
  <input value={data} setData={(e) => setData(e.target.value)} />
<button onClick={mutation.mutate(data)}>Submit</button> 
</>
)
}

Here, useMutation hooks take mutation function.
here mutate is the callback function that takes the data and provides in useMutation hook.