在根目录下创建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>