本文目录
目录
*1.安装环境
*2.Hello World
*3.运行
1.安装环境
目前的环境是VS2015 Community + Win7x64
需要安装一下nodejs+react+webpack
安装nodejs：[Win]
安装VS2015 nodejs插件：Node.js Tools for VS
这样写require引用的时候会有提示
打开cmd命令行
安装webpack:
npm install -g webpack
安装解析jsx的：
npm install jsx-loader --save-dev
安装react
npm install --save react
安装react-dom
npm install react-dom
安装http-server 用于创建web服务
npm install --save-dev http-server
2.Hello World
(1)VS2015新建一个空白的ASP.NET项目：
project--
|
|--components
| |
| |--hello.jsx
| |--index.jsx
|
|--index.html
|--package.json
|--webpack.config.js
(2)在空白项目中新建文件夹 components 放置组件（hello.jsx,hello.jsx）
一个简单基本组件 hello.jsx
'use' strict
var React=require('react')
module.exports = React.createClass({
displayName: 'HelloReact',
render: function () {
return <div>Hello React</div>
}
});
创建 index.jsx 来封装组件
'use strict';
var React = require('react')
var ReactDOM=require('react-dom')
var Hello = require('./hello')
//废弃方法
//React.render(<Hello />, document.getElementById('content'))
//上面一个很早就废弃了，下面的虽然能正常使用，但提示说也已经废弃
//React.renderComponent(<Hello/>,document.getElementById('content'))
//于是改用react-dom
ReactDOM.render(<Hello/>,document.getElementById('content'))
配置一下 webpack
项目根目录下新建webpack的配置文件 webpack.config.js
module.exports = {
entry: './components/index.jsx',//控件输出文件
output: {
filename: 'bundle.js', //默认名字，可以不用管 bundle
// webpack-dev-server运行目录和端口,服务启动时候，bundle.js会生成到mytest目录下
// 要注意这里的端口号 8889 和文件夹名称 mytest 可以自己随意取，但要和 package.json 和 index.html 引用的路径匹配
publicPath: 'http://localhost:8889/mytest'
},
module: {
loaders: [
{
//告诉 webpack 用 jsx-loader 来解析所有的 *.jsx 文件
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony'
}
]
},
externals: {
//不要捆绑 'react' npm 包到bundle.js
//但是可以从全局 'React' 变量中取得
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx']
}
}
创建 index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Hello World</title>
<meta charset="utf-8" />
<script src="./node_modules/react/dist/react-with-addons.js"></script>
</head>
<body>
<div id="content">
</div>
<!--注意这里的路径，要和配置文件端口设置一致-->
<script src="http://localhost:8889/webpack-dev-server.js"></script>
<script type="text/javascript" src="http://localhost:8889/mytest/bundle.js"></script>
</body>
</html>
创建 package.json 文件
{
"scripts": {
"start": "npm run server | npm run dev",
"server": "./node_modules/.bin/http-server -p 8080",//注意端口号
"dev": "webpack-dev-server --progress --colors --port 8889"//端口号要和index.html和webpack.config.js一致
},
"name": "hello-world",
"version": "0.1.0",
"main": "components/index.js",
"dependencies": {
"react": "^0.14.7"//这里配置的时候VS2015会搜索npm已经安装的版本
//update 2016-07-18 当前react版本:15.2.1,已经不能再使用上述 "react":"^0.14.7"
//在这里需要修改一下使用react-dom
"react-dom": "^15.2.1"
},
"devDependencies": {
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1",
"jsx-loader": "^0.13.2",
"http-server": "^0.9.0"
}
}
3.运行
npm run start
如果一切没问题，在浏览器打开
http://localhost:8889/index.html
Hello React
使用React Developer Tools（Chrome的插件）可以看到生成的html代码
<HelloReact>
<div>Hello React</div>
</HelloReact>
参考文档: