REACTJS.NET 之DEMO 初探

[文章] 浏览(31)  | 2018年12月19日  | 支持服务 | 
[标签]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 版本不同有所不同：

  1. 对于ASP.NET MVC 4 and 5， Install-Package React.Web.Mvc4
  2. 对于ASP.NET Core， Install-Package React.AspNet
  3. 对于ASP.NET MVC 3， Install-Package React.Web.Mvc3
  4. 如果要使用Cassette，还需要Install-Package Cassette.React
  5. 如果要使用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
附件说明
附件