帮酷LOGO
  • 显示原文与译文双语对照的内容
Project boilerplate using React, Redux and Uniloc

  • 源代码名称:starter-kit
  • 源代码网址:http://www.github.com/unicorn-standard/starter-kit
  • starter-kit源代码文档
  • starter-kit源代码下载
  • Git URL:
    git://www.github.com/unicorn-standard/starter-kit.git
  • Git Clone代码到本地:
    git clone http://www.github.com/unicorn-standard/starter-kit
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/unicorn-standard/starter-kit
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • Unicorn标准入门套件

    这个初学者工具包为你提供了代码和惯例,你需要直接构建基于web的应用程序的反应/。

    的幸福是六线

    先决条件:node.js 和 git 。

    git clone https://github.com/unicorn-standard/starter-kit.git your-repo-name
    cd your-repo-name
    npm install
    npm start
    npm run open # (from a different console window, otherwise open localhost:3000)

    很快,你就得到了一个ready-to-customise应用程序 !

    Unicorn Standard Starter Kit

    为什么使用Unicorn标准入门套件?

    • 你的目录结构在 git clone 中立即进行排序
    • ES6编译和自动重新加载开发服务器为你配置了 web packBabel 。
    • Redux 是一个非常简单的建模数据的方法,它拥有强大的社区支持
    • 反应是一种非常简单的呈现视图的方式,它由Facebook维护
    • 简单 UniLoc -based路由包含- 易于理解,易于定制
    • Pacomo CSS约定消除了由冲突样式引起的Bug
    • 角色的Pattern 允许你轻松地对存储库中的更改做出反应,而不需要强制执行。
    • redux存储库已经配置了导航,数据和视图模型
    • 带有简单文档编辑器的视图,布局和 reducer !

    正在启动

    把你的NAME 放在上面
    • package.json 中更新 NAME,desription和作者
    • 更新 src/index.html 中的应用程序标题
    • 重新启动dev服务器( 确保在对 src/index.html 进行任何更改后执行这里操作)
    确保你的编辑器很高兴
    • 在扩展 .js.jsx 上设置ES6语法突出显示( 请参见 babel-sublime )
    开始构建
    • src/constants/ROUTES.js 添加路由
    • 为你的路由器添加导航菜单项 src/components/ApplicationLayout.jsx
    • src/components 中添加路由器的组件
    • src/actionssrc/reducers/view 中为组件模型的视图添加减速器和动作
    • 添加你的组件reqiures在 src/reducers/data 中的任何数据模型
    • 添加容器以将 state 存储和 dispatch 映射到 src/containers 中的组件道具
    • src/Application.jsx 中配置路由
    • 沐浴在你创造的荣耀中
    • 不要忘记提交你的更改并推送到Bitbucket或者 GitHub !
    你的朋友
    • 运行 gulp dist 以将你的应用程序的网络构建输出到 dist

    结构

    入口点

    main.js 是应用程序的入口点。 它定义了,存储,处理任何调度到,存储的操作,处理浏览器URL的当前更改。

    大多数 above 都是通过 main.js 快速读取的- 如果有一件事可以能会让你成为"有趣",它将是 block 。

    角色

    阅读了演员的介绍。

    每次存储状态改变时,就会在存储的当前状态状态上调用一系列函数。 这些函数称为角色

    这里规则有一个重要的例外: 如果 main.js 当前正从以前的更新中调用序列,则不会调用 actor 。 这允许序列中的早期参与者向存储分配动作,随后的参与者在序列中接收到更新后的更新后的状态。

    完成这里操作的代码非常小:

    let acting =falsestore.subscribe(function() {
     // Ensure that any action dispatched by actors do not result in a new// actor run, allowing actors to dispatch with impunity.if (!acting) {
     acting =truefor (let actor of actors) {
     actor(store.getState(), store.dispatch.bind(store))
     }
     acting =false }
    })

    角色是在 src/actors/index.js 中定义的。 默认情况下,它运行以下顺序:

    • 如果当前位置应重定向到其他位置,则重定向器 dispatch
    • 渲染器 - 使用反应呈现你的组件

    模型

    你的模型( 。例如 。减速器和动作) 预先配置了三个部分:

    导航

    navigation 状态包含以下信息:

    • location 是为当前URL返回常量函数的ROUTESlookup的对象。 使用基于默认UniLoc的ROUTES 对象,这将有一个字符串 name 属性和包含任何路由参数的options 对象。
    • 如果已经调度导航 start 操作,但浏览器还没有更改 URL,则 transitioning 为 true
    数据

    可以将 data 状态视为应用程序的数据库。 如果应用程序从远程服务器读取数据,则应将它的存储在。 任何元数据也应该存储在这里,包括它获取的时间或者它当前的版本号。

    视图

    view 状态为查看应用程序的每个视图具有一个属性,保存它的当前状态。 例如窗体状态应存储在视图模型中。

    目录

    • src/actions - Redux操作创建者
    • src/actors - 处理对存储状态的更改
    • src/components - 响应组件,尽可能无状态
    • src/constants - 定义无状态数据
    • src/containers - Unstyled"智能"组件,采用存储和 dispatchstate,可以能导航 location,并传递给"哑"组件
    • src/reducers - Redux减速器
    • src/static - 将在生成时跨 root 目录复制的文件
    • src/styles - 独立组件样式表的帮助器
    • src/utils - 不特定于应用程序的通用代码
    • src/validators - 函数,该函数采用包含用户项的对象并返回包含任何错误的对象

    其他目录:

    • build - 由开发服务器生成的中间文件。 不要触摸这些。
    • dist - gulp dist的输出,它包含你的发行版应用程序。
    • config/environments - 构建系统将根据当前的构建环境将其中一个分配给 environment MODULE 。

    主要应用程序文件:

    • src/Application.jsx - 你的顶级应用程序响应组件
    • src/index.html - 单个页面应用程序的单页
    • src/main.js - 应用程序点的入口
    • src/main.less - 应用程序的全局样式

    主要生成文件:

    待办事项

    • 监视 staticindex.html 进行更改,并在适当时将它们复制到 build



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