React元件引用
阿新 • • 發佈：2018-11-03
需要安裝一些外掛
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即可看到對應效果了