初探ReactJS.NET 开采

ReactJS平常也被叫作”React”,是壹个刚刚在这一场游戏中出演的新手。它由推特(Twitter)创立,并在二〇一二年第贰回发表。Twitter以为React在拍卖SPA难题上得以造成Angular的代替品,由此只要你认为Angular和React那二种框架是竞争对手,那您的知道就对了。可是,与Angular比较,React最大的分裂之处在于,它是三个更便捷、具备越来越高质量、速度更加快的类库。下图展现了采纳React、Angular、Knockout(另一体系库,在本文中不做商量),以及纯粹的JavaScript在DOM中渲染包涵一千个内容的列表,各自所需的时光:

图片 1

来源: The Dapper Developer

假若您的应用特别敬服质量,那么React正是不利的抉择。也为此,在当年的2014AngularJS研究研商会也会有谈到,两者能够互相结合,让漫天网页品质更升高一步。图片 2

有兴趣者能够参见上面德姆o
Code:https://github.com/djsmith42/angular_react_directive_example

 

关于ReactJS .NET

它是专对.NET平台开采者设计,让我们不光能够在前面一个去Render出页面,也能够在Server端去Render页面。开拓ReactJS能够用一般JS
库,也得以由此类似XML的JSX编写格局去开拓。官方网站 http://reactjs.net/
,已经足以支撑ASP.NET 5!

大家参照入门教程(http://reactjs.cn/react/docs/getting-started.html),首先我们创建一个空的ASP.NET
MVC 4项目,能够因此Nuget去安装ReactJS.NET组件:

图片 3

创造第一个零件 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>

增添以下代码到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’)

);

把各类想要Render出来的分界面当作组件来操作,上面正是多个零部件的浮动语法,其中组件正是commentBox。被Render在Content之后,而建议作法是要将扭转的目的的JSX文件,放在要显现的Tag后边。

 

只要要绑定数据也足以那样写:

var
CommentBox = React.createClass({

render: function() {

return (

<div className=”commentBox”>

<h1>Comments</h1>

<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’)

);

运作效果如下:

图片 4

这一段主若是将data这几个数量集放入Commentbox这些目的中,在Ccommentbox对象中又包罗了Commentlist这么些指标,所以,必得发生Commenlist那么些目的,并在那对象里面管理多少,而在Commentlist中,每条数据的表现定义,定义为:

var commentNodes = this.props.data.map(function (fff) {

return (

<Comment author={fff.Author}>

{fff.Text}

</Comment>

);

最终,在由Comment发生对象,并在对象钦点义每一条数据的体裁。就足以把每笔数据用List形式显示出来了。而在运用JSX最根本一点,千万要记得在文书最伊始要投入

/** @jsx React.DOM */

就算,它是采纳JSX格局编写,不过最后照旧会编写翻译成JS文件,若无参与这一行,就不会有动作了,且必需在MVC的View中的<head>之后步向上边这一行

<script src=”@Url.Content(“~/Scripts/react.js”)”></script>

假若要改用服务端拉取数据,就务须惦记到React
State,网页开端化时候并不曾多少,但是会先把网页Render出来那时候再调用MVC的Controller抽取多少,此时数码就集会场全部改换,进而去创新数据。

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能够套用上面包车型客车Script去做一些修改,获取数据地点改成GET
Data,完整的代码如下:

/**
@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</h1>

<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’)

);

 

上边是粗略演示了使用ReactJS.NET, 进一步的请参谋官方网站
http://reactjs.net/ 的文书档案,后续继续学习ReactJS。

演示代码下载: http://files.cnblogs.com/files/shanyou/ReactDemo.zip

React 中文网

React
入门教程

颠覆式前端UI开垦框架:React

深入浅出React(一):React的布署性文学 –
轻易之美

React
Native索求(一):背景、规划轻风险

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图