React In ASP.NET Core 2 By Using Visual Studio 2017 Template

There are several Single Page Application frameworks available in the market, each has its own advantages and uses in different scenarios.

Asp.Net Core supports single page application frameworks like Angular and React and default templates are available which make life easier.

I am going to show some basics of REACT, its lightweight framework founded by Facebook to solve their architectural issues.

React is a component based framework, and we can manage our code in components. React relies on properties and state, we can create a component, pass properties in the form of attributes to the component, maintain its state and perform operations.

Properties

Mostly properties are used to take input from the tags/component declaration from UI and then we can perform some operations. Like we have a component which increments the current value by a static number, this static number can be defined in the form of properties, we can access it in our component, and we will see that in an example later.

A really simple example is that we can have a component which takes a property like Name and says 'hello', an in: Hello {name}. This name is a property and it comes from <Hello name=”My Name”/> and the result will be Hello My Name rendered.

State

Its name indicates its responsibility. State management techniques are in almost all web frameworks/languages and it's a technique to hold/maintain the state of some object. Object can be a variable.

We will use state in our component which will maintain state of current variable and we will increment it by a number defined by properties. For example, initially if the number is 0 and we increment it by 1 then state holds that number and when we increment it again it will become 2.

Note
When state of component gets changed the render () method is fired.

Summarized

React is a component based modeling framework that watches/observes the state of component and we can take advantage of this to perform several types of operations as per our requirements.

Practice

Create a project of ASP.Net Core and choose React template provided in Visual Studio 2017. I named it React.Tutorial.
Restore the packages and build the project.
Add a new Typescript jsx file

StaticText.tsx file is typescript jsx file

CODE

import * as React from 'react';
import {
RouteComponentProps
} from 'react-router';
exportclassStaticTextextendsReact.Component < {}, {} > {
public render() {
return <div > Hello world < /div>;
}
}

Modify Home.tsx and it should look like this

CODE

import * as React from 'react';
//custom component import
import {
StaticText
} from '../components/StaticText';
import {
RouteComponentProps
} from 'react-router';
exportclassHomeextendsReact.Component < RouteComponentProps < {} > , {} > {
public render() {
return <div > < StaticText / > < /div>;
}
}

Here we declared <StaticText/> component in render() function and the result is:

So our component gets rendered and the contents get displayed.

Property Example

Let’s try properties of component.

Our component will take a property as name and render it with hello word like Hello {Name}

Create a component as we did previously and name it “ComponentProperty” so its code looks like:

CODE

import * as React from 'react';
import {
RouteComponentProps
} from 'react-router';
interface Props {
name ? : string;
}
exportconst ComponentProperty: React.SFC < Props > = (props: Props) => ( < h4 > Hello, {
props.name
}! < /h4>);
ComponentProperty.defaultProps = {
name: 'world',
};
//No render function

Note
We defined interface Props and then our const ComponentProperty gets executed when we initialize component. If no property is provided then default value of property gets used.

Let’s try it in our Home component.

We have declared the component and passed its property name, please note this is not a standard html tag which has a default name attribute.

See the result -- our property works fine and component rendered the name, Hello, Khurram

State Example

Let’s try state of component.

Our component will take a property as increment. By this will be a number and our State will maintain the variable value.

Add new component ComponentPropetyAndState.tsx

CODE

import * as React from 'react';
interface Props {
incrementBy ? : number;
}
interface State {
count: number;
}
exportclassComponentPropertyAndState extendsReact.Component < Props, State > {
//Default property set for countBy
publicstatic defaultProps: Partial < Props > = {
incrementBy: 1
};
state: State = {
count: 0
};
increment = () => {
const incrementBy: number = this.props.incrementBy!;
const count = this.state.count + incrementBy;
this.setState({
count
});
}
render() {
return ( < div > < p > Demonstration of properties,
default value of properties And State of component Current State - > count is < h2 > {
this.state.count
} < /h2> < /p> < buttononClick = {
this.increment
} > Increase the coount by number specified as property incrementBy: {
this.props.incrementBy
} < /button> < /div>);
}
}

There are 2 interfaces defined for component, the 1^st is for properties and the second is for State which maintains count.

Increment() function is fired when button is clicked and it increases the counter by incrementBy value defined as property.

Let’s try it in our Home component

CODE

import * as React from 'react';
//Custom component
import {
StaticText
} from '../components/StaticText';
import {
ComponentProperty
} from '../components/ComponentProperty';
import {
ComponentPropertyAndState
} from '../components/ComponentPropertyAndState';
import {
RouteComponentProps
} from 'react-router';
exportclassHomeextendsReact.Component < RouteComponentProps < {} > , {} > {
public render() {
return <div > < StaticText / > < ComponentPropertyname = "Khurram" / > < ComponentPropertyAndStateincrementBy = {
1
}
/> < /div>;
}
}

Run the application and see the result.

Click the button and it will increment the count variable. When increment() function is executed the this.setState({ count }) state gets changed and render() gets called which updates the component rendering and we see the updated result.