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. Javascript 中的arguments

    arguments是当前正在执行的function的一个参数,它保存了函数当前调用的参数.   使用方法:function.arguments[i]. 其中function.是可选项,是当前正在执行的 ...

  2. C#+arcengine获得栅格数据的像素值（高程）

    此文问获得栅格数据的像元值(即高程),有可能部分见解不到位,望大神看到了不惜指教! /// <summary> ///  得到高程(通过像素值)         /// </summ ...

  3. Python 模块 re （Regular Expression）

    使用 Python 模块 re 实现解析小工具   概要 在开发过程中发现,Python 模块 re(Regular Expression)是一个很有价值并且非常强大的文本解析工具,因而想要分享一下此 ...

  4. [转]一次非常有意思的sql优化经历

    From :http://www.cnblogs.com/tangyanbo/p/4462734.html 补充:看到这么多朋友对sql优化感兴趣,我又重新补充了下文章的内容,将更多关于sql优化的知 ...

  5. Django静态文件的加载以及STATIC_URL、 STATIC_ROOT 、STATICFILES_DIRS的区别

    Djangon生产环境静态资源的处理 Django 关闭DEBUG模式后,就相当于是生产环境了. Django框架一旦作为生产环境,它的静态文件访问接口就不应该从Django框架中走,必须在Djang ...

  6. NOI 2015 Bless All！

    明天day1,加油!RP++! (话说出题人貌似是dyf&lyd?好虚啊……

  7. nodejs中thiskeyword的问题

    再分析详细内容之前,必需要好好阅读下面下面两篇blog 学习Javascript闭包(closure) Javascript的this使用方法 这两篇文章是阮一峰老师对Javascript的闭包和th ...

  8. NIO中的heap Buffer和direct Buffer区别

    在Java的NIO中,我们一般采用ByteBuffer缓冲区来传输数据,一般情况下我们创建Buffer对象是通过ByteBuffer的两个静态方法: ByteBuffer.allocate(int c ...

  9. JS 判断上传 文件 大小

    随着HTML5 的发展,我们可以用file控件的size属性来获取客户端 上传文件的大小,但是 我今天测试 发现IE10支持,IE11的某个版本不支持, 于是就借用img控件来加载一此, 以此来获取文 ...

  10. Valid Number leetcode java

    题目: Validate if a given string is numeric. Some examples: "0" => true " 0.1 " ...