Skip to main content

Upload Images in React using REST API

In our previous React JS tutorial, we have explained how to implement React Multi Select Dropdown with Instant Search. In this tutorial, we will explain how to upload images with preview and progress bar in React using REST API.

File or image upload is an important part of any web application. Here we will implement image upload in React using REST API to upload images. We will make HTTP request using Axios to upload images and list uploaded images.

(more…)

React Calendar with Events

In our previous React tutorial, we have explained how to create React Multi Select Dropdown with Instant Search. In this tutorial, we will explain how to how handle React Calendar with Events.

Calendar is a user friendly feature used in web form that allows users to select dates. We can easily create the calendar in react applications using react-calendar package. Here we will configure react calendar and also handle events bases on user actions.

(more…)

React Multi Select Dropdown with Instant Search

In our previous React tutorial, we have explained how to create React Select Dropdown List using REST API. In this tutorial, we will explain how to create React Multi Select Dropdown with Dynamic Instant Search.

The multi select dropdown is a very user friendly feature that allows users to select multiple items from list to get details of many records.

Here in this tutorial, we will use react-select package for creating multi-select dropdown with instant search. We will load dynamic data to dropdown list by making HTTP API request to https://reqres.in/api/users using react axios package. We will also display multiple selected records dynamically.

(more…)

Implement Datatable in React

In our previous React tutorial, we have explained how to Setup TinyMCE Editor in React. In this tutorial, you will learn to implement Datatable in React.

Datatable is a React component that allow to create user friendly dynamic responsive table with some advance features such as pagination, sorting, ordering, searching and many more to the HTML tables with minimal effort.

We will use react react-table component to create lighweight datatable in React application.

(more…)

Build Simple Todo Application in React

In our previous React tutorial, we have explained how to implement Datatable in React. In this tutorial, we will explain how to build a simple Todo Application in React.

We will develop a simple Todo application to create a todo item, update it, delete
and display todo list. So we will handle complete CRUD (Create, Read, Update and Delete) operation that’s important to develop application using React.

As we will create a simple Todo list means we will create a JavaScript list to contain todos and perform operations on it. So it will not keep track of todos if we refresh page.

(more…)