-
flux是由facebook创建用来构建客户端web应用的一种架构 他是一种单项数据流操作 他更像一种思想 一种模式
flux 分为四个部分
第一个部分 view 视图
第二个部分 action 动作 你操作的一些状态
第三个部分 dispatcher 派发器 相当于一个调控中心 它用来接收actions 或者发送消息 返回 view
第四个部分 store 仓库
- 首先查看当前环境是否安装了webpack
-
- 进入当前项目目录运行node 输入指令webpack
- 还需要安装这几个组件jsx-loader npm install react react-dom jsx-loader --save-dev
-
- 引入 webpackconfig.js
- 根据配置信息配置所需要的出入口文件
- 入口:
- build目录
-
- App.js
- 出口:
- js目录
var webpack = require('webpack');
module.exports = {
entry: [//设置入口
'./build/App.js'
],
output: {//设置出口
path: './js',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude:/node_modules/,
loader: 'jsx-loader',
query:{//配置文件信息
presets:["es2015","react"]//预设置
}
},
]
}
};
-
- 并在目录中创建一个build目录用用来存放原始的文件 ,首先创建一个主文件App.js
- 在运行wbepack查看还缺少什么组件 运行webpack
- 再根据flux分为四个层进行目录创建
-
- 1.模板层 Component
- 2.动作层 Actions
- 3.派发器层 Dispatcher
- 4.仓库层 Store
-
- s1:App.js进行搭建它是用来真是渲染的需要引入组件
-
- var React = require("react")
- var ReactDOM = require("react-dom")
- s2:Component中创建一个TodoController.js