ReactJS.NET 开发

初探ReactJS.NET 开发

ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手。它由Facebook创建,并在2013年首次发布。Facebook认为React在处理SPA问题上可以成为Angular的替代品,因此如果你认为Angular和React这两种框架是竞争对手,那你的理解就对了。不过,与Angular相比,React最大的不同之处在于,它是一个更高效、具有更高性能、速度更快的类库。下图展示了使用React、Angular、Knockout(另一种类库,在本文中不做讨论),以及纯粹的JavaScript在DOM中渲染包含1000个内容的列表,各自所需的时间:

来源: The Dapper Developer

如果你的应用非常看重性能,那么React就是正确的选择。也因此,在今年的2015 AngularJS研讨会也有提及,两者可以互相结合,让整个网页性能更提升一步。

有兴趣者可以参考下面Demo 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组件:

创建第一个组件 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‘)

);

运行效果如下:

这一段主要是将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探索(一):背景、规划和风险

时间: 2024-11-06 11:28:53

ReactJS.NET 开发的相关文章

初探ReactJS.NET 开发

ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手.它由Facebook创建,并在2013年首次发布.Facebook认为React在处理SPA问题上可以成为Angular的替代品,因此如果你认为Angular和React这两种框架是竞争对手,那你的理解就对了.不过,与Angular相比,React最大的不同之处在于,它是一个更高效.具有更高性能.速度更快的类库.下图展示了使用React.Angular.Knockout(另一种类库,在本文中不做讨论),以及纯粹

2016年7个顶级JavaScript框架

当涉及到Web开发时,JavaScript框架往往是一些开发人员和企业最受欢迎的平台.可能,你有机会尝试过一两个顶级的JavaScript框架,但你仍然有点不确定哪个才是最佳的最值得掌握的,或者哪个值得你建议你的开发人员选择用于下一个web开发项目. JavaScript正在以惊人的速度前进,并且添加新的技能到你的存储库变得有不断的压力.为了做到这一点,知道和了解更多的顶级JavaScript框架在现在看来是必要的.在ValueCoders进行了彻底的研究后,我们入围了其中七个顶级框架,它们是:

BugPhobia终章篇章:学霸在线系统Beta阶段展示

0x00 :序言 1 universe, 9 planets, 204 countries,809 islands, 7 seas, and i had the privilege to meet you. 展信安,致以BugPhobia团队的终章 即便对庆典失去兴趣和新鲜感 也选择用仪式感填补生活 就像用纸记下“一二三四”的计划 贴在学校衣柜的铁皮上 0x01 :团队成员简介 图1 BugPhobia团队终章篇章的合影 0x02 :团队项目愿景 0x0200: 学霸在线系统基本定位 网站基本定

React Native实践之携程Moles框架

编者:本文来自携程框架研发部高级经理魏晓军在第二期[携程技术微分享]上的分享,以下为整理后的文字实录.视频回放可点击这里.关注携程技术中心微信公号ctriptech,可获知更多微分享课程信息. 因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试.但有一个痛点是,在移动端,我们是否有必要开发多套程序:iOS.Android和H5?本次将通过对Moles框架的分享,介绍携程在React Native方面的实战干货,希望给大家一些灵感和启发.

[译] React 入门指南

原文链接:The React Quick Start Guide 这篇文章将概括性的介绍一下如何用 ReactJS 进行开发.我将介绍一些基础知识,不会有过于深入的分析.你可以结合这些代码阅读本文.更新:本文已经由 Hugo Bessa 翻译了葡萄牙语版. 一些概念 React 的 API 非常少,简单易懂易用.在正式开始之前先介绍几个概念,一个一个来. React 元素 是表现为 HTML 元素的 JavaScript 对象,他们并不真实存在于浏览器中.他们最终表现为类似h1, div 或 s

ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例

工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说,我这个工程十分便捷,对于初学者来说,可能包含到以下的一些知识点: 一.React-Router的使用 Router是为了方便管理组件的路径,它使用比较简单,一般定义如下就行,需要注意的是,react-router的版本有1.0-3.0,各个版本对应的API大致相似,但也有不同,我使用的是2.X的,

TCG开发日志(2)从零开始,ReactJS的Helloworld

ReactJS是今年很流行的前端框架,我以前做兼职的时候写过一个用PHP+Smarty+HTML+JQUERY的小网站, 当时只是感觉JQuery是一个用起来很方便的库,但是React完全不同,所有的写法都变了,组件化的开发过程也很流畅,代码管理也方便. 那么当然先要安装React,在工程目录下: npm install react --save npm install react-dom --save 显然我要使用ES6,所以还有一套Babel,其中,比起服务端,特别需要添加这个插件: npm

ReactJS 结合 antd-mobile 开发 h5 应用基本配置

在 ReactJS 较为初级的使用 antd-mobile 使用时候直接加载 node_modules 文件中的相关 CSS,这个使用方法效率低:更高明的方法则按需加载,需要设置如下: 在 package.json 的 babel 配置里的 plugins 项里添加 如下代码: [ "import", { "libraryName": "antd-mobile", "style": "css" } ] 参考

D1.1.利用npm(webpack)构建基本reactJS项目

前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# webpack 介绍:http://webpack.github.io/docs/what-is-webpack.html npm install -g webpack webpack-dev-server #在项目文件夹路径下,初始化npm项目 npm init #安装webpack和webpa