1、安装node 相关包
npm install --save react react-dom superagent
2、安装gulp相关包
npm install --save gulp-browserify gulp reactify gulp-connect
3、编写gulpfile.js 构建React文件
var gulp = require('gulp'), browserify = require('gulp-browserify'), reactify = require('reactify'), connect = require('gulp-connect'); gulp.task('build', function() { gulp.src('index.js'). pipe(browserify({ transform: ['reactify'] })) .pipe(gulp.dest('build.js')) }) gulp.task('connect', function() { connect.server({ port: 3000, livereload: true }) }) gulp.task('html', function() { gulp.src('*.html') .pipe(connect.reload()) }) gulp.task('js',['build'], function() { gulp.src('*.js') .pipe(connect.reload()) }) gulp.task('watch', function() { gulp.watch('*.html', ['html']) gulp.watch('*.js', ['js']) }) gulp.task('default', ['build', 'watch', 'connect'])
4、编写request请求
1、新增常量文件 constants.js 用来存放 request 请求中 Basic 认证的用户名 密码
module.exports={ uname:'123', pwd:'123' }
2、新增调用 API 文件 api.js
var request = require('superagent'); var constants = require('./constants.js'); module.exports = { Get: function(callback) { request .get('http://localhost:53691/api/value') .auth(constants.uname, constants.pwd) .end(function(err, res) { if(err){ alert(err); } callback(res.body); }); } }
5、新增index.js
var React=require('react'), ReactDOM=require('react-dom'), API=require('./Api.js'); var ItemList=React.createClass({ getInitialState:function(){ return { Users:[] } }, componentWillMount:function(){ var users=API.Get(function(users){ this.setState({ Users: users }) }.bind(this)); }, render:function(){ var users=this.state.Users; if(Array.isArray(users)==false)throw new Error('users is not array') var lists=users.map(function(item){ return <li key={item.ID}>{item.ID}:{item.Name}</li> }) return ( <ul> {lists} </ul> ) } }); ReactDOM.render(<ItemList />,document.getElementById('app'))
6、新增index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>SuperAgent!</h1> <div id="app"></div> <script src="build.js/index.js"></script> </body> </html>