This React and Spring boot tutorial will teach you how to view the records using Restful API.
All the Spring Boot Application Learn Here.
First we have to Install the BootStrap
npm install react-bootstrap bootstrap@5.1.3
then Add the style sheet link copy and paste inside the head tag.i clearly explain the video tutorials below. How to add them.
After that create the Page UserList.js
import axios from 'axios'; import { useEffect, useState } from 'react'; function UserList() { const [users, setUsers] = useState([]); useEffect(()=> { handleClick(); },[]) async function handleClick() { const result = await axios.get( "http://localhost:8013/getall"); setUsers(result.data); console.log(result.data); } return ( <div className="App"> <h1>Employee Details</h1> <table class="table table-dark" align="center"> <thead> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">City</th> <th scope="col">Phone</th> <th scope="col">Salary</th> </tr> </thead> {users.map(function fn(item) { return( <tbody> <tr> <th scope="row">{item.id} </th> <td>{item.fname}</td> <td>{item.lname}</td> <td>{item.city}</td> <td>{item.phone}</td> <td>{item.salary}</td> </tr> </tbody> ); })} </table> </div> ); } export default UserList;
import UserList from "./pages/UserList"; import './App.css'; import {BrowserRouter,Switch,Route} from 'react-router-dom'; function App() { return ( <div className="App"> <BrowserRouter> <Switch> <Route path="/" exact> <UserList/> </Route> </Switch> </BrowserRouter> </div> ); }
In this tutorial will teach Laravel 11 Api MVC with Repository Pattern Crud Application step…
In this tutorial will teach Laravel 11 CRUD Application step by step. Laravel 11 CRUD…
in this tutorials we will be talk about how to make a times table in…
In this tutorials will teach How to add two numbers in Laravel 10. (more…)
In this tutorial, we will teach the process of building a full-stack application using Node.js,…
In this tutorial, we will explin you through the process of building a Hospital Management…