JavaScript
There are instances where you need to map elements and have multiple refs for an array of React Elements handled from higher-order components. For that and any similar circumstances, you can use the following approach to address this.
Read more “Using multiple refs for an array of React Elements”
Chakra UI
Chakra UI is becoming very popular as an HTML styling framework that allows you to style components in a more React way rather than css. One of the problems that people face is how to add animations to the React components using Chakra UI Animations.
Read more “Chakra UI Animations”
JavaScript
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”
JavaScript
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”
JavaScript
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”
JavaScript
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”
JavaScript
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”
JavaScript
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.
npx create-react-app my-app
create-react-app set up the main structure of the application.
Important: If you previously installed create-react-app using npm, uninstall before using npx. Because npx always refer the latest version of libraries.
JavaScript
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.
JavaScript
This article will guide you on how to create a simple tab component using the react-tabs library.
Install react-tabs using
yarn add react-tabs why yarn ?
JavaScript
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.
Read more “The Common Errors that beginner React Developers Make”
AppSync
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”
JavaScript
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”
JavaScript
There are some instances where you need to debounce and avoid multiple clicks/taps on a button so that it will not generate the same action chain immediately with a consecutive click. An example would be an application with a touchscreen. If you click a button rapidly, that event will be generated more than once. As a solution, most of the time devs would block the UI until the action chain is completed. But this would be a bad experience if the user is blocked for any other interactions. A typical example can be a fetch call to update the state and if the invocation is asynchronous it could be causing more inconvenience.
Read more “Debounce and avoid multiple clicks event generation on React.js components using Lodash”
EmberJS
Through the last couple of years, javascript has drastically changed and the many developers have tried using different approaches to define their application structure and abstractions in a way which is best suits at that time. There is one thing to highlight which I intend to discuss, “Rapid Changes”. So how can a developer or an architect withstand these rapid changes to frameworks and awesome libraries introduced each day in the js context? With my experience, I learned a couple of facts which I think is necessary to embrace these changes until js development becomes structurally solid as engineered buildings. Read more “Adaptation of js apps and how predesigned abstractions could burn you”
JavaScript
Recently I happened to create a middle panel where different types of components could be rendered on top it. So the idea is, the panel should be a <div> wrapper around the middle content. For this kind of situation, higher order functions with components could come in handy to use. Read more “Higher order component wrappers using React.js and reusable components.”
JavaScript
This guide will simply cover to embed SASS support in React.js project.
First, install node-sass and sass-loader npm packages.
Yarn: yarn add sass-loader --dev
yarn add node-sass
NPM: npm install node-sass
npm install sass-loader --save-dev