When working with web we often need to animate or reveal html elements by detecting the scroll position. One such example would be to display a container for a state variable and scroll. The IntersectionObserver is a useful interface to achieve such functionality.Read more “How to use IntersectionObserver to detect the position in React”
React components offer many advantages to break the code and implement web features. But when it comes to some features it could bit difficult to make it work. One such problem would be to listen to document click events and making the changes to components like dismissing dropdowns when pressed on the background.Read more “How to dismiss dropdowns when pressed on background with React.js”
React hooks have been very promising solution for most of the coding issues that React framework had in old days. But for novice developers, it could be hard to understand. Especially if you are moving from old react to new. One of the main problem is how to fetch data with useEffect in a proper way.Read more “How to fetch data with useEffect”
Stripe is a great way to make payments for your web or mobile platforms. Being a full service payment platform, Stripe also gives you a variety of SDKs to implement your backend and frontend code with the best compliance options. In this tutorial you will learn how to add styles to stripe elements if you don’t want to use existing styles of the card input.Read more “How to add styles to stripe elements without using CardElement”
React native always has been quite painful when it comes to performance compared to a native application. Today we will focus on increasing the performance and how to optimize react-native map view which has many pegs or markers.Read more “How to optimize react-native map views”
Why debounce with react hooks? We all come across that one button users keep on pressing until the data is loaded. Without guarding your code with every sort of if conditions, you can guard this by debouncing. For multiple tap scenarios, you can either propagate the event at the first tap/click or the last one.Read more “Avoid multiple clicks using debounce with react hooks”
- Number wrapper.
- Points to remember when coding.
Nginx Load Balancer with docker has become a fine recipe for managing services in closed systems. Although services like Kubernetes provide container orchestration, sometimes architecturally it could be an overkill. In this example, I will be showing how to use docker services using Nginx load balancer.
Here we are discussing creating react app using npx create-react-app. npx comes with npm 5.2 and higher.
Prerequisite: You need to install Node >= 8.10 on your machine.
Creating an app using npx command
npx create-react-app my-app
create-react-app set up the main structure of the application.
- npx – Execute npm package binaries ( a tool for executing node packages )
npx comes bundled with npm version 5.2+.
If you want to run a package using npm, you must specify that package in your package.json file and install a package locally on a project:
npm install package-name
npx is a npm package runner.
1. React Must Be in Scope
Let’s assume we are creating “helloWorld.jsx” like below, you can see there is a compilation error display as “’React’ must be in scope when using JSX react/react-in-jsx-scope.”
const element = <h1>Hello World!</h1> export default element;
This happens due to “React” import necessary in JSX file.The React library must also always be in scope from JSX code. To overcome this error “import React from “react”;” must be added into the file as follows.
If you are new to firebase and FCM this article will be useful to setup FCM Push Notification with React Native application. We will be using react-native-firebase(doc: https://rnfirebase.io/docs/v5.x.x/getting-started) module to retrieve token for the push notifications.
First, create the Firebase account and download the
google-services.json file from the console.
- Access your firebase account and go to the project settings from the top gear icon.
Read more “How to setup FCM Push Notification with React Native App”
Query definition in GraphQL is will be something you know now but not mastered. If you were going through the pages to troubleshoot frequent errors with Apollo Client which makes no sense, this post might help. First, the reason to create this post is,
- Most of the error logs are not descriptive and makes no clue on where the real error is.
- There can be so many different mistakes in coding the queries and difficulty in keeping on track of it.
And most importantly if I get into a trouble again, I can refer this 😉 Read more “Query definition in GraphQL and frequent errors with Apollo Client”
Recently, I had to create a AWS Lambda trigger for the AWS DynamoDB table events. The tricky part on this thing was to mutate AWS GraphQL using AWS Lambda with this DynamoDB event. The reason was I wanted all the clients which were subscribed to GraphQL to get this event with modified data.
Recently I came up with a react native app which needs to integrate AWS GraphQL. Its actually provided with AWS App Sync and a very convenient way if you want a quick pub-sub. The problem was I had to do mutations as a background asynchronous process and wanted to update the app state from that. When I went through the documents I found the AWSAppSyncClient which is an Apollo Client. Although it was promising the react native examples were more focusing towards react or react-native Components which was really making a mess. Read more “Use AWS GraphQL for React Native Message App”
Recently I got the opportunity to use DatePicker of antd library https://ant.design/components/date-picker/ for a react.js project. It was really cool to use that until I found it was using the whole antd library to import this single antd components. It wasn’t right and there was a solution introduced by the antd team. I just blogged it for anyone who will find it interesting. Read more “How to use antd components without the whole library”