1. 程式人生 > >React元件引用

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即可看到對應效果了