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. 在ASP.NET MVC中使用Knockout实践07，自定义验证信息的位置与内容

    在前两篇中,体验了Knockout的基本验证和自定义验证.本篇自定义验证信息的显示位置与内容. 自定义验证信息的显示位置 通常,Knockout的验证信息紧跟在input后面,通过validation ...

  2. 委托、Lambda表达式、事件系列02,什么时候该用委托

    假设要找出整型集合中小于5的数. static void Main(string[] args) { IEnumerable<int> source = new List<int&g ...

  3. Windows Phone本地数据库（SQLCE）：13、更新数据（翻译）

    这是“windows phone mango本地数据库(sqlce)”系列短片文章的第十三篇. 为了让你开始在Windows Phone Mango中使用数据库,这一系列短片文章将覆盖所有你需要知道的 ...

  4. 怎样在xcode5中使用低版本sdk，解决兼容ios7ui问题

    问题 令人头疼的是,xcode每次升级都会使用最新版本的sdk,而且只有最新版本的sdk,对之前老版本的sdk都没有默认安装,这搞的最近我很头疼, 最近我升级到Xcode5.0版本,编译后运行后,在i ...

  5. ArcGIS Pro 切割打印

    ArcGIS Pro 切割打印

  6. 利用ViewStub来延迟加载视图

    很多情况下,我们的视图可能会随着用户的操作的不同而变化,比如一个新的页面包含多个控件,但仅仅在用户点击这个按钮后,所有的控件才能完全显示.也就是说一上来可能就显示一个控件,点击按钮后把其他隐藏的控件再 ...

  7. CentOS6.4 xen4.2 虚拟机 桥接网络设置

    安装好xen后,可以使用virt-manager来配置虚拟网络 virbr0,以及创建虚拟机 都使用virt-manager. [虽说可以使用xm create XX命令行根据脚本创建,但是从来都不知 ...

  8. go语言之进阶篇显式调用panic函数

    1.显式调用panic函数 示例: package main import "fmt" func testa() { fmt.Println("aaaaaaaaaaaaa ...

  9. Libnids读书笔记 （转）

    一.当日工作(或学习)内容及进展情况(以条目式陈述,必要时配图说明) Libnids读书笔记: Libnids(Library Network Intusion Detection System)网络 ...

  10. 构建-0 Gradle DSL 属性和方法【API】

    Android Plugin DSL Reference This is the DSL reference for Android Gradle Plugin. Start reading by f ...