利用  实现react 项目部署

1、创建项目

$ mkdir react03

2、初始化项目

$ npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensible defaults.See `npm help json` for definitive documentation on these fieldsand exactly what they do.Use `npm install 
    
      --save` afterwards to install a package andsave it as a dependency in the package.json file.Press ^C at any time to quit.name: (react03) react03react03version: (1.0.0)description: 利用bower gulp 构建react项目entry point: (index.js)test command:git repository:keywords:author: liuxinzhoulicense: (ISC)About to write to E:\localProject\react03\package.json:{  "name": "react03",  "version": "1.0.0",  "description": "利用bower gulp 构建react项目",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "liuxinzhou",  "license": "ISC"}Is this ok? (yes) yes
    

3、安装相关组件

$ npm install react --save --registry=http://npm.com(代理地址)$ npm install react-dom --save --registry=http://npm.com(代理地址)$ npm install gulp --save --registry=http://npm.com(代理地址)$ npm install --save-dev gulp gulp-browserify gulp-concat gulp-react gulp-connect lodash reactify  --registry=http://npm.com(代理地址)--------------------------------------安装试图渲染组件$  bower init  (一路回车即可)$  npm install bootstrap --save --registry=http://npm.com(代理地址)

4、创建启动器，服务器，

创建gulpfile.js

var gulp = require('gulp'),	connect = require('gulp-connect'),	browserify = require('gulp-browserify'),	concat = require('gulp-concat'),	port = process.env.port || 5000; // 端口gulp.task('browserify',function(){	gulp.src('./app/js/main.js')	.pipe(browserify({		transform: 'reactify',	}))	.pipe(gulp.dest('./dist/js'))});// live reload gulp.task('connect',function(){	connect.server({		// root:'./',		port: port,		livereload: true,	})})// reload Js gulp.task('js',function(){	gulp.src('./dist/**/*.js')	.pipe( connect.reload() )})gulp.task('html',function(){	gulp.src('./app/**/*.html')	.pipe( connect.reload() )});gulp.task('watch',function(){	gulp.watch('./dist/**/*.js',['js']);	gulp.watch('./app/**/*.html',['html']);	gulp.watch('./app/js/**/*.js',['browserify']);})gulp.task('default',['browserify']);gulp.task('server',['browserify','connect','watch']);

根据gulp的配置创建文件

5、创建实例文件

index.html

main.js

var React = require('react');var ReactDOM = require('react-dom');var MyselfApp=require('./components/MyselfApp.js');var mainCom = ReactDOM.render(	
    ,	document.getElementById('app'))

MyselfApp.js

var React= require("react")module.exports=React.createClass({	render:function(){		return(			
    
				
     
利用bower gulp 构建react项目
				
     				
     确定			
    
			)	}})

6、运行项目

$ gulp server

注意：这里gulp的参数是gulpfile.js规定好的 最后一句gulp.task('server',['browserify','connect','watch']);