Node.js Tools 1.0 for Visual Studio (NTVS) is now available for download! NTVS is a free, open source extension for Visual Studio 2012 and Visual Studio 2013 that turns Visual Studio into a Node.js IDE. NTVS 1.0 supports the free Visual Studio Community and Visual Studio Express for Web editions, as well as Visual Studio Professional and higher
Microsoft + GitHub = Empowering Developers
ویدیوهای Norwegian Developers Conference
constructor(props) {
super(props);
console.log("App - constructor");
this.state = this.props.something;
} class App extends Component {
constructor() {
super();
console.log("App - constructor");
}
componentDidMount() {
// Ajax calls
console.log("App - mounted");
} render() {
console.log("App - rendered"); 
class Counter extends Component {
render() {
console.log("Counter - rendered");
//...
class Counters extends Component {
render() {
console.log("Counters - rendered");
//...
const NavBar = ({ totalCounters }) => {
console.log("NavBar - rendered");
//... 
class Counter extends Component {
componentDidUpdate(prevProps, prevState) {
console.log("Counter - updated", { prevProps, prevState });
if (prevProps.counter.value !== this.props.counter.value) {
// Ajax call and get new data
}
} 
class Counter extends Component {
componentWillUnmount(){
console.log("Counter - Unmount");
} 
class Counter extends Component {
render() {
console.log("Counter - rendered");
return (
<div className="row">
<div className="col-1">
<span className={this.getBadgeClasses()}>{this.formatCount()}</span>
</div>
<div className="col">
<button
onClick={() => this.props.onIncrement(this.props.counter)}
className="btn btn-secondary btn-sm"
>
+
</button>
<button
onClick={() => this.props.onDecrement(this.props.counter)}
className="btn btn-secondary btn-sm m-2"
disabled={this.props.counter.value === 0 ? "disabled" : ""}
>
-
</button>
<button
onClick={() => this.props.onDelete(this.props.counter.id)}
className="btn btn-danger btn-sm"
>
Delete
</button>
</div>
</div>
);
} <Counter
key={counter.id}
counter={counter}
onDelete={this.props.onDelete}
onIncrement={this.props.onIncrement}
onDecrement={this.props.onDecrement}
/> <Counters
counters={this.state.counters}
onReset={this.handleReset}
onIncrement={this.handleIncrement}
onDecrement={this.handleDecrement}
onDelete={this.handleDelete}
/> handleDecrement = counter => {
console.log("handleDecrement", counter);
const counters = [...this.state.counters]; // cloning an array
const index = counters.indexOf(counter);
counters[index] = { ...counter }; // cloning an object
counters[index].value--;
console.log("this.state.counters", this.state.counters[index]);
this.setState({ counters });
}; import ProductDetails from "./components/productDetails";
// ...
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="container">
<Switch>
<Route path="/products/:id" component={ProductDetails} />
<Route
path="/products"
render={props => (
<Products param1="123" param2="456" {...props} />
)}
/>
<Route path="/posts/:year/:month" component={Posts} />
<Route path="/admin" component={Dashboard} />
<Route path="/" component={Home} />
</Switch>
</div>
</div>
);
}
} import React, { Component } from "react";
class ProductDetails extends Component {
handleSave = () => {
// Navigate to /products
};
render() {
return (
<div>
<h1>Product Details - </h1>
<button className="btn btn-primary" onClick={this.handleSave}>
</div>
);
}
}
export default ProductDetails; 
<h1>Product Details - {this.props.match.params.id} </h1> {this.state.products.map(product => (
<li key={product.id}>
<a href={`/products/${product.id}`}>{product.name}</a>
</li>
))} import { Link } from "react-router-dom";
// ...
<Link to={`/products/${product.id}`}>{product.name}</Link> <Route path="/posts/:year/:month" component={Posts} /> <Route path="/posts/:year?/:month?" component={Posts} /> import React from "react";
const Posts = ({ match }) => {
return (
<div>
<h1>Posts</h1>
Year: {match.params.year} , Month: {match.params.month}
</div>
);
};
export default Posts; 
> npm i query-string --save
import queryString from "query-string";
const Posts = ({ match, location }) => {
const result = queryString.parse(location.search);
console.log(result);
// ... {approved: "true", sortBy: "newest"} const { approved, sortBy } = queryString.parse(location.search); import React from "react";
const NotFound = () => {
return <h1>Not Found</h1>;
};
export default NotFound; <Route path="/" exact component={Home} /> import { Redirect, Route, Switch } from "react-router-dom";
//...
import NotFound from "./components/notFound";
//...
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="container">
<Switch>
//...
<Route path="/not-found" component={NotFound} />
<Route path="/" exact component={Home} />
<Redirect to="/not-found" />
</Switch>
</div>
</div>
);
}
} <Redirect from="/messages" to="/posts" />
class ProductDetails extends Component {
handleSave = () => {
// Navigate to /products
this.props.history.push("/products");
}; 
const Dashboard = ({ match }) => {
return (
<div>
<h1>Admin Dashboard</h1>
<div className="row">
<div className="col-3">
<SideBar />
</div>
<div className="col">
<Route path="/admin/users" component={Users} />
<Route path="/admin/posts" component={Posts} />
</div>
</div>
</div>
);
}; import React from "react";
import { Link } from "react-router-dom";
const SideBar = () => {
return (
<ul className="list-group">
<li className="list-group-item">
<Link to="/admin/posts">Posts</Link>
</li>
<li className="list-group-item">
<Link to="/admin/users">Users</Link>
</li>
</ul>
);
};
export default SideBar; import React from "react";
const Users = () => {
return <h1>Admin Users</h1>;
};
export default Users; import React from "react";
const Posts = () => {
return (
<div>
<h1>Admin Posts</h1>
</div>
);
};
export default Posts; 
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
} //if (env.IsDevelopment())
//{
//app.UseDeveloperExceptionPage();
//}
//else
//{
app.UseExceptionHandler("/Error");
//} @page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
throw new Exception("This is my Exception !!");
}
} Redis Fundamentals for .NET Developers
Redis is an open source, in-memory data store used by millions of developers as a database, cache, streaming engine, and even a message broker.
In this live sessions, Stephen Lorello, Senior Field Engineer at Redis, joins us to show the the fundamental features .NET developers show know about using Redis
