React组件引用

需要安装一些插件
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即可看到对应效果了

猜你喜欢