Check out how easy it is to create a stunning Parallax effect using the framer-motion library

In the previous article of the React Design Patterns Basic to Advance series, we became familiar with the Basic Design Patterns which are widely used in React. In this article, we will learn about the various Advanced Design Patterns in React. React design patterns basic to advanceAs a Frontend developer and working on React for several months, one of thetopics I have paid close attention to is Design Patterns. In this article serieson React design patterns, I will share my learnings. This blog is completely about the design patterns which are widely used in Reactapp deve…Kiprosh BlogsShubham JajooAdvanced Design

As a Frontend developer and working on React for several months, one of the topics I have paid close attention to is Design Patterns. In this article series on React design patterns, I will share my learnings. This blog is completely about the design patterns which are widely used in React app development. So before diving deep directly into design patterns, we will look into a short introduction of React and JSX. React React is a JavaScript library for building user interfaces. It lets you compose complex UI from small and isolated pieces of code called Components. Component in React

In Web Development, one of the core decisions developers have to make is to decide where to implement rendering in their application. The two most common rendering techniques are Client-Side Rendering: renders web page on the browser Server-Side Rendering: renders web page on the server Let's understand both the techniques in detail. Server Side Rendering VS Client Side Rendering: Before understanding both the techniques, let's get familiar with the following two important Performance Metrics: First Contentful Paint (FCP): This metric measures the time from when the page starts loading to the time when any part of the page's content is

React was released with an update to React's core (Reconciler) algorithm. This new algorithm is called Fiber. Before diving deep into what is Fiber and how it works, it is must to know the React's reconciler algorithm as Fiber is nothing but the re-implementation of this previous algorithm. You can refer to the reconciler algorithm on React Official doc here. React ReconciliationIt's an algorithm that React uses to diff one tree with another to find which parts need to be updated in the next update. E.g. whenever the component's props or state gets updated, whether to make an actual

React-native's Animated library is a simple and powerful library to add animations in your react-native app. But it has few limitations when it comes to gesture-based interactions. To overcome these limitations, we have an alternative, react-native-reanimated library by Krzysztof Magiera Using react-native-reanimated, we declare our animations in JavaScript, in our React Native application code, but run them on UI thread. It provides much greater flexibility and control over our animations and is also backward compatible with the Animated library. But this flexibility comes at a cost of declarative syntax which involves a bit of learning curve. In this blog, we'll

In this article, we will dive deeper to understand how does React configurations work. We will also see how do things come to action in React which are usually not possible in plain JavaScript?