In this tutorial I am going to show you how to build CRUD application using CodeIgniter 4, MySQL and React JS framework. CRUD is an acronym that stands for Create, Read, Update and Delete operations in a particular application. So you are basically creating a record, reading single or all records, updating the existing record and deleting the existing record. In this React CRUD example with Codeigniter 4 and MySQL, I am using React JS as a front-end technology used for building the UI (User Interface), PHP based CodeIgniter 4…
ContinueCategory: React JS
React JS
How to use AJAX in React HTTP GET Request without using Third Party Library
Here I am going to show you how to use AJAX in React HTTP GET request without using Third Party library. To do this I am going to use XMLHttpRequest for fetching data instead of Fetch API (fetch()). AJAX is an acronym that stands for Asynchronous JavaScript and XML. The Fetch API provides an interface to fetch resources from the server. This Fetch API is similar to the XMLHttpRequest but the new Fetch API provides more powerful and flexible feature set.
ContinueAllow only numeric values or digits in input field using React
Introduction In this example I am going to show you how to allow only numeric values or digits in input field using React JS. You may have a requirement where you only need to allow user digits or numeric values for the input field. If user inputs non-numeric values then either you show an error or you do not allow non-numeric values at all. Here I am going to show you how to show error when user type non-numeric values in the input field. In another example I am also…
ContinueAutocomplete input using React
Introduction I am going to show you how to show auto complete suggestion when users search for something by typing in the input field. Autocomplete allows users to have other suggested strings or values displayed on typing of the relevant text in the input field. You have also seen when you start a search on Google or other search engines, you can find the information you are looking for using search predictions.
ContinueHow to consume GraphQL CRUD API using React and Apollo
Introduction In this tutorial we are going to show you how to consume GraphQL CRUD API using React and Apollo. CRUD means Create, Read, Update and Delete operations. Therefore we are going to create client application for GraphQL server. I am going to use Spring Boot framework for implementing GraphQL server. In the server side implementation we are performing CRUD operations on category and product using GraphQL and Spring Boot. Here in client side implementation using React, I will only show you how to perform CRUD operations of category and…
ContinueDelete Multiple Table Rows from Server using React
Introduction In this tutorial we are going to show how to delete multiple table rows from server using React JS. Let’s say we have product data which got displayed on HTML table on user interface (UI). And users want to either select individual row or multiple rows for deletion from the HTML table. Therefore we will put individual checkbox against each row on the table for multiple rows selection. Once user selects the rows, he/she may click on a button to delete the selected products. We determine the each row’s…
ContinueCascading or dependent dropdown using React JS
Introduction In this post I will show you an example on cascading or dependent dropdown using React JS. When you have a requirement for selecting dropdown values based on another dropdown values then you need to create such cascading or dependent dropdown. For example, in your application you need to select city based on state or country then you need to create such dependent dropdown. Here I will create some dummy dataset for country, state and city and I will show in the dropdown with select/option tags.
ContinueUpload file to server using React
Introduction In this post we will see how to upload file to server using React JS framework. In server side you can use any server side technology for implementing REST API that will store file into a physical path or persistence storage. Here we will only focus on client side technology React framework only. user will be provided a browse button to select a file and a button for uploading file into server. The button will be disabled by default until a user selects a file for uploading. You may…
ContinueUpload file using React and Spring Boot
Introduction In this tutorial we will see how to upload file using React and Spring Boot technologies. React or React JS will be used as a client side or front end technology and Spring Boot will be used as a server side technology for uploading file. We will upload file to server using Spring REST API. As a server side technology we will use Spring Boot 2.1.6 and in client side we will use React JS. You may also like to read Download file using React and Spring Boot. Prerequisites Eclipse…
ContinueDownload file from server using React 16/17
Introduction Here I will see how to download file from server using React JS framework. You can use any server side technology to download file but we will focus on client side technology React JS framework. You may read more on react here at https://reactjs.org/. I will provide link as well as button on which user will click and download file from server. User will get Save As option when clicks on download link or button. Related Posts: How to download file from server using Angular
Continue