diff --git a/src/FilterLists.Web/ClientApp/components/Counter.tsx b/src/FilterLists.Web/ClientApp/components/Counter.tsx deleted file mode 100644 index 6ef5310c6..000000000 --- a/src/FilterLists.Web/ClientApp/components/Counter.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from "react"; -import { RouteComponentProps } from "react-router"; - -interface CounterState { - currentCount: number; -} - -export class Counter extends React.Component, CounterState> { - constructor() { - super(); - this.state = { currentCount: 0 }; - } - - render() { - return
-

Counter

- -

This is a simple example of a React component.

- -

- Current count: { this.state.currentCount } -

- - -
; - } - - incrementCounter() { - this.setState({ - currentCount: this.state.currentCount + 1 - }); - } -} \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/components/FetchData.tsx b/src/FilterLists.Web/ClientApp/components/FetchData.tsx deleted file mode 100644 index b0098bba8..000000000 --- a/src/FilterLists.Web/ClientApp/components/FetchData.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import * as React from "react"; -import { RouteComponentProps } from "react-router"; -import "isomorphic-fetch"; - -interface FetchDataExampleState { - forecasts: WeatherForecast[]; - loading: boolean; -} - -export class FetchData extends React.Component, FetchDataExampleState> { - constructor() { - super(); - this.state = { forecasts: [], loading: true }; - - fetch("api/SampleData/WeatherForecasts") - .then(response => response.json() as Promise) - .then(data => { - this.setState({ forecasts: data, loading: false }); - }); - } - - render() { - const contents = this.state.loading - ?

- Loading... -

- : FetchData.renderForecastsTable(this.state.forecasts); - - return
-

Weather forecast

-

This component demonstrates fetching data from the server.

- { contents } -
; - } - - private static renderForecastsTable(forecasts: WeatherForecast[]) { - return - - - - - - - - - - {forecasts.map(forecast => - - - - - - - )} - -
DateTemp. (C)Temp. (F)Summary
{ forecast.dateFormatted }{ forecast.temperatureC }{ forecast.temperatureF }{ forecast.summary }
; - } -} - -interface WeatherForecast { - dateFormatted: string; - temperatureC: number; - temperatureF: number; - summary: string; -} \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx index ba0590e66..0f00267c5 100644 --- a/src/FilterLists.Web/ClientApp/components/Home.tsx +++ b/src/FilterLists.Web/ClientApp/components/Home.tsx @@ -1,29 +1,65 @@ import * as React from "react"; import { RouteComponentProps } from "react-router"; +import "isomorphic-fetch"; -export class Home extends React.Component, {}> { - render() { - return
-

Hello, world!

-

Welcome to your new single-page application, built with:

- -

To help you get started, we've also set up:

-
    -
  • Client-side navigation. For example, click Counter then Back to return here.
    • -
  • Webpack dev middleware. In development mode, there's no need to run the webpack build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.
    • -
  • Hot module replacement. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, rebuilt React components will be injected directly into your running application, preserving its live state.
    • -
  • Efficient production builds. In production mode, development-time features are disabled, and the webpack build tool produces minified static CSS and JavaScript files.
    • -
-

Going further

-

- For larger applications, or for server-side prerendering (i.e., for isomorphic or universal applications), you should consider using a Flux/Redux-like architecture. - You can generate an ASP.NET Core application with React and Redux using dotnet new reactredux instead of using this template. -

-
; +interface FetchDataExampleState { + forecasts: WeatherForecast[]; + loading: boolean; } -}; \ No newline at end of file + +export class Home extends React.Component, FetchDataExampleState> { + constructor() { + super(); + this.state = { forecasts: [], loading: true }; + + fetch("api/SampleData/WeatherForecasts") + .then(response => response.json() as Promise) + .then(data => { + this.setState({ forecasts: data, loading: false }); + }); + } + + render() { + const contents = this.state.loading + ?

+ Loading... +

+ : Home.renderForecastsTable(this.state.forecasts); + + return
+

Weather forecast

+

This component demonstrates fetching data from the server.

+ { contents } +
; + } + + private static renderForecastsTable(forecasts: WeatherForecast[]) { + return + + + + + + + + + + {forecasts.map(forecast => + + + + + + + )} + +
DateTemp. (C)Temp. (F)Summary
{ forecast.dateFormatted }{ forecast.temperatureC }{ forecast.temperatureF }{ forecast.summary }
; + } +} + +interface WeatherForecast { + dateFormatted: string; + temperatureC: number; + temperatureF: number; + summary: string; +} \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/components/NavMenu.tsx b/src/FilterLists.Web/ClientApp/components/NavMenu.tsx index c8ab26d62..9c5433002 100644 --- a/src/FilterLists.Web/ClientApp/components/NavMenu.tsx +++ b/src/FilterLists.Web/ClientApp/components/NavMenu.tsx @@ -22,16 +22,6 @@ export class NavMenu extends React.Component<{}, {}> { Home -
  • - - Counter - -
    • -
  • - - Fetch data - -
    • diff --git a/src/FilterLists.Web/ClientApp/routes.tsx b/src/FilterLists.Web/ClientApp/routes.tsx index 7c4e9e1e4..5a14cda26 100644 --- a/src/FilterLists.Web/ClientApp/routes.tsx +++ b/src/FilterLists.Web/ClientApp/routes.tsx @@ -2,11 +2,7 @@ import * as React from "react"; import { Route } from "react-router-dom"; import { Layout } from "./components/Layout"; import { Home } from "./components/Home"; -import { FetchData } from "./components/FetchData"; -import { Counter } from "./components/Counter"; export const routes = - - ; \ No newline at end of file