1、组件化开发---webpack
package.json 装载环境
webapck/jsx-loader/css-loader/style-loader/node-sass/sass-loader/url-loader/file-loader
react/react-dom
webpack.config.js
module.exports = {
entry:"./main.js",//入口文件
output:{//输出路径
path:"./",//输出路径
filename:"bundle.js"//输出文件名称
},
module:{//依赖
loaders:[
{
test:/\.js$/,//正则表达式，把我们的js结尾的文件按照我们的jsx-loader进行解析（如果你 的组件后缀是jsx的，那么此时你就应该写/\.jsx$/）
loader:"jsx-loader"//依赖的loader
},{
test:/\.less$/,
loader:"style!css!less"
},
{ test:/\.(png|jpg)$/,
loader:'url-loader?limit=10000'
},//限制大小小于10k的
{ //处理文字时使用
test:/\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
loader:'file-loader?name=[name].[ext]'
}
]
}
}
// 入口文件为main.js
//输出文件名称为bundle.js
目录结构
react
css
main.less
js
MainFoot.js
Home.js
Kind.js
Cart.js
User.js
More.js
libs
zepto.js
demo16_路由.html
main.js
bundle.js
2、入口文件
main.js
//引入react模块,必须引入，每一个组件视情况而定引入react-dom
var React = require("react");
var ReactDOM = require("react-dom");
//引入需要自定义的组件
var MainFoot = require("./projs/MainFoot");
//当前组件的写法，头/内容/底部/底部中引入了MainFoot模块
var Main = React.createClass({
render:function(){
return (
<div className="rootBox">
<header id="header">header</header>
<section id="content"></section>
<footer id="footer"></footer>
</div>
)
}
});
//将我们的Mian组件渲染到页面上
ReactDOM.render(,document.getElementById("app"));
3.MainFoot.js
var React = require("react");
var ReactDOM = require("react-dom");
var MainFoot = React.createClass({
render:function(){
return (
8、 轮播图
Home.js
未完待续……
