Topics on JavaScript frameworks such as React, Next.js,MERN stack, and any other technology based on JavaScript
In this post, I will show you how to create a dynamic table filled with API data. We are going to fetch some sample data, create the table and fill it with the data. App structure You can use create-react-app or online IDE to create the following file structure. Fetch data with async … await …
React Router v6 has some key differences compared to the previous versions. With every major release, it gets easier to implement than the previous version.
If you are a React developer, you must have heard of Redux for sure. While Redux is such an important tool for React developers, it also introduces extra code and a cumbersome setup. However, with the popularity of functional components and hooks, Redux also introduces some useful hooks for developers to work with. This has …
In traditional web page development, developers would use anchor tags and id to navigate to a certain part of a web page. While you can still add this approach to a component-based React application, you may need more code to have certain effects such as smoothly scrolling to the target point on the page. But …
In my previous posts on React Router, I have explained to you about Basic React Router and Nested React Router. In this post, I will show you how to create custom Routes that will limit access to certain components in a React app. We are going to create a super simple app while discussing the …
Nested routes in React are not as complex as you might think, especially, with React Router V5. Routes are nothing but React components. Therefore, just like any other component, they render anywhere in a React application including in child components. Note: If you are new to React Router, please read this post before you processed. …
How to implement nested Routes in React Router V5 Read More »
What is React Router React Router is a Library that makes it possible to navigate from one react component to another. In other words, it enables you to switch between views. It is based on a model called Dynamic Routing. Dynamic Routing VS Static Routing Static routing Dynamic routing Define at the initialization of the …
In this short article, I am going to show how to use React hooks in functional components to obtain user input and display it. I use the following simple form and code snippet. User form The react functional component is as follows. I keep it as simple as possible. App.js I am going to explain …
