Articles

What is React.js, and Why does it exist?

2022-01-18

(also known as ) is an that is used for building user interfaces, which are often single-page applications. The main principle of React is the creation and use of reusable UI components, which makes development easier and the user…

ReactJs

Javascript

Forget HOC and render props, Use React hooks to share state and state logic between components

2021-03-05

'cover' Photo by Lucas Sankey on Unsplash You can share state between parent-child components using . What if the components you are trying to share state don't have parent child relationship. Couple of ways that come to mind: Share using…

ReactJs

Javascript

Intro to React Devtools

2021-01-07

Guide to React DevTools 'cover' React Developers Tools is a Browser Extension that makes debugging easy and a developer's life simple. It allows you to inspect the React component hierarchy providing a view of the component tree and the…

ReactJs

Javascript

Create bootstrap like columns using css grid

2020-05-27

Create responsive columns Create a container and three children. These three children each will occupy 33% available width. We are going to use css grid to create this columns like structure. We are adding background and height to make…

css

Move/Install WSl distro from C drive to another drive

2020-04-26

'cover' I have a small 128GB SSD. I run out of space when I install ReactNative related dev tools. So I wanted to find a way to install/move my existing distro to different location than C drive. Move WSL to another drive Install tool…

Set environment variable in Windows and WSL Linux in terminal

2020-04-21

'cover' Windows set env variable from the command line Open command line. should print your . This env variable is set for the context of the current cmd line. Windows set env variable permanently using the command line Open the command…

GatsbyJs - Add environment variables

2020-04-20

Development Environment Create a new file named as at the root of your project. Add your variable to the newly created file. Example - Change your command to set environment. For Windows - For Linux - Restart your dev environment. So…

Windows Terminal Hacks

2020-04-06

'cover' Photo by Lewis Ngugi from Pexels Start Windows Terminal in current folder We can specify the default directory can open in. Open Windows Terminal Go to Settings option or You can press . This will open your config file. It should…

Windows10

Why I am starting a newsletter in 2020

2020-03-18

'cover' Photo by Debby Hudson on Unsplash I am starting a newsletter to connect with my social media friends and to stay in touch with them. I want to document my professional life journey. Share important milestones with you. I want us to…

personal

Guide to MobX with React

2020-01-07

Guide to MobX with React As we all know state management is the most important and core part of any react application and as react is just a UI library there is a need for something to take care of the state of our app. State management…

ReactJs

Javascript

Mobx

Navigation in React Native using React Navigation

2019-09-21

'cover' When you're building a mobile app, it will probably consist of multiple screens which the user will switch back and forth. Allowing the user to transition between different screens is a job of a navigator and this guide will cover…

How to add Push Notification in React Native for Android

2019-08-18

We will use to add push notification in our react-native app and hopefully save your time implementing it. Steps involved:- Create react-native project Create an application on firebase console Add react-native-firebase Add Firebase…

Windows10 WSL ssh Permission denied public key on new session

2019-07-22

Problem - When trying to connect using ssh, the existing key isn't recognized by the WSL shell. I had to manually add key each time on every session. TLDR- Add your hostname and key to ~/.ssh/config I have been using WSL from long time…

Windows10

WSL

Linux

React Native: How to parse url query parameters

2019-05-09

(Image Credit : unsplash.com) ##TLDR Solution If you are on a deadline (when we aren't ? eh) and don't care about the explaination. Copy the snippet and solve your problem. I didn't understand what's happening here so I bothered to blog…

ReactJs

ReactNative

Javascript

AngularJs styled form handling with ReactJs Hooks

2019-04-12

I loved AngularJs Form Validations I am biased to AngularJs (not to be confused by later version called as Angular). I started working in frontend space with AngularJs. I liked how easy it was for me. I shipped lot of complex functionality…

ReactJs

iOS App rejection: Info.plist file should contain a NSLocationAlwaysUsageDescription

2019-04-07

We received a message from iOS App Team about adding key in file. Our last build was rejected for this specific reason. Being clueless about what went wrong here. I googled up and found some interesting things. key needs to be added to…

ReactNative

iOS

Connect With Me!!

+91 9922234778

hi@kapil.io