let suppose your application fetch settings from your backend and these settings have around like more then 40+ fields like isDarkMode, isSiteUnderConstruction etc. Now let assume that this settings fetch like mostly after 5 to 10 mins for some reasons and on every request you are receiving exact same response as previous. Now that you have the same response most of the time why Backend required to send same response again and again instead of you can just notify the frontend that “hey you have the same response previously, can't you use that again?”. Now front end be like “Hmm…


This artical is mostly related to beginner which are working on React for learning and want to learn as much as they can to get the best code practice concepts.

Default Props:

Here i will not spoon feed from basic but when we are calling a child component from any parent component we usually pass some props that later use in child component sometimes data having type array which are looping and here issue occur sometimes when data not transfer to child component but component render on screen same with some heading element etc, so for safety reason and don’t want to…


So I was working on a project in which requirement was to implement a video player which will play the Youtube video. since you all may be know that youtube video can be played by using iframe but bye using it, its more difficult to handle controls. So we decided to use Player library called “React-Player

but during using this library found it that they don’t have volume control function so we decided to create a custom controls panel for player by using their predefine methods also.


Let suppose you are working on a project and a feature come’s out to implement on it that , user has screen in which a list of hug data is showing in table or whatever form now the if the user want to add/create a new entity on this data set so he will click on create new and a new tab will open and a multi level form appear on screen. waittttttt…!!!

why we use a separate tab to create any entity??????

so here is why , because as i said earlier that we have a multi level form…


Utility functions are really good and powerful for every application , they can produce a good impact on application or on the code reviewer. let see some of the examples here to learn about them

  1. Name Concatenation
  2. Date Format
  3. Custom Tostify
  4. Convert Imagetobase64
  5. Image Extension Validation

Name Concatenation

name.concatenation.js

in this example, I simple place 3 conditions in function , the function will take an object as param,

first condition will check if lastname property is not present in data object then return only firstname

second condition will check if firstname property is not present in data object then return only lastname

thirsd…


so i was stuck in integrate stripe with REACT and Node.js to pay from card and since i have integrated it successfully i decided to write a artical on it to make it easy for others.

First you have to install these two libraries in react

  1. @stripe/stripe-js
  2. @stripe/react-stripe-js

import Elements from @stripe/react-stripe-js

and then wrap your payment component with Elements , import loadStripe from @stripe/stripe-js

this will load your strip account with the form you created for payment now make a variable with any name i did as stripePromise and use loadStripe() method this method will take your account publishableKey…


I was working on a project with some local software house developer and what i notice is they use to much console’s in application and these console are all in from local/development to production which is really bad for the application , so i decided to work on it and make a solution to this, we can create a custom function which will work for use to console data on some specific environment like on local/development but not on production,

i just create a util folder and in it i create a file name utils.js …


let say you are nob to React Native and want to become a pro in it, but i say no one is pro or you can say full developer in React Native because developer always learn , but also i can say you can be a next high paid developer if you focus and practice more and more to become a good/best developer

here are one core step to become a good developer , let say you want to build a boiler plate for React Native applications where you can use this boiler plate for most of the application so…


Here i write some stuff which can help beginner to follow the good practice/pattern for good coding skills and learning

Variables

  1. Always define variable with authentic name like if we defining array for users,
    Good Practice : users
    Bad Practice : data, userdata, usersarray etc.
  2. Always follow camelCase pattern when you define variables ,like if we have single user posts,
    Good Practice : singleUserPosts
    Bad Practice : data, userpost, userpostobj etc.

Functions

  1. When you are defining functions always define with authentic name also follow camelCase pattern,

Good Practice : getPosts, getUsers, updatePost, getApiFn, getSinglePostWithComments

Bad Practice : getdata, posts, getcomentposts etc.

  1. Create…

Zain Ahmed

Hi I am Zain Ahmed Software Engineer with passionate about try different technologies and try some cool staff, I create Blogs/Content on different platform.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store