Tech Seeker

In this article, we will implement CRUD operation in ReactJS(v18) application. ReactJS: ReactJS is a javascript library for creating user interface components. ReactJS components contains javascript function and they return JSX(JavaScript XML) as output. ReactJS effectively renders and update component on data changes. Create ReactJS(v18) Application: To create a ReactJS application our local machine should contain NodeJS. So go to 'https://nodejs.org/en/download/' Command to create ReactJS application npx create-react-app name-of-your-app Command to start the application. npm start Let's go through the project and explore important files. index.html: Inside the public folder we can see the index.html. Only the HTML file of the entire ReactJS application. It contained a 'div' element whose 'id' value is 'root', inside of this element all ReactJS components get rendered. index.js: Entry javascript file for ReactJS. It helps paint 'App' com

The main objectives of this article are: Create HTTP delete endpoint in API Project. React application to invoke the delete API. Create HTTP Delete Endpoint In API Project: Let's create an HTTP delete endpoint in the API project. API_Project/Controllers/SuperVillainController.cs: [HttpDelete] [Route("{id:int}")] public async Task<IActionResult> Delete(int id) { var villainToDelete = await _reactJSDemoContext.SuperVillain.FindAsync(id); if (villainToDelete == null) { return NotFound(); } _reactJSDemoContext.SuperVillain.Remove(villainToDelete); await _reactJSDemoContext.SaveChangesAsync(); return Ok(); } (Line: 1) The 'HttpDelete' attribute allows us action method can be consumed for only HTTP delete requests. (Line: 2) The 'Route' attribute defined where we need to pass the integer 'id' value. (Line: 5) Based on the 'id' value trying to fetch the record from the database. (Line: 6-9) Checking whether a record exists in the

The main objectives of this article are: Create Get By Id Endpoint In API Project. Creating Update Endpoint In API Project. Creating A React Component To Show Update Form Create Get By Id Endpoint In API Project: To update any record, we first need to fetch it by its 'id'. So let's create a get id by an endpoint in our API project. API_Project/Controllers/SuperVillainController.cs: [HttpGet] [Route("{id:int}")] public async Task<IActionResult> Get(int id) { var villainById = await _reactJSDemoContext .SuperVillain.Where(_ => _.Id == id) .FirstOrDefaultAsync(); return Ok(villainById); } (Line: 2)Since it is a second HTTP Get Action method, so we have to explicitly specify the route. The route expression '{id:int}' represent 'id' value must be integer value. (Line: 5-7) Fetching the record by 'id' from the database. Create Update Endpoint In API Project: Let's create the HTTP PUT action method. API_Project/Controllers/Supe

The main objectives of this article are: Create HTTP Post endpoint in API Project. Create React JS component with a form to add a new item Create Post Endpoint Action Method In API Project: Let's create an HTTP Post action method to save a new record into the database. API_Project/Controllers/SuperVillainController.cs: [HttpPost] public async Task<IActionResult> Post(SuperVillain newSuperVillain) { _reactJSDemoContext.SuperVillain.Add(newSuperVillain); await _reactJSDemoContext.SaveChangesAsync(); return Ok(newSuperVillain); } (Line: 1) The 'HttpPost' attribute makes our action method invoke only for HTTP Post requests. (Line: 2) Here our action method should receive the item to add as a payload input parameter. (Line: 4) Our new record data instance adding to the database context. (Line: 5) The 'SaveChangesAsync()' method inserts the new record into the database. Create 'AddSuperVillain' Component In React App: On the 'pages' folder

The main objectives of this article are: Create an API endpoint to fetch all records Create ReactJS component to display all records Create 'SuperVillain' Controller In API Project: A Controller is an entity or class that contains logical methods or function that gets executed for an HTTP request from the clients. Let's create a controller 'SuperVillianController.cs'. API_Project/Controllers/SuperVillianController.cs: using Microsoft.AspNetCore.Mvc; using ReactDemo.API.Data; namespace ReactDemo.API.Controllers; [ApiController] [Route("[controller]")] public class SuperVillainController : ControllerBase { private readonly ReactJSDemoContext _reactJSDemoContext; public SuperVillainController(ReactJSDemoContext reactJSDemoContext) { _reactJSDemoContext = reactJSDemoContext; } } (Line: 6) The 'ApiController' attribute applies all API rules to the controller. (Line: 7) The 'Route("[controller]")' attribute