帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:Webpack  SEED  react  WEB  proj  WEBP  es6  
Boilerplate for React, Redux, React-router, ES6 & webpack.

  • 源代码名称:react-seed
  • 源代码网址:http://www.github.com/badsyntax/react-seed
  • react-seed源代码文档
  • react-seed源代码下载
  • Git URL:
    git://www.github.com/badsyntax/react-seed.git
  • Git Clone代码到本地:
    git clone http://www.github.com/badsyntax/react-seed
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/badsyntax/react-seed
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • 种子 Build Status

    使用ES6和 web service构建React应用程序的样板。

    ,这是旧的。 你应该使用 create-react-app

    你所得到

    • React 0.13
    • ES6,ES7 & JSX通过babel实现 ES5
    • web pack,带有热加载器,以及其他有用的加载程序
    • 本地CSS地址
    • Karma,mocha,chain & sinon,用于模拟示例
    • 具有应用操作。存储和示例 Web API 使用的基本通量架构
    • 响应路由器( 特性/React路由器插件)
    • 材质用户界面( 特性/材质用户界面 )

    正在启动

    安装了 git

    git clone --depth=1 https://github.com/badsyntax/react-seed.git my-project

    安装文件

    • npm install -g yo
    • npm install -g generator-react-seed
    • 使用这样的生成器: yo react-seed

    npm脚本

    • npm start - 在 http://localhost:8000 开发和启动开发模式。
    • npm test - 运行测试
    • npm run build - 运行生产生成

    示例

    ### 写入组件:

    // Filename: Menu.jsx'use strict';importstylesfrom'./_Menu.scss';importReactfrom'react';importMenuItemfrom'./MenuItem';let { Component, PropTypes } = React;exportdefaultclassMenuextendsComponent {
     static defaultProps = {
     items: []
     };
     static propTypes = {
     items:PropTypes.array.isRequired };
     render() {
     return (
     <ul className={styles.menu}> {this.props.items.map((item) => {
     return (<MenuItem item={item} />);
     }, this)}
     </ul> );
     }
    }

    ###Writing 测试:

    // Filename: __tests__/Menu-test.jsx'use strict';importReactfrom'react/addons';import { expect } from'chai';importMenufrom'../Menu.jsx';importMenuItemfrom'../MenuItem.jsx';// Here we create a mocked MenuItem component.classMockedMenuItemextendsMenuItem {
     render() {
     return (
     <li className={'mocked-menu-item'}>{this.props.item.label}</li> );
     }
    }// Here we set the mocked MenuItem component.Menu.__Rewire__('MenuItem', MockedMenuItem);describe('Menu', () => {
     let { TestUtils } =React.addons;
     let menuItems = [
     { id:1, label:'Option 1' },
     { id:2, label:'Option 2' }
     ];
     let menu =TestUtils.renderIntoDocument(
     <Menu items={menuItems} /> );
     let menuElem =React.findDOMNode(menu);
     let items =menuElem.querySelectorAll('li');
     it('Should render the menu items', () => {
     expect(items.length).to.equal(2);
     });
     it('Should render the menu item labels', () => {
     Array.prototype.forEach.call(items, (item, i) => {
     expect(item.textContent.trim()).to.equal(menuItems[i].label);
     });
     })
     it('Should render the mocked menu item', () => {
     expect(items[0].className).to.equal('mocked-menu-item');
     });
    });

    ,CSS & web pack

    来自JavaScript组件文件中的import Sass和CSS文件:

    // Filename: app.jsximport'normalize.css/normalize.css';importstylesfrom'./scss/app.scss';
    • 注意:如果从JavaScript组件文件中导入组件Sass文件,那么每个Sass文件都将作为不同编译进程的一部分进行编译,因此你不能共享全局引用。 有关更多信息,请参见
    • Sass包含的路径可以在 webpack/loaders.js 文件中调整。
    • 所有 CSS ( 编译或者其他) 都通过Autoprefixer和样式加载程序运行。 CSS中引用的任何图像/字体等都将被复制到生成目录。
    • CSS文件是以JavaScript导入的顺序组合在一起的,因这里在导入它的他JavaScript文件时应该始终导入 CSS/tlb。
    • 如果不使用本地 CSS,请使用边界方法来避免由于CSS规则的unpredicatable顺序而可能存在的特殊问题。

    HTML文件

    所有必需的.html 文件都使用 lodash.template 编译,并同步到 ./build 目录中:

    // Filename: app.jsximport'./index.html';
    • 你可以在 webpack/loaders.js 文件中调整lodash模板数据。

    约定

    • 对匿名函数使用fat箭头
    • 不要使用 var 使用 letconst

    插件发布

    • npm version patch
    • git push --follow-tags
    • npm login ( 可选)
    • npm publish

    Credits

    这个项目最初是从 https://github.com/tcoopman/react-es6-browserify 分支的。

    许可证

    版权所有( c ) 2015 Richard Willis

    麻省理工学院( http://opensource.org/licenses/MIT )



    文章标签:WEB  proj  react  WEBP  Webpack  es6  SEED  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语