需要安装一些插件
gulp-webpack
jsx-loader
react-dom
react
gulp-concat
browser-sync
gulp
gulpfile.js
var webpack=require("gulp-webpack");
var loader=require("jsx-loader");
var dom=require("react-dom");
var react=require("react");
var concat=require("gulp-concat");
var browser=require("browser-sync");
var gulp=require("gulp");
//webpack配置
var webpackConfig = {
output:{
filename: 'index.js'
},
devtool: 'inline-source-map',
module:{
loaders:[
{test: /\.jsx$/, loader: 'jsx-loader'}
]
},
resolve:{
extensions:['','.js','.jsx']
}
}
//主程序默认方法
gulp.task("default",["script"],function(){
browser.init({
server:{
baseDir:"./"
}
})
})
//合并js以及解析jsx文件
gulp.task("script",function(){
gulp.src("./jsx/**/*jsx")
.pipe(webpack(webpackConfig))
.pipe(gulp.dest("./www/script"))
.pipe(browser.stream())
})
首页面(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box"></div>
解析后的js文件必须在底部引用
<script src="www/script/index.js"></script>
</body>
</html>
子组件(header.jsx)
//引入react
var React=require("react");
//引入react-dom
var reactdom=require("react-dom");
//2018版的写法,继承React.Component
class Header extends React.Component{
//es6方法写法
render(){
return (
<p>我是头部哈哈哈</p>
)
}
}
//允许被引用,名字是类名
module.exports=Header;
父组件(index.jsx)
//还是引用react和react-dom
var React=require("react");
var Reactdom=require("react-dom");
//导入被引用的子组件
var Header=require("./commponent/Header.jsx");
function Welcome(){
//这里写的就是父组件的模板内容,类似VUE里面的template,这里引用子组件元素
return (<h1>你好<Header/></h1>)
}
//规定格式写法
Reactdom.render(
//内容标签,与父组件的function名一致
<Welcome />,
//类似于vue内index.html(首页)里面的<div id="APP"></div>,这里绑定到对应的网页元素
document.getElementById("box")
)
然后直接运行gulp即可看到对应效果了