React Login Logout With Spring Boot Security

React Spring Security Here in this example I am going to integrate React JS front-end with Spring Boot Security framework. When user will try to access the home page the user will be redirected to the login page if the user has not been authenticated already. Spring Boot’s default security mechanism asks for username and password when a user tries…

React Search Functionality In HTML Table

Search Functionality In any tabular format data it is necessary to have a search input so that user can search their intended data using particular text or string. This will help them to find the expected data in a little time than searching the whole HTML table data by navigating to different pages. This example will show you how to…

HTML Table Conditional Cell Color Using React

HTML Table HTML table is mainly used to display data in tabular format in rows and columns. Each row contains one or more columns to display data. Each row is indicated by <tr/> tag, whereas each column is indicated by <td/> tag. The HTML table is indicated by <table/> tag. The HTML table header is indicated by <thead/> and body is indicated by <tbody/> tag. In this example I am…

How To Fix ERR_OSSL_EVP_UNSUPPORTED In React JS Application

Scenario Let’s say you are using Node JS 17 and hitting the error err_ossl_evp_unsupported during application start up using npm start command. Error The error ERR_OSSL_EVP_UNSUPPORTED has been mentioned in the release notes for Node.js 17. If you face an ERR_OSSL_EVP_UNSUPPORTED error in your application with Node.js 17, it’s likely that your application or a module you’re using is attempting…

React CRUD Example with CodeIgniter 4 and MySQL 8

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….

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…

Allow 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…

Autocomplete 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,…

How 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…

Delete 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…