diff --git a/ClientApp/src/components/Home.js b/ClientApp/src/components/Home.js index 119fc10..1de9946 100644 --- a/ClientApp/src/components/Home.js +++ b/ClientApp/src/components/Home.js @@ -2,25 +2,105 @@ import React, { Component } from 'react'; export class Home extends Component { static displayName = Home.name; + state = { + people:[] + } + + componentDidMount = () => { + fetch('/people') + .then(response => response.json()) + .then(data => { + this.setState({ + people:data + }) + }); + } + + createPerson = (event) => { + event.preventDefault(); + fetch( + '/people', + { + method:'POST', + headers: { + 'Accept': 'application/json; charset=utf-8', + 'Content-Type': 'application/json;charset=UTF-8' + }, + body: JSON.stringify({ + Name:this.state.newPersonName, + Age:this.state.newPersonAge + }) + } + ) + .then(response => response.json()) + .then( + (data) => { + this.setState({ + people:data + }) + } + ) + } + + deletePerson = (event) => { + fetch( + '/people/' + event.target.value, + { + method:'DELETE' + } + ) + .then(response => response.json()) + .then( + (data) => { + this.setState({ + people:data + }) + } + ) + } + + + changeNewPersonAge = (event) => { + this.setState({ + newPersonAge:event.target.value + }); + } + + changeNewPersonName = (event) => { + this.setState({ + newPersonName:event.target.value + }); + } + + render = () => { + return
Welcome to your new single-page application, built with:
-To help you get started, we have also set up:
-create-react-app runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.dotnet publish configuration produces minified, efficiently bundled JavaScript files.The ClientApp subdirectory is a standard React application based on the create-react-app template. If you open a command prompt in that directory, you can run npm commands such as npm test or npm install.