Andreas Sjöberg @ Consid
let input = fetch('a/bunch/of/excel/sheets');
let backend = createDotnetCoreApp();
let frontend = createReactApp();
input.map(sheet => (
backend.implement(sheet.logic);
frontend.createPageFor(sheet.tabs);
));
return { backend, frontend };
Because!
const header = <h1>Hello world!</h1>;
// Helper.ts
var _ = require("lodash");
export formatNumber = (n: number, fractions: number = 2) => {
if (isNaN(n)) {
return n;
}
return _.round(n, fractions).toLocaleString("sv-SE");
}
// FormattedCell.tsx
class FormattedCell extends React.Component<Props, State> {
public render() {
let { value } = this.props;
let className = value < 0 'table-danger' : 'table-success';
return <td className={className}>
{formatNumber(value)}
</td>;
}
}
// FormattedCell.tsx
class FormattedCell extends React.Component<Props, State> {
public render() {
let { value } = this.props;
let className = value < 0 'table-danger' : 'table-success';
return <td className={className}>
{formatNumber(value)}
</td>;
}
}
// ItemsList.tsx
type Props = {
date: Date;
};
type State = {
isLoading: boolean;
error: boolean;
items: Item[];
};
interface Item {
id: number;
name: string;
value: number;
}
// ...
// ...
class ItemsList extends React.Component<Props, State> {
// ...
public render() {
let { isLoading, error, items } = this.state;
return
<div>
<h1>Items list</h1>
<ErrorBox error={error} />
<table>
<thead>...</thead>
<tbody>
{items.map(item =>
<tr key={item.id}>
<th>{item.name}</th>
<FormattedCell value={item.value} />
</tr>
)}
</tbody>
</table>
<Loader isLoading={isLoading} />
</div>;
}
}
class Loader extends React.Component<Props, State> {
public render() {
let { isLoading } = this.props;
return isLoading ? (
<div className="loader" />
) : null;
}
}
<div>
<Loader isLoading={true} />
</div>
// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('my-react-app-div'));
<!-- ... existing HTML ... -->
<script src="my-react-bundle.js"></script>
<!-- ... existing HTML ... -->
<div id="my-react-app-div"></div>
<!-- ... existing HTML ... -->
class Loader extends React.Component<Props, State> {
public render() {
let { isLoading } = this.props;
return isLoading ? (
<div className="loader" />
) : null;
}
}
<ul>
{items.map(item =>
<li key={item.id}>
{item.text}
</li>
)};
</ul>
<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name"/>
</label>
</div>
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
hero: Hero = {
id: 1,
name: 'Windstorm'
};
constructor() { }
ngOnInit() { }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
@NgModule({
declarations: [
AppComponent,
HeroesComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Tour of Heroes';
}
<h1>{{title}}</h1>
<app-heroes></app-heroes>
export class Hero {
id: number;
name: string;
}
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Buy milk' },
{ text: 'Watch videos' },
{ text: 'Code' }
]
}
})
services.AddAuthorization()
.AddMediatR()
.AddSignalR();
services.AddTransient<JwtService>();
type State = {
isLoading: boolean;
error: boolean;
items: ResponseItem[];
date: Date;
};
interface ResponseItem {
id: number;
name: string;
value: number;
}
Andreas Sjöberg @ Consid