Asp.net MVC 使用 ReactJS

新建项目

  1. 新建MVC4 项目
  2. 安装ReactJS.NET
  3. 新建ReactJSController
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    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
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      @{
          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
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    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')
    );<br><br>

   OK 运行项目

posted @   anhuisunfei  阅读(2148)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示