[标签]Asp.Net,Core,Redux
ReactJS.NET 是专对.NET 平台开发者设计,让我们不只可以在前端去Render出页面,也可以在Server端去Render页面。 开发ReactJS 可以用一般JS 库,也可以通过类似XML的JSX 编写方式去开发。 官方网站http://reactjs.net/ ,已经可以支持ASP.NET 5 !
参照入门教程,首先我们创建一个空的ASP.NET MVC 4 项目,可以通过Nuget 去安装ReactJS.NET组件。
一、ReactJS.NET 说明
根据具体项目ASP.NET 版本不同有所不同:
- 对于ASP.NET MVC 4 and 5,
Install-Package React.Web.Mvc4
- 对于ASP.NET Core,
Install-Package React.AspNet
- 对于ASP.NET MVC 3,
Install-Package React.Web.Mvc3
- 如果要使用Cassette,还需要
Install-Package Cassette.React
- 如果要使用ASP.NET Bundling and Minification ,还需要
Install-Package System.Web.Optimization.React
我使用的ASP.NET MVC 5 ,官方教程: https://reactjs.net/getting-started/tutorial_aspnet4.html
二、创建项目
1、文档→新建→项目,创建一个ASP.NET MVC 空项目(MVC项目创建在此不详细描述)。
2、右键新建的项目,在浏览中搜索React ,选择“ React.Web.Mvc4 ”,如下图,点击右侧“ 安装”按钮:


3、添加空的HomeController ;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ReactWebDemo.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}
4、添加Index 视图;
@{
Layout = null;
}
<! DOCTYPE html >
< html >
< head >
< meta name ="viewport" content ="width=device-width" />
< title > Hello React </ title >
</ head >
< body >
< div id ="content" ></ div >
< script src ="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js" ></ script >
< script src ="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" ></ script >
< script src ="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js" ></ script >
< script src ="@Url.Content(" ~/libs/scripts/Tutorial.jsx")" ></ script >
</ body >
</ html >
5、添加组件
右键依次添加“ libs→scripts ”文档夹,添加名为“ Tutorial.jsx ” 的JavaScript 文档。
var CommentBox = React.createClass({
render: function () {
return (
<div className="commentBox">
Hello, world ! I am a CommentBox.
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content' )
);
运行结果如下:

转自:https://hk.saowen.com/a/47a91b6dcf2ce248b0c284a8645adafaa34aac75b4d562be49bec1b29a8a5066