关于ReactJs组件开发

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 (

           

                

header

               

               

            

                         )

                    }

              });

        //将我们的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

未完待续……