Category «REACT JS»

Learn more about ReactJS

How to connect Django to React

In this tutorial We will learn how to connect Django with React Js using some basic steps. I think that we are in a folder named django-react-app npx create-react-app my-react 2. Now, Create a Django projectdjango-admin startproject myDjango 3. Now drag and drop the react project to the Django project 4. After This go to …

Disable and enable Submit button in ReactJS

We can disable any kind of button in ReactJs easily. Here we will disable button on checkbox click.Disable and enable Submit button in ReactJS . See how we can make OTP Timer in ReactJS – https://learncoders.xyz/otp-countdown-timer-in-react/ Download React Project : https://reactjs.org/ Now We will check CHECKBOX Button and on the click of checkbox button We …

How to Refresh a Component and Page in React

Sometimes, we want to refresh the page without reloading the page .How to Refresh a Component and Page in React. To refresh a page you don’t need react-router. We want to reload a page by clicking a button. Here’s the example: By using useState() method we can update the component. By using these methods you …

How to send base_64 Image in ReactJS

We can send base_64 Image in ReactJs with help of the Javascript method. How to store base_64 Image in ReactJS. I will use Nodejs for storing base_64 Image into a database. So Node js will handle our React Request. Base64 also known as Base64 Content-Transfer-Encoding is an encoding and decoding technique used to convert binary …

How to Use React.js and Complex JSON Objects

How to parse a complex JSON Response in ReactJs.How to Use React.js and Complex JSON Objects Creating Components We can use Javascript JSON.parse() to parse any JSON object in ReactJS. Dealing with complex JSON responses is a necessity today to React developers Make a component with the name Product Product.js This way you can parse …

On Row click Display Record in Model Box in React

Display API Records in Model Box in React

Today, I will show how to show records in Popup Box or Model Box in React. On Row click Display Record in Model Box in React. I am showing all records from this API link – https://jsonplaceholder.typicode.com/users Display API Records in Model Box in React I am using Bootstrap Model box, You can use Material …

How to access nested object in ReactJS

The format of an object in Javascript ot ReactJs can be nested many times and can get complicated quickly.How to access nested object in ReactJS. Now an above object student can be used in your project but how to consume it. We can use this method So using [] we can access any index of …

Load data into another component in ContextAPI

The Context API solves one major problem–prop drilling.ContextAPI or Redux can be used for PropDrilling problem. Load data into another component in ContextAPI. Context provides a way to pass data through the component tree without having to pass props down manually at every level. And sometimes, some components would have to receive the props only …

Form Validation in ReactJs

We all know how Validation is very important in our Website . In this article, We will understand how to Validate Forms in React.Form Validation in ReactJs We can use any form validation package or we can use our custom code for the FROM Validation in ReactJs. Yup validation very good form validation package in ReactJs …

Admin Dashboard in React JS

Admin Dashboard in React

Today, We will see how to make a simple Admin Template in React js using Bootstrap 5. Admin Dashboard in React JS. As we know that The Bootstrap is a framework of CSS. You can use Material UI or any other design framework for the Admin dashboard. Admin Panel in React JS Installation of Packages …