Preliminary Research on ReactJS. NET development and reactjs.net
ReactJS, also known as "React", is a newcomer to the game. It was created by Facebook and released for the first time in 2013. Facebook believes that React can be a substitute for Angular in dealing with SPA issues. Therefore, if you think that Angular and React are competitors, you can understand it right. However, the biggest difference between React and Angular is that React is a class library that is more efficient, with higher performance, and faster speed. Demonstrate the use of React, Angular, Knockout (another type of library, not discussed in this article), and pure JavaScript rendering in the DOM contains a list of 1000 content, time required:
Source: The Dapper Developer
If your application is very performance-oriented, React is the right choice. Therefore, this year's 2015 AngularJS seminar also mentioned that the two can be combined to improve the overall web page performance.
Interested can refer to the following Demo Code: https://github.com/djsmith42/angular_react_directive_example
ReactJS. NET
It is designed for. NET platform developers, so that we can not only go to the frontend to Render the page, but also go to the Server to Render the page. Development of ReactJS can be implemented using a common JS library or by writing JSX similar to XML. Official Website http://reactjs.net/, has been able to support ASP. NET 5!
We refer to the Getting Started tutorial (http://reactjs.cn/react/docs/getting-started.html), first we create an empty ASP. net mvc 4 Project, you can install ReactJS. NET components through Nuget:
Create the first component CommentBox:
@{
Layout = null;
}
<Html>
<Head>
<Title> Hello React </title>
</Head>
<Body>
<Div id = "content"> </div>
<Script src = "@ Url. Content ("~ /Scripts/react. js ")"> </script>
<Script src = "@ Url. Content ("~ /Scripts/Tutorial. jsx ")"> </script>
</Body>
</Html>
Add the following code to Tutorial. jsx:
Var CommentBox = React. createClass ({
Render: function (){
Return (
<Div className = "commentBox">
Hello, world! I am a CommentBox.
</Div>
);
}
});
React. render (
<CommentBox/>,
Document. getElementById ('content ')
);
Operate on every interface that you want to Render as a component. The above is a component generation syntax, in which the component is commentBox. It is recommended that the JSX file of the generated object be placed behind the Tag to be rendered.
If you want to bind data, you can write as follows:
Var CommentBox = React. createClass ({
Render: function (){
Return (
<Div className = "commentBox">
<H1> Comments
<CommentList data = {this. props. data}/>
<Br/>
</Div>
);
}
});
Var data = [
{Author: "Daniel Lo AAA", Text: "Hello ReactJS. NET World! "},
{Author: "Pete Hunt BBB", Text: "This is one comment "},
{Author: "Jordan Walke CCC", Text: "This is * another * comment "}
];
Var CommentList = React. createClass ({
Render: function (){
Var commentNodes = this. props. data. map (function (fff ){
Return (
<Comment author = {fff. Author}>
{Fff. Text}
</Comment>
);
});
Return (
<Div className = "commentList">
{CommentNodes}
</Div>
);
}
});
Var Comment = React. createClass ({
Render: function (){
Return (
<Div className = "comment">
<H2 className = "commentAuthor">
{This. props. author}
</H2>
{This. props. children}
</Div>
);
}
});
React. render (
<CommentBox data = {data}/>,
Document. getElementById ('content ')
);
The running effect is as follows:
This section mainly puts the data dataset into the Commentbox object and contains the Commentlist object in the Ccommentbox object. Therefore, the Commenlist object must be generated, and process data in this object. In Commentlist, the presentation definition of each data entry is defined:
Var commentNodes = this. props. data. map (function (fff ){
Return (
<Comment author = {fff. Author}>
{Fff. Text}
</Comment>
);
Finally, the Comment generates an object and defines the style of each piece of data in the object. You can present each data in the List mode. To use JSX, remember to add
/** @ Jsx React. DOM */
Although it is written in JSX mode, it will be compiled into a JS file. If this line is not added, no action will be taken, add the following line after
<Script src = "@ Url. Content ("~ /Scripts/react. js ")"> </script>
If you want to use the server to pull data, you must take into account the React State. There is no data during the page initialization, but the MVC Controller is called to retrieve the data when the webpage is Render, in this case, the data is changed and then updated.
Public ActionResult Reactjs ()
{
IList <CommentModel> _ comments = new List <CommentModel>
{
New CommentModel
{
Author = "Daniel Lo Nigro ",
Text = "Hello ReactJS. NET World! "
},
New CommentModel
{
Author = "Pete Hunt ",
Text = "This is one comment"
},
New CommentModel
{
Author = "Jordan Walke ",
Text = "This is * another * comment"
},
};
Return Json (_ comments, JsonRequestBehavior. AllowGet );
}
JSX can use the Script above to make some modifications and change the obtained Data to GET Data. The complete code is as follows:
/** @ Jsx React. DOM */
Var CommentBox = React. createClass ({
GetInitialState: function (){
Return {data: []};
},
ComponentWillMount: function (){
Var xhr = new XMLHttpRequest ();
Xhr. open ('get', this. props. url, true );
Xhr. onload = function (){
Var data = JSON. parse (xhr. responseText );
This. setState ({data: data });
}. Bind (this );
Xhr. send ();
},
Render: function (){
Return (
<Div className = "commentBox">
<H1> Comments
<CommentList data = {this. state. data}/>
<Br/>
</Div>
);
}
});
Var CommentList = React. createClass ({
Render: function (){
Var commentNodes = this. props. data. map (function (fff ){
Return (
<Comment author = {fff. Author}>
{Fff. Text}
</Comment>
);
});
Return (
<Div className = "commentList">
{CommentNodes}
</Div>
);
}
});
Var Comment = React. createClass ({
Render: function (){
Return (
<Div className = "comment">
<H2 className = "commentAuthor">
{This. props. author}
</H2>
{This. props. children}
</Div>
);
}
});
React. render (
<CommentBox url = "/Home/Reactjs"/>,
Document. getElementById ('content ')
);
The above is a brief demonstration of the use of ReactJS. NET, for more information, please refer to the official website http://reactjs.net/documentation, follow-up learning ReactJS.
Sample Code download: http://files.cnblogs.com/files/shanyou/ReactDemo.zip
React Chinese website
Getting started with React
Simplified front-end UI development framework: React
React (1): Design Philosophy of React-beauty of simplicity
React Native exploration (1): Background, planning, and risks
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
