Roc-web-react NPM

roc-web-react

Base extension for reactive web applications built on Roc.
Extends roc-web with React, React Router and Redux and more.

How to build an application

First make sure to install roc by following the main steps at Bootstrap Redux + React application

After these steps you should have roc available globally and be in the directory of your newly generated project that uses roc-web-react.

Simple: use provided entrypoints

When creating an application based on roc-web-react you can define routes and reducers. Routes provide an easy way map URL resources onto React components. Reducers manages application state.
Roc will look for routes and reducers by convention (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

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import Main from './maincomponent'; // define this react component in your app

export default () => (
    <Route>
        <IndexRoute component={ Main } />
    </Route>
);

reducers.js

...
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.

Complex: define your own entrypoints and middlewares

This will be documented in the future.

Get started developing on Roc stack itself (advanced users only)

Prerequisite: You have set up and linked roc-web 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.

Run npm install in the base of roc-web-react.
Run npm run build in the base of roc-web-react.
Run npm link in the base of roc-web-react.
Run npm run build -- --watch in the base of roc-web-react.
Go to the example you want and run npm link roc-web-react.
Using the roc cli run roc dev to get started. Some example may need some extra parameters set to roc dev