Extension make a developer life easy by providing some quick solution for a problem. Here are my top 7 VSCode extensions that will surely make your life easy.
Hello World !!! 🌏
In following article I’ve talked about few things that may seems small at one glance but they will impact on your code at broad scale.
Here are the few tips by which we can ensure, that we are writing clean and error free code.
1.
null
check 💁🏻♂️
I learned this hard way. We have to always do a null
check before accessing a variable
or key
in object. Sometimes we thought that this will never be null
why should I bother to add an extra if
of try
block. But trust me web is full…
In mobile friendly app development performance of App really matters. Any one extra render can affect the performance of our application.
Before getting into the solution first lets understand how react renders the changes and what causes the wasted render.
React re-renders the UI whenever state
associated with any component changes. And if this state
is passed as a prop
to components, then each component receiving this state
as a prop
will rendered. This is the how react should work right? So where is the issue? The issue is in JS referential equallity. In Javascript objects
are of non-primitive types…
In JavaScript lot of actions are event-driven. In our daily practice we use such event and actions a lot. onClick
onChange
are the examples of some events and we perform some actions whenever these event occurs.
Using Pub/Sub we can leverage 😃 this event driven approach and introduce it it our logical side of application. To isolate business logic from our application layer.
Before getting into the code lets understand Pub/Sub by an analogy of Newsletter subscription. Suppose 🤔 we have a newsletter subscription. Whenever new article is published, the newly baked ♨️ article is delivered to our mailbox 📧…
In react-application
we encounter many scenarios where we want to switch to another route based on API
response. For example when user submits a form, based on success failure we want our application to redirect him to certain specific page. Generally we accomplish this by creating aflag
variable. Which keeps track of our decision whether to redirect or not. We make one state
variable and update it, whether we want a redirection or not. Here is the code sample for the same.
Class Version
Generally for two purpose we prefer to use different environment in our application:
1. For security reasons: As JS being client side we can’t risk 🔴 putting our sensitive information in a constant file when we host our code in git or any other version control websites.
2. For Testing before deploying to production: As we never want to get bugs 🐛 in our production just after we push a new build. We prefer to test it on different environment with different setting and data which reduces the changes of getting new bugs 👌.
When we create our reactjs application…
In order to add asynchronous behaviour to redux we use a middleware called redux-thunk.
Just like regular action creator in redux return an action object, redux-thunk action creator return a function. And what special about this function?
It has an argument which we use to dispatch actions based on our async work.
So lets see how we can add redux thunk in our react-app.
Step 1: Create a react app. (npx create-react-app reduxthunk)
Step 2: Install required packages: npm install redux react-redux redux-thunk
Step 3: Create a folder name it redux
we will put all our files related to redux…
A passionate iOS Developer since 2014.