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')

);

　　运行结果如下：

　　

ReactJS.NET 之 Demo 初探的更多相关文章

  1. BERT-Pytorch demo初探

    https://zhuanlan.zhihu.com/p/50773178 概述 本文基于 pytorch-pretrained-BERT(huggingface)版本的复现,探究如下几个问题: py ...

  2. 基于netty框架的Socket传输

    一.Netty框架介绍 什么是netty?先看下百度百科的解释:         Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开 ...

  3. 初探ReactJS.NET 开发

    ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手.它由Facebook创建,并在2013年首次发布.Facebook认为React在处理SPA问题上可以成 ...

  4. ReactJs 入门DEMO（转自别人）

    附件是分享的一些他人的ReactJs入门DEMO,以前版本使用的是JSXTransformer.js,新版的用browser.min.js替代了. DEMO 下载地址:http://files.cnb ...

  5. 【一起学源码-微服务】Feign 源码一：源码初探，通过Demo Debug Feign源码

    前言 前情回顾 上一讲深入的讲解了Ribbon的初始化过程及Ribbon与Eureka的整合代码,与Eureka整合的类就是DiscoveryEnableNIWSServerList,同时在Dynam ...

  6. Mediapipe 在RK3399PRO上的初探（一）(编译、运行CPU和GPU Demo, RK OpenglES 填坑，编译bazel)

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  7. weapp微信小程序初探demo

    https://github.com/donglegend/weapp-demo 参考文档开发工具安装微信weapp API git项目源码微信小程序 demo效果展示效果预览

  8. RocketMQ初探(二)之RocketMQ3.26版本搭建（含简单Demo测试案例）

    作为一名程序猿,要敢于直面各种现实,脾气要好,心态要棒,纵使Bug虐我千百遍,我待它如初恋,方法也有千万种,一条路不行,换条路走走,方向对了,只要前行,总会上了罗马的道. Apache4.x最新版本既 ...

  9. 微信小程序初探(二):阅读官方demo源码

    阅读demo有助于理解逻辑,而且demo源码中应该包含了框架开发人员想要表达的意思的精华,先从app.js着手来阅读. 附带贴下说明: https://mp.weixin.qq.com/debug/w ...

随机推荐

  1. 使用Coding4Fun工具包

    Coding4Fun是一款很受WP开发者喜爱的开源类库,对于开发者来说,Coding4Fun上手很简单.只要从CodePlex下载Coding4Fun工具包,下载完成后,解压文件到一个文件夹中,里面有 ...

  2. 关于面试总结11-selenium面试题

    前言 面试web自动化必然会问到selenium,问selenium相关的问题定位是最基本的,也是自动化的根本,所以面试离不开元素定位问题. 之前看到招聘要求里面说"只会复制粘贴xpath的 ...

  3. java项目实现流水号自动增长

    项目中有一个规则编号字段,从1开始,编号长度为5位,那么第一条数据编号就是00001. 实现的基本思路就是项目启动时,从数据库获取当前最大值,作为静态变量存储: 业务获取新的编码,考虑并发问题,获取编 ...

  4. HttpSession javax.servlet.http.HttpServletRequest.getSession(boolean arg0)理解

    request.getSession()和request.getSession(true)意思相同:获取session,如果session不存在,就新建一个 reqeust.getSession(fa ...

  5. ScrollView滚动条的各种设置

    ScrollView滚动条不显示:android:scrollbars="none"ScrollView滚动条恒显示:android:fadeScrollbars="fa ...

  6. float,double等精度丢失问题 float,double内存表示

    问题提出:12.0f-11.9f=0.10000038,"减不尽"为什么? 来自MSDN的解释: http://msdn.microsoft.com/zh-cn/c151dt3s. ...

  7. Java NIO: Non-blocking Server

    Even if you understand how the Java NIO non-blocking features work (Selector, Channel, Buffer etc.), ...

  8. REST构架风格介绍之二：CRUD

    转载自:Todd  Wei    http://www.cnblogs.com/weidagang2046/archive/2009/05/09/1453065.html 上一节我们通过两个例子初步体 ...

  9. MSDN离线版 发现不少人都在找这个

    MSDN离线版 发现不少人都在找这个,无意中找到 VS2012旗舰版 选好语言,建议选那个ISO的下载

  10. 样条之埃尔米特(Hermite)插值函数

    核心代码: ////////////////////////////////////////////////////////////////////// // 埃尔米特等距插值 /////////// ...