Frontend Dev • Learning, Building, and Teaching for Exceptional Web Experiences
What you will learn by the end of this article: What a React Element is. How to create React Elements. What JSX is. Rules of JSX. Elements are the basic building blocks of React and a good understanding of them will help you understand how React wo...
A pancake stack or sticky footer layout is a pattern where the footer "sticks" to the bottom of the viewport when content is short and when content extends beyond the viewport, the footer sits at the bottom of the content. This layout pattern can be...
React Query is the most popular React library for managing async queries. It allows you to fetch data declaratively and handles caching and re-fetching of data. Debouncing will enable you to avoid making a query more times than necessary. For example...
In C-like languages like JS, it's a common operation to assign a value to an array in a for loop at a given index using []. Like this: With Dart lang trying this: You get the error: RangeError (index): Index out of range: no indices are valid: 0 Th...
Let's begin by understanding what a render is. A render is when React calls the render function of a class component or calls a function component in order to get the React elements. Note that this is not actually making changes to the DOM. A compone...
To replace a character from a string with another in JavaScript, the goto method is replace but there is a small gotcha that can lead to subtle bugs that at first can be confusing. Typical usage of string replace for example to remove all spaces: let...
When making an application/library in React it may be necessary to prevent the nesting of components. Let's use an example to help understand the problem and the solution. When creating a presentation library you might have some components like: Dec...
Flutter is a tool for cross-platform development of applications. From a single codebase, a Flutter app can be deployed to mobile, web, and desktop. Flutter is a great choice for desktop development due to a number of reasons: Reasonably large and ac...
When using useState to manage state for a React component you normally do something like this: function Counter() { const [count, setCount] = useState(0); ... } 0 above is the initial value that count will be set to. If getting the initial valu...