ayano-react
v1.0.2
Published
react app creator
Downloads
27
Readme
Ayano
About project name
ayano is a character at 《目隐都市的演绎者》
Quik start
npm install -g ayano
ayano init <name>
cd <name>
npm start
ayano-script
start
ayano-script start //start app with a webpack devServer
ayano has inner webpack config file, you can use --config -c [path]
to use custom config file
build
ayano-script build // build app
ayano has inner webpack config file, you can use --config -c [path]
to use custom config file
outputConfig
ayano-script outputConfig
This command will out put innner config file to current dir
Proxy
Add proxy settings to package.json
, about config, to see webpack devServer proxy
AyanoReact
Start
npm install --save ayano-react
Features
createApp
const options = {
actions: {}, // redux actions, can be a object or function which is handled by redux-thunk
reducers: <reducer>, // redux reducers pre reducers or combined reducers,
history: history, // a history to create router -> default is hashHistory
routers: [{
path: '/',
component: Home,
}] // a react-router-dom <Route></Route> component props array
}
const app = createApp(options);
app.start(document.querySelector('#root'));
app._store // store that is created;
app._history // history that is used;
app._actions // actions which is bind to dispatch
connectApp
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
<div class="app"></div>
}
}
const mapStateToProps = (state) => {
return {
app: state.app
}
}
connectApp(mapStateToProps)(App)
- the
connectApp
will auto merge actions which is defined at createApp options and bind dispatch
buildConstants
const constants = buildConstants([{
key: "POSTS",
values: ["ALL", "CREATE_EMPTY"]
}, {
key: "POST",
values: ["SELECT", "UPDATE_VALUE", "FINISH_SAVE_POST", "FINISH_CHANGE_STATUS"]
}], "@manage")
// constants is {
// POSTS: {
// ALL: "@manage/POSTS/ALL",
// CREATE_EMPTY: "@manage/POSTS/CREATE_EMPTY"
// },
// POST: {
// SELECT: "@manage/POST/SELECT"
// ......
// }
// }
request
const apis = {
users: {
path:'/users',
method: 'GET'
},
user: {
path: (data) => { return `/user/${data.id}` },// the data is which you pass in
method: "GET"
}
host: 'https://xxx.xxx.xx'
}
const rq = request(apis);
// @params
// path: a path at apis or custom path
// data : request data
// method: request method
// options: advance options
rq('users').then(...) // it will request to https://xxx.xxx.xx/users
rq('user', { id: 122 }).then(...) // it will request to https://xxx.xxx.xx/user/122
rq('/ayano') // it will request to https://xxx.xxx.xx/ayano because '/ayano' is not at apis
CHANGELOG
20171018
- 在request添加header的定义