<commit_before>## Table of Contents

* [Overview](#overview)
* [Demo](#demo)
* [Usage](#usage)
  * [Using with the application router](#using-with-the-application-router)
  * [Using inside of a component](#using-inside-of-a-component)
  * [Variables](#variables)
* [API](#api)
  * [Added Backbone attributes](#added-backbone-attributes)
* [A note about React Router versions](#a-note-about-react-router-versions)
* [Testing](#testing)

## Overview

React Router JSON API is a library that provides declarative co-located [JSON
API](http://jsonapi.org) data loading for
[React](https://facebook.github.io/react/) components using [React
Router](https://github.com/ReactTraining/react-router/tree/v3) version 3.x.

React Router JSON API loads data into [Backbone](http://backbonejs.org) models
and uses an object-based query configuration system.

Data loading occurs after each route transition.  React Router JSON API can be
used in two ways: with the top-level application router in order to load data
based on the current page URL or with a router defined within a component's
render function that is connected to a "memory history" instead of the browser
history in order to manage data loading in part of an application without
affecting the page URL.

React Router JSON API generates query URLs based on query definitions specified
in terms of the React Router route information in addition to query variables
(per-component query parameters that can be modified to trigger an update).

The Backbone model and collection API can be used to update and persist model
state.  In order to keep the view up-to-date, each component subscribes to
relevant Backbone events for the models and collections from which it renders
data.

React Router JSON API relies on
[Backbone-relational](http://backbonerelational.org), a comprehensive solution
for managing nested Backbone models.

A demo is available at <http://appmagine.github.io/react-jsonapi/>.

## Usage

### Using With the Application Router

```javascript
import Backbone from 'backbone';
import 'backbone-relational';

import React from 'react';
import ReactDOM from 'react-dom';
import createReactClass from 'create-react-class';
import { Router, Route, browserHistory } from 'react-router';
import { withJsonApi, AsyncProps } from 'react-router-json-api';

/* First some Backbone models are defined. */

const Filling = Backbone.RelationalModel.extend({
    urlRoot: '/fillings',
    defaults: { type: 'fillings' }
});

const Taco = Backbone.RelationalModel.extend({
    urlRoot: '/tacos',
    defaults: { type: 'tacos' },
    relations: [
        {
            type: Backbone.HasMany,
            key: 'fillings',
            relatedModel: Filling
        }
    ]
});

const TacoCollection = Backbone.Collection.extend({
    model: Taco,
    urlRoot: '/tacos'
});

/* This example uses function components.  React Router JSON API also works with
   React components created using createReactClass() and ES6 classes. */ 

const TacoItem = withJsonApi({
    fragments: {
        taco: {
            model: Taco,
            fields: ['amount']
            relations: [
                {
                    key: 'fillings',
                    fields: ['name', 'amount']
                }
            ]
        }
    }
})(function TacoItem({ taco }) {
    return (
        <div>
            Amount: {taco.get('amount')}
            <h4>Fillings</h4>
            <ul>
                {taco.get('fillings').map((filling) => {
                    return (
                        <li key={filling.id}>
                            Name: {filling.get('name')},
                            Amount: {filling.get('amount')}
                        </li>
                    );
                })}
            </ul>
        </div>
    );
});

const TacoList = withJsonApi({
    queries: {
        tacos: (params, query, vars) => {
            return {
                model: TacoCollection,
                fields: ['name'],
                fragments: [
                    TacoItem.fragments.taco
                ]
            };
        }
    }
})(function TacoList({ tacos, queries }) {
    if (queries.loading) {
        return (
            <div>Loading...</div>
        );
    }

    return (
        <div>
            {tacos.map((taco) => {
                return (
                    <div key={taco.id}>
                        Name: {taco.get('name')},
                        <TacoItem taco={taco} />
                    </div>
                );<commit_msg>remove loading from example in docs<commit_after>## Table of Contents

* [Overview](#overview)
* [Demo](#demo)
* [Usage](#usage)
  * [Using with the application router](#using-with-the-application-router)
  * [Using inside of a component](#using-inside-of-a-component)
  * [Variables](#variables)
* [API](#api)
  * [Added Backbone attributes](#added-backbone-attributes)
* [A note about React Router versions](#a-note-about-react-router-versions)
* [Testing](#testing)

## Overview

React Router JSON API is a library that provides declarative co-located [JSON
API](http://jsonapi.org) data loading for
[React](https://facebook.github.io/react/) components using [React
Router](https://github.com/ReactTraining/react-router/tree/v3) version 3.x.

React Router JSON API loads data into [Backbone](http://backbonejs.org) models
and uses an object-based query configuration system.

Data loading occurs after each route transition.  React Router JSON API can be
used in two ways: with the top-level application router in order to load data
based on the current page URL or with a router defined within a component's
render function that is connected to a "memory history" instead of the browser
history in order to manage data loading in part of an application without
affecting the page URL.

React Router JSON API generates query URLs based on query definitions specified
in terms of the React Router route information in addition to query variables
(per-component query parameters that can be modified to trigger an update).

The Backbone model and collection API can be used to update and persist model
state.  In order to keep the view up-to-date, each component subscribes to
relevant Backbone events for the models and collections from which it renders
data.

React Router JSON API relies on
[Backbone-relational](http://backbonerelational.org), a comprehensive solution
for managing nested Backbone models.

A demo is available at <http://appmagine.github.io/react-jsonapi/>.

## Usage

### Using With the Application Router

```javascript
import Backbone from 'backbone';
import 'backbone-relational';

import React from 'react';
import ReactDOM from 'react-dom';
import createReactClass from 'create-react-class';
import { Router, Route, browserHistory } from 'react-router';
import { withJsonApi, AsyncProps } from 'react-router-json-api';

/* First some Backbone models are defined. */

const Filling = Backbone.RelationalModel.extend({
    urlRoot: '/fillings',
    defaults: { type: 'fillings' }
});

const Taco = Backbone.RelationalModel.extend({
    urlRoot: '/tacos',
    defaults: { type: 'tacos' },
    relations: [
        {
            type: Backbone.HasMany,
            key: 'fillings',
            relatedModel: Filling
        }
    ]
});

const TacoCollection = Backbone.Collection.extend({
    model: Taco,
    urlRoot: '/tacos'
});

/* This example uses function components.  React Router JSON API also works with
   React components created using createReactClass() and ES6 classes. */ 

const TacoItem = withJsonApi({
    fragments: {
        taco: {
            model: Taco,
            fields: ['amount']
            relations: [
                {
                    key: 'fillings',
                    fields: ['name', 'amount']
                }
            ]
        }
    }
})(function TacoItem({ taco }) {
    return (
        <div>
            Amount: {taco.get('amount')}
            <h4>Fillings</h4>
            <ul>
                {taco.get('fillings').map((filling) => {
                    return (
                        <li key={filling.id}>
                            Name: {filling.get('name')},
                            Amount: {filling.get('amount')}
                        </li>
                    );
                })}
            </ul>
        </div>
    );
});

const TacoList = withJsonApi({
    queries: {
        tacos: (params, query, vars) => {
            return {
                model: TacoCollection,
                fields: ['name'],
                fragments: [
                    TacoItem.fragments.taco
                ]
            };
        }
    }
})(function TacoList({ tacos }) {
    return (
        <div>
            {tacos.map((taco) => {
                return (
                    <div key={taco.id}>
                        Name: {taco.get('name')},
                        <TacoItem taco={taco} />
                    </div>
                );
{'fraction_non_alphanumeric': 0.1091742094088725, 'fraction_numerical': 0.001117443289753045, 'mean_word_length': 2.236889692585895, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 37, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1114446', 'n_tokens_mistral': 2497, 'n_tokens_neox': 2401, 'n_words': 794}