Person-react

In this tutorial series you will learn to create a React app, which will call the Person API that we built in https://efcorebeginner.com/person-api. The web API was built using ASP.NET Core 6. All communication is done via http protocol, so we can choose our favorite language and platform for building frontend client application. We choose React because it is easy to get started with it. React is one of the most used frontend library for building client applications and developer support is widely available....

Before we create a new React app, install or update the latest release of Node.js for your platform. You can download from https://nodejs.org/en/download/current/. For development, it is recommended to use the latest version. After installation verify that Node.js and npm are installed correctly by using the following commands. node -v npm -v Open terminal and change the directory where the Person.sln file exists. Person.sln is the Visual Studio solution file. You will see Person folder there, which contains Person project that created in Person Web API tutorial series....

This is the 2nd tutorial in the React client app beginner series Create a new folder src\layout. Create 3 new files in this folder. Header.tsx TopNavBar.tsx Footer.tsx Layout.tsx The names of each file is self explanatory. Visual Studio Code extensions for React Development We used Visual Studio Community 2022 version for the development of our web API. It is a Microsoft IDE for pure Microsoft related projects. But for React client app development, we are using Visual Studio Code....

The web API is independent and can be hosted on a different machine and domain than the React client app. The communication between React client and web API will take place using the HTTP protocol. We can use JavaScript Fetch API, which is readily available. But we will use Axios library, to better manage our API calls. Create a new folder api in src. In src\api folder create a new file axiosconfig....

This is the 4th article in the React client app series for consuming the Person Web API. In the previous articles we created a new React app and setup the layout, top menu and routes for the home page. We also setup Axios http client for calling our web API. In this article we will create a new page with UI to get all persons from our API. Create Person Response Dto In the web api, we created simple CRUD app using ASP....

This is the 5th tutorial in React client app series that work with Persons web API. In last tutorial we created a new component in React and called web API to get all persons. We also created DTO for Person response to get strongly typed object. But we just called the API and displayed the response in Console window. In this article we will see how we can display the list data in a table....

This is the 6th article in the React client beginner series, in which we call web API using Axios. In previous article, we created Person List page, which fetched all records from the web API and displayed all records in Table component. In this article you will learn how to use Formik to input data for create and edit Person. DTOs for Create and Edit Person For reference open the ASP....

This is the 7th article in the React client app beginner series. In the previous articles, we setup a new React app, created DTOs, configured Axios, built API helper classes and created pages for list all, create and update person. We also used Formik for very simple form and Yup for validation. In this article, we will create Delete person component in React, that will call web API DELETE http request....

In the previous articles, you learned how to write a simple React app that implement UI for CRUD operations, using web API. At this stage, the List persons page call getAll web API, which returns all the records from the database. What if we have 100 or more records in our database. We have to implement searching and paging, this is also basic and required feature in any app. We added searching, paging and sorting in our web API....

This is the 9th article in Beginning React with web API series. In previous articles, we created user interface for list, search, create, update and delete persons. We used Axios in API helper methods and consumed our web API, which is written in ASP.NET Core. So far we only read response from the API and used the response data to render in our components. We have not handled errors yet....