react jsx元件 2018版
阿新 • • 發佈：2018-11-11
在根目錄下建立component和pages資料夾
在pages下建立Header.jsx:
程式碼如下:
var React=require("react");
class Header extends React.Component {
render() {
return (
<h1>Hello World!</h1>
);
}
}
module.exports=Header;//這句話是要把定義的元件Header釋出出去,在下邊的整合的index.jsx引用;
Footer.jsx:
var React=require("react");
class Footer extends React.Component {
render() {
return (
<h1>Hello World!Footwer</h1>
);
}
}
module.exports=Footer;
在component下建立index.jsx
程式碼如下:
var React=require("react");
var ReactDom=require("react-dom");
var Footer=require("./../pages/Footer");
var Header=require("./../pages/Header");
class Main extends React.Component{
render () {
return(
<div>
<Header/>
this is MyReact!
<Footer/>
</div>
)
}
}ReactDom.render(<Main/>,document.getElementById("main"));
根目錄下gulpfile.js檔案
var gulp = require('gulp');
var webpack = require('gulp-webpack');
var browserSync = require('browser-sync').create();
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(){
browserSync.init({
server:{
baseDir:'./www/'
},
open: true
})
gulp.watch('./jsx/**/*.jsx', ['script']);
})
gulp.task('script', function(){
gulp.src('./jsx/component/index.jsx')
.pipe(webpack(webpackConfig))
.pipe(gulp.dest('./www/script/'))
.pipe(browserSync.stream());
})建立資料夾www/script
在www下建立index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="main">
this is myReact!
</div>
<script type="text/javascript" src="script/index.js"></script>
</body>
</html>