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. YUI-compressor 在Linux下安装和使用

    介绍一个非常流行的javascript压缩工具YUI compressor,可以提供更好的压缩效率:该工具由著名的Yahoo Exceptional Performance项目组出品. JSMin非常 ...

  2. C#编程（十九）----------部分类

    部分类 C#中使用关键字partial把类,结构或结构放在多个文件中.一般情况下,一个类全部驻留在单个文件中.但有时候,多个开发人员需要访问同一个类,或者某种类型的代码生成器生成了一个类的某部分,所以 ...

  3. 嗜血法医第一二三季/Dexter全集迅雷下载

    嗜血法医 第一.二.三季 Dexter Season 1 2 3 (2006-2007-2008) 本季看点:都市的夜里,永远藏着你无法想象的秘密.德克斯特·摩根(迈克尔·C·豪尔 Michael C ...

  4. 怎样把vector和string数据传给旧的C API

     通常情况下.旧的C API使用数组合char*指针来进行数据交换而不是vector或string对象. 这种API还将存在非常长的一段时间,假设我们想有效地使用STL.我们就必须与它们和平共处. ...

  5. 解决Using 1.7 requires compiling with Android 4.4 (KitKat); currently using API 4

    有时候我们可能需要将项目的版本降低,比如4.4降低到2.2这样的,可能会遇到类似于这样的错误 Using 1.7 requires compiling with Android 4.4 (KitKat ...

  6. 访问修饰符（C# 编程指南）

    所有类型和类型成员都具有可访问性级别,该级别可以控制是否可以从你的程序集或其他程序集中的其他代码中使用它们. 可以使用以下访问修饰符在进行声明时指定类型或成员的可访问性: public同一程序集中的任 ...

  7. npm ERR! Error extracting ~/.npm/cloudant/1.9.0/package.tgz archive: ENOENT: no such file or directory, open '~/.npm/cloudant/1.9.0/package.tgz'

    修改package.json Thanks machines returning the above error when , just and now all the builds are pass ...

  8. Java Run-Time Data Areas

    前言 本文主要介绍JVM的运行时数据区 来自Oracle文档 Java Virtual Machine Specification -- Chapter 2. The Structure of the ...

  9. java将XML文档转换成json格式数据

    功能 将xml文档转换成json格式数据 说明 依赖包:1. jdom-2.0.2.jar : xml解析工具包;2. fastjson-1.1.36.jar : 阿里巴巴研发的高性能json工具包 ...

  10. Springboot 之 自定义配置文件及读取配置文件注意:配置文件中的字符串不要有下划线 .配置中 key不能带下划线,value可以(下划线的坑,坑了我两天..特此纪念)

    注意:配置文件中的字符串不要有下划线 .配置中  key不能带下划线,value可以 错误的.不能读取的例子: mySet .ABAP_AS_POOLED      =  ABAP_AS_WITH_P ...