Asp.net MVC 使用 ReactJS

新建項目

1. 新建MVC4 項目
2. 安裝ReactJS.NET
3. 新建ReactJSController

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.Mvc;
   
   namespace ReactJsDemo.Controllers
   {
       public class ReactJSController : Controller
       {
           //
           // GET: /ReactJS/
           public ActionResult Index()
           {
               return View();
           }
   	}
   }
   

    

   1. 新建視圖 Index.cshtml

      @{
          ViewBag.Title = "Index";
      }
      @section styles{
          <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
          <style type="text/css">
              body {
                  padding-top: 50px;
                  padding-bottom: 20px;
              }
          </style>
      }
      @section scripts{
          <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
          <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
          <script src="http://cdn.bootcss.com/react/0.14.4/react.min.js"></script>
          <script src="http://cdn.bootcss.com/react/0.14.4/react-dom.min.js"></script>
      
          <script src="~/Scripts/HelloWorld.jsx" ></script>
      }
      
      <div id="content"></div>
      

      　　

      　　
4. 新建 React jsx 文件 HelloWorld.jsx

   var Hello = React.createClass({
           getInitialState: function () {
             return {
               opacity: 1.0
             };
           },
   
           componentDidMount: function () {
             this.timer = setInterval(function () {
               var opacity = this.state.opacity;
               opacity -= .05;
               if (opacity < 0.1) {
                 opacity = 1.0;
               }
               this.setState({
                 opacity: opacity
               });
             }.bind(this), 100);
           },
   
           render: function () {
             return (
               <div style={{opacity: this.state.opacity}}>
                 Hello {this.props.name}
               </div>
             );
           }
         });
   ReactDOM.render(
     <Hello  name="world" />,
     document.getElementById('content')
   );
   
   

　　　OK 運行項目