React Native is gaining popularity these days and many people try to create React Native components out of their existing React ones. This process is not always straightforward so we have created some quick tips to make the migration smooth and error-free.

The first and most important step in migration is to replace all the HTML elements — as React Native doesn’t support HTML — with the React Native components. For instance, div/section should be replaced with View component and h1 , h2 , … h6 , p and similar text-based elements should be replaced with Text component. For example:


Simple Tricks and Tips to use Styled-Components in a better way.

In styled-components, we can get access to the props of the component and create dynamic styles as follows.


3 Minute React is a new series in which we will cover interesting and not so common thing in React. In this article we will see how to achieve synchronous behavior in setState and avoid batching of multiple setStates.

Link to the youtube tutorial:

In general, we don’t mutate the state in react and we use setState to change the state of the component. Look at the following example:

In the above piece of code, we have a component that displays the count from the state. It has two buttons — Batched setState and Synchronous setState.

The Batched setState…


This is a second part of two part series about Prototypal inheritance in Javascript. You can find the previous part here.

As we all know, the instanceof operator returns true if an object is a instance of a class/ function (ES5) and vice versa. Lets have a look at below example:


Prototypal Inheritance is still a not much explored space in JavaScript by many developers and holds a important place in the learning curve of the language. This article will be a brush up on this space covering various topics on high level.

  1. Prototype chain
  2. Prototype Delegation through New Keyword
  3. For in Loop with Prototype
  4. Static methods
  5. Instanceof Operator
  6. defineProperty
  7. OLOO (Object Linking to Other Objects)

1 — Prototype Chain:

Prototype chaining is used to build new types of objects based on existing ones. Constructor functions have a property called prototype. Adding properties and methods to the prototype property will automatically…


NextJS may be the new Sensation in the UI world. It is a bunch of Web tools that let us start building an application in a very short span of time. It comes with a lot of advantages. People aware of NextJS may dive directly into the Migration part.

NextJS is a Javascript library that uses and elevates the usage of very famous tools and frameworks in the frontend universe. Likely to name a few — Webpack, React, Babel, etc.

What do we gain through NextJS?

  • Server-rendered by default
  • Automatic code splitting for faster page loads
  • Simple client-side routing (page…


Animations have become an inseparable part of the web. Though it has a positive effect on the UX, it undeniably affects the performance when not implemented properly. In this article, we will compare and contrast the three ways of animations using JavaScript.

Conventional Animations

requestAnimationFrame

Element.animate()

Please check the below Codepen, wherein I have implemented the same animation using all three methods.

Conventional Animations:

In the conventional method of animation, we use setInterval and setTimeout to animate objects on the screen. This has serious side effects on the performance. As these Timer APIs undergo an Event loop, the timing may not…


With JavaScript Release 1.8.5, we are in a situation to watch our tails when we use JSON.parse(). The following feature may not be a game changer, but if not properly taken care, might end up being lethal to the application.

Trailing commas:

It is considered to add Trailing comma during object creation, as below, for two reasons:

  1. When we add a new property, it will be easy to add it in new line
  2. Also, version control wont create a diff when we add a new property.
let sampleObject = {  
id : "ABC123",
name: "Test Name",
age : 25,
}

JSON.parse() :

On the…


Generally, we get to deal with nested objects with higher depths as well. It becomes really challenging to check if they exist or undefined. At times such mistakes may break the UI as well. If we go for nested checks, the code looks clumsy. The following package comes in handy to solve this issue.

Npm Package: https://www.npmjs.com/package/is-obj-props

Details:

Package name: is-obj-props

A small, yet very useful npm package, which is used to check if an object possess a property or not. Checks for any depth of nested objects

- If the object has the property, it will return the value


We had to build a Web app in NodeJS/Express + React/Redux + MongoDB. In the app, we planned to integrate multiple payment options like PayTM, PayUMoney, and CCAvenue. While we had no issues with PayTM integration (Their docs were clear), We really had really tough time with PayUMoney integration. Their documents weren't very clear and hence I thought let me make my first Medium post on it. Hope it helps :-)

BOLT CHECKOUT:

PayUMoney has a feature called BOLT Checkout, wherein, the users don't have to be redirected to a dedicated page and they can make payment using a Popup…

Vilva Athiban P B

6+ years of Experience in React-Redux / NodeJS / GraphQL / TypeScript. https://vilvaathiban.com

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