# roc-web-react
![stability beta](https://img.shields.io/badge/stability-beta-yellow.svg)
[![roc](https://img.shields.io/npm/v/roc-web-react.svg)](https://www.npmjs.com/package/roc-web-react)
[![build status](https://travis-ci.org/vgno/roc-web-react.svg)](https://travis-ci.org/vgno/roc-web-react)
[![Coverage Status](https://coveralls.io/repos/vgno/roc-web-react/badge.svg?branch=master&service=github)](https://coveralls.io/github/vgno/roc-web-react?branch=master)
[![Code Climate](https://codeclimate.com/github/vgno/roc-web-react/badges/gpa.svg)](https://codeclimate.com/github/vgno/roc-web-react)
[![Issue Count](https://codeclimate.com/github/vgno/roc-web-react/badges/issue_count.svg)](https://codeclimate.com/github/vgno/roc-web-react)
[![Dependency Status](https://david-dm.org/vgno/roc-web-react.svg)](https://david-dm.org/vgno/roc-web-react)

Base extension for reactive web applications built on Roc.  
Extends [`roc-web`](https://github.com/vgno/roc-web) with [React](http://facebook.github.io/react), [React Router](https://github.com/rackt/react-router) and [Redux](https://github.com/rackt/redux) and more.

## How to build an application
First make sure to install `roc` by following the main steps at [Bootstrap Redux + React application](https://github.com/vgno/roc#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](https://github.com/rackt/react-router) provide an easy way map URL resources onto [React](https://github.com/facebook/react) components. [Reducers](http://rackt.org/redux/docs/basics/Reducers.html) 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`
```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`
```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](https://github.com/vgno/roc-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](https://github.com/vgno/roc-web) `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.

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`

## Inherited from roc-web
Same configuration concepts apply.  
Read details at [roc-web](https://github.com/vgno/roc-web)