react jsx组件 2018版

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

react jsx组件 2018版

猜你喜欢