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

Basics of React framework, Properties and State in components, How to use them and basic about the architecture, how components use properties, state and render()

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

  1. Create a project of ASP.Net Core and choose React template provided in Visual Studio 2017. I named it React.Tutorial.

  2. Restore the packages and build the project.

  3. Add a new Typescript jsx file


     

StaticText.tsx file is typescript jsx file

 

CODE

  1. import * as React from 'react';  
  2. import {  
  3.     RouteComponentProps  
  4. } from 'react-router';  
  5. exportclassStaticTextextendsReact.Component < {}, {} > {  
  6.     public render() {  
  7.         return <div > Hello world < /div>;  
  8.     }  
  9. }  

Modify Home.tsx and it should look like this

 

CODE

  1. import * as React from 'react';  
  2. //custom component import  
  3. import {  
  4.     StaticText  
  5. } from '../components/StaticText';  
  6. import {  
  7.     RouteComponentProps  
  8. } from 'react-router';  
  9. exportclassHomeextendsReact.Component < RouteComponentProps < {} > , {} > {  
  10.     public render() {  
  11.         return <div > < StaticText / > < /div>;  
  12.     }  
  13. }  

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

  1. import * as React from 'react';  
  2. import {  
  3.     RouteComponentProps  
  4. } from 'react-router';  
  5. interface Props {  
  6.     name ? : string;  
  7. }  
  8. exportconst ComponentProperty: React.SFC < Props > = (props: Props) => ( < h4 > Hello, {  
  9.     props.name  
  10. }! < /h4>);  
  11. ComponentProperty.defaultProps = {  
  12.     name: 'world',  
  13. };  
  14. //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

  1. import * as React from 'react';  
  2. interface Props {  
  3.     incrementBy ? : number;  
  4. }  
  5. interface State {  
  6.     count: number;  
  7. }  
  8. exportclassComponentPropertyAndState extendsReact.Component < Props, State > {  
  9.     //Default property set for countBy  
  10.     publicstatic defaultProps: Partial < Props > = {  
  11.         incrementBy: 1  
  12.     };  
  13.     state: State = {  
  14.         count: 0  
  15.     };  
  16.     increment = () => {  
  17.         const incrementBy: number = this.props.incrementBy!;  
  18.         const count = this.state.count + incrementBy;  
  19.         this.setState({  
  20.             count  
  21.         });  
  22.     }  
  23.     render() {  
  24.         return ( < div > < p > Demonstration of properties,  
  25.             default value of properties And State of component Current State - > count is < h2 > {  
  26.                 this.state.count  
  27.             } < /h2> < /p> < buttononClick = {  
  28.                 this.increment  
  29.             } > Increase the coount by number specified as property incrementBy: {  
  30.                 this.props.incrementBy  
  31.             } < /button> < /div>);  
  32.     }  
  33. }  

There are 2 interfaces defined for component, the 1st 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

  1. import * as React from 'react';  
  2. //Custom component  
  3. import {  
  4.     StaticText  
  5. } from '../components/StaticText';  
  6. import {  
  7.     ComponentProperty  
  8. } from '../components/ComponentProperty';  
  9. import {  
  10.     ComponentPropertyAndState  
  11. } from '../components/ComponentPropertyAndState';  
  12. import {  
  13.     RouteComponentProps  
  14. } from 'react-router';  
  15. exportclassHomeextendsReact.Component < RouteComponentProps < {} > , {} > {  
  16.     public render() {  
  17.         return <div > < StaticText / > < ComponentPropertyname = "Khurram" / > < ComponentPropertyAndStateincrementBy = {  
  18.             1  
  19.         }  
  20.         /> < /div>;  
  21.     }  

 

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.