class MoviesTable extends Component {
render() {
const { movies, onDelete, onLike } = this.props; import Like from "./common/like";
// ...
<Like liked={movie.liked} onClick={() => onLike(movie)} /> <button
onClick={() => onDelete(movie)}
className="btn btn-danger btn-sm"
>
Delete
</button> import MoviesTable from "./moviesTable";
<MoviesTable
movies={movies}
onDelete={this.handleDelete}
onLike={this.handleLike}
/> return (
<div className="row">
<div className="col-3">
<ListGroup
items={this.state.genres}
onItemSelect={this.handleGenreSelect}
selectedItem={this.state.selectedGenre}
/>
</div>
<div className="col">
<p>Showing {totalCount} movies in the database.</p>
<MoviesTable
movies={movies}
onDelete={this.handleDelete}
onLike={this.handleLike}
/>
<Pagination
itemsCount={totalCount}
pageSize={this.state.pageSize}
onPageChange={this.handlePageChange}
currentPage={this.state.currentPage}
/>
</div>
</div>
); class MoviesTable extends Component {
render() {
const { movies, onDelete, onLike, onSort } = this.props; return (
<table className="table">
<thead>
<tr>
<th style={{ cursor: "pointer" }} onClick={() => onSort("title")}>Title</th>
<th style={{ cursor: "pointer" }} onClick={() => onSort("genre.name")}>Genre</th>
<th style={{ cursor: "pointer" }} onClick={() => onSort("numberInStock")}>Stock</th>
<th style={{ cursor: "pointer" }} onClick={() => onSort("dailyRentalRate")}>Rate</th>
<th />
<th />
</tr>
</thead> <MoviesTable
movies={movies}
onDelete={this.handleDelete}
onLike={this.handleLike}
onSort={this.handleSort}
/> handleSort = column => {
console.log("handleSort", column);
}; handleSort = path => {
console.log("handleSort", path);
this.setState({ sortColumn: { path, order: "asc" } });
}; class Movies extends Component {
state = {
// ...
sortColumn: { path:"title", order: "asc" }
}; getPagedData() {
const {
pageSize,
currentPage,
selectedGenre,
movies: allMovies,
sortColumn
} = this.state;
let filteredMovies =
selectedGenre && selectedGenre._id
? allMovies.filter(m => m.genre._id === selectedGenre._id)
: allMovies;
filteredMovies = filteredMovies.sort((movie1, movie2) =>
movie1[sortColumn.path] > movie2[sortColumn.path]
? sortColumn.order === "asc"
? 1
: -1
: movie2[sortColumn.path] > movie1[sortColumn.path]
? sortColumn.order === "asc"
? -1
: 1
: 0
);
const first = (currentPage - 1) * pageSize;
const last = first + pageSize;
const pagedMovies = filteredMovies.slice(first, last);
return { totalCount: filteredMovies.length, data: pagedMovies };
} handleSort = path => {
console.log("handleSort", path);
const sortColumn = { ...this.state.sortColumn };
if (sortColumn.path === path) {
sortColumn.order = sortColumn.order === "asc" ? "desc" : "asc";
} else {
sortColumn.path = path;
sortColumn.order = "asc";
}
this.setState({ sortColumn });
}; class MoviesTable extends Component {
raiseSort = path => {
console.log("raiseSort", path);
const sortColumn = { ...this.props.sortColumn };
if (sortColumn.path === path) {
sortColumn.order = sortColumn.order === "asc" ? "desc" : "asc";
} else {
sortColumn.path = path;
sortColumn.order = "asc";
}
this.props.onSort(sortColumn);
}; <MoviesTable
movies={movies}
onDelete={this.handleDelete}
onLike={this.handleLike}
onSort={this.handleSort}
sortColumn={this.state.sortColumn}
/> return (
<table className="table">
<thead>
<tr>
<th style={{ cursor: "pointer" }} onClick={() => this.raiseSort("title")}>Title</th>
<th style={{ cursor: "pointer" }} onClick={() => this.raiseSort("genre.name")}>Genre</th>
<th style={{ cursor: "pointer" }} onClick={() => this.raiseSort("numberInStock")}>Stock</th>
<th style={{ cursor: "pointer" }} onClick={() => this.raiseSort("dailyRentalRate")}>Rate</th>
<th />
<th />
</tr>
</thead> C# is usually thought of as a backend, server-side language. But with the Blazor-Web Assembly combo, developers can use it for client-side as well.
With the latest version of ASP.NET Web API, Microsoft introduced support for cross domain requests, usually called CORS (Cross-Origin Resource Sharing)
ReactDOM.render(<Counter />, document.getElementById("root")); import Counters from "./components/counters";
ReactDOM.render(<Counters />, document.getElementById("root")); import React, { Component } from "react";
import Counter from "./counter";
class Counters extends Component {
state = {};
render() {
return (
<div>
<Counter />
<Counter />
<Counter />
<Counter />
</div>
);
}
}
export default Counters; 
import React, { Component } from "react";
import Counter from "./counter";
class Counters extends Component {
state = {
counters: [
{ id: 1, value: 0 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 }
]
};
render() {
return (
<div>
{this.state.counters.map(counter => (
<Counter key={counter.id} />
))}
</div>
);
}
}
export default Counters; render() {
return (
<div>
{this.state.counters.map(counter => (
<Counter key={counter.id} value={counter.value} selected={true} />
))}
</div>
); class Counter extends Component {
state = {
count: 0
};
render() {
console.log("props", this.props);
//... 
class Counter extends Component {
state = {
count: this.props.value
}; 
render() {
return (
<div>
{this.state.counters.map(counter => (
<Counter key={counter.id} value={counter.value} selected={true}>
<h4>Counter #{counter.id}</h4>
</Counter>
))}
</div>
);
} 
class Counter extends Component {
state = {
count: this.props.value
}; 
handleDelete = () => {
console.log("handleDelete called.");
}; <Counter
key={counter.id}
value={counter.value}
selected={true}
onDelete={this.handleDelete}
/> <button
onClick={this.props.onDelete}
className="btn btn-danger btn-sm m-2"
>
Delete
</button> onClick={() => this.props.onDelete(this.props.id)} <Counter
key={counter.id}
value={counter.value}
selected={true}
onDelete={this.handleDelete}
id={counter.id}
/> handleDelete = counterId => {
console.log("handleDelete called.", counterId);
const counters = this.state.counters.filter(
counter => counter.id !== counterId
);
this.setState({ counters }); // = this.setState({ counters: counters });
}; <Counter
key={counter.id}
counter={counter}
onDelete={this.handleDelete}
/> This project is the next generation of the ASP.NET Boilerplate web application framework.
Modular Architecture
Designed as modular and extensible from the bottom to the top.
Microservice Focused
Designed to support microservice architecture and helps to build autonomous microservices.
Domain Driven Design
Designed and developed based on DDD patterns and principles. Provides a layered model for your application.
Authorization
Advanced authorization with user, role and fine-grained permission system. Built on the Microsoft Identity library.
Multi-Tenancy
SaaS applications made easy! Integrated multi-tenancy from database to UI.
Cross Cutting Concerns
Complete infrastructure for authorization, validation, exception handling, caching, audit logging, transaction management and so on.
We are excited to announce the release of .NET Core 1.0, ASP.NET Core 1.0 and Entity Framework 1.0, available on Windows, OS X and Linux! .NET Core is a cross-platform, open source, and modular .NET platform for creating modern web apps, microservices, libraries and console applications.
This release includes the .NET Core runtime, libraries and tools and the ASP.NET Core libraries. We are also releasing Visual Studio and Visual Studio Code extensions that enable you to create .NET Core projects. You can get started at https://dot.net/core. Read the release notes for detailed release information.
Use Tailwind CSS with RN for awesome styling!
Use the Google Distance Matrix API to calculate Travel time and Distance (+ Cost!)
Use the Directions Google API for real navigation!
Use Google places API for real navigations!
Use apple & google maps for iOS & Android
Use React Native Navigation to navigate between screens!
Use React Native Elements to elevate your app design!
