React base extension for Roc Applications
npm install roc-web-reactBase extension for reactive web applications built on Roc.
Extends roc-web with React, React Router and Redux and more.
roc by following the main steps at Bootstrap Redux + React applicationAfter these steps you should have roc available globally and be in the directory of your newly generated project that uses roc-web-react.
roc-web-react you can define routes and reducers. Routes provide an easy way map URL resources onto React components. Reducers manages application state. routes.js, reducers.js), but this can also be configured in a roc.config.js in your project or by using the cli. Here are some example integration points.routes.js
``js
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Main from './maincomponent'; // define this react component in your app
export default () => (
);
`
reducers.jsjs`
...
export default function reducer(state, action) {
if (action.type === MY_ACTION) {
// return new state
}
}
Placeholder code will be generated for you and it will be similar to the examples above when using the default base-web-react.
locally.There are some examples in examples/ that show how
roc-web-react can be used directly. To test them out you will need to run npm link to connect them to your checked out version of roc-web-react. A good workflow is then to modify roc-web-react while experimenting in an example app.1. Run
npm install in the base of roc-web-react.
2. Run npm run build in the base of roc-web-react.
3. Run npm link in the base of roc-web-react.
4. Run npm run build -- --watch in the base of roc-web-react.
5. Go to the example you want and run npm link roc-web-react.
6. Using the roc cli run roc dev to get started. Some example may need some extra parameters set to roc dev`