Skip to content
No description, website, or topics provided.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app/page
css
data
dist
font-awesome
fonts
img
js
src
tools
README.md
index.html

README.md

react-cart-example

演示地址

React购物车 演示地址

所涉及的第三方库

本项目是react+reflux+react-route的使用示例。主要涉及的js第三方库有:

目录说明

  • app r.js工具将dist目录下的文件进行打包,生成后的文件放在app目录
  • css 样式文件
  • data 示例用的json数据文件
  • dist 通过react的jsx工具编译生成的目录,是src的js版本
  • font-awesome
  • fonts
  • img
  • js
  • --langs 语言包文件
  • src 源程序目录,里面都是jsx文件,通过react的jsx工具可以编译到dist目录,生成js文件
  • tools requirejs的r.js工具使用的配置文件,可以将dist目录的文件进行打包,主要是针对dist/page下的文件进行打包,生成的目录放在app目录

Flux模式说明

╔═════════╗       ╔════════╗       ╔═════════════════╗
║ Actions ║──────>║ Stores ║──────>║ View Components ║
╚═════════╝       ╚════════╝       ╚═════════════════╝
     ^                                      │
     └──────────────────────────────────────┘

主要要理清楚Action,Store,Component的关系,记住三者之间是单向的数据流关系,Component需要更新就发起Action请求,由Action去调动Store,而Store的更新又可以通过Store与Component的绑定关系更新Component(利用Component的State属性)

相关工具在本项目的应用

  • jsx文件编绎成js文件:借助react-tools:,命令行示例如下:
jsx -x jsx -w src/ dist/
  • 项目中用到的打包工具是r.js,命令行示例如下:
cd tools
r.js -o build.js

示例文件未使用打包后的js文件,系统会加载用到的所有js文件,为减少js请求,可以将这些js进行统一打包。需要可以借助r.js打包工具进行打包,tools/build.js的配置是将dist/page的文件打包并到app/page目录,有关r.js的使用请自行查询。

打包完成后,要使用打包文件,请修改index.html的require.config部分,将'app':'../dist'改为'app':'../app'即可

You can’t perform that action at this time.