https://github.com/payloaddev/react-at-rest
A toolkit for building ridiculously fast web applications using React and RESTful APIs.
https://github.com/payloaddev/react-at-rest
coffeescript es6 react rest-api
Last synced: 3 months ago
JSON representation
A toolkit for building ridiculously fast web applications using React and RESTful APIs.
- Host: GitHub
- URL: https://github.com/payloaddev/react-at-rest
- Owner: PayloadDev
- License: mit
- Archived: true
- Created: 2016-01-14T21:32:29.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2024-08-02T16:24:15.000Z (over 1 year ago)
- Last Synced: 2025-10-30T07:49:02.094Z (5 months ago)
- Topics: coffeescript, es6, react, rest-api
- Language: CoffeeScript
- Homepage:
- Size: 112 KB
- Stars: 39
- Watchers: 16
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-at-Rest
A toolkit for building ridiculously fast web applications using React and RESTful APIs.
# WARNING: `react-at-rest` is deprecated
This package is deprecated and is no longer being maintained.
## Documentation
* [v2.0.0 Upgrade Guide](docs/updgrade.md)
* [Overview](docs/overview.md)
* [Store](docs/store.md)
* [DeliveryService](docs/deliveryservice.md)
* [RestForm](docs/restform.md)
* [App Events](docs/appevents.md)
## Sample Projects
Clone the react-at-rest examples repo to get started! https://github.com/PayloadDev/react-at-rest-examples
The examples project contains sample code in both [ES6](https://github.com/PayloadDev/react-at-rest-examples/tree/master/src/addressbook) and [CoffeeScript](https://github.com/PayloadDev/react-at-rest-examples/tree/master/src/blog).
## Main Concepts
* React-at-Rest is composed of 3 main classes, working in concert: `Store`, `DeliveryService`, and `RestForm`.
* `Store`: manages all AJAX requests and holds the data returned by the server.
* `DeliveryService`: React Component that manages and simplifies communication with the Stores.
* `RestForm`: React Component for building forms and managing RESTful data flow.
* Uses Events for Store->Component communication.
* Written in CoffeeScript, **fully compatible with ES6**.
* Uses Bootstrap classes by default, but doesn't depend on Bootstrap.
* Uses subclasses instead of mixins or composition.
* Plays nicely with [react-router](https://github.com/rackt/react-router/)
## Requirements and Installation
React-at-Rest depends on `react`.
`npm install --save react-at-rest react`
## Battle Tested and Pragmatic
React-at-Rest is a collection of powerful tools that make writing SPAs faster and simpler. You'll be amazed at what you can accomplish in a very short period of time.
React-at-Rest powers the Payload SPA at payload.net.
# Getting Started
You can trivially consume a RESTful API using `Store` and `DeliveryService`
#### ES6
```es6
class BlogPosts extends DeliveryService {
constructor(props) {
super(props);
// create a new Store which connected to an API at /posts
this.postStore = new Store('posts');
}
// override bindResources to load all the resources needed for this component
bindResources(props) {
// retrieve all the posts from the Post Store
this.retrieveAll(this.postStore);
}
render() {
// show a loading message while loading data
if !this.state.loaded
return (Loading...)
// iterate over all the blog posts loaded from our API
let posts = this.state.posts.map((post) => {
return (
{post.title}
{post.body}
)
// render the posts
return (
{posts}
)
}
}
```
#### CoffeeScript
```coffeescript
class BlogPosts extends DeliveryService
constructor: (props) ->
super props
# create a new Store which connected to an API at /posts
@postStore = new Store 'posts'
# override bindResources to load all the resources needed for this component
bindResources: (props) ->
# retrieve all the posts from the Post Store
@retrieveAll @postStore
render: ->
# show a loading message while loading data
return Loading... unless @state.loaded
# iterate over all the blog posts loaded from our API
posts = for post in @state.posts
{post.title}
{post.body}
# render the posts
{posts}
```
Or to load a single resource:
#### ES6
```es6
class BlogPost extends DeliveryService {
constructor(props) {
super(props);
// create a new Store which connected to an API at /posts
this.postStore = new Store('posts');
}
// override bindResources to load all the resources needed for this component
bindResources(props) {
// retrieve the post from the Post Store by id
this.retrieveResource({this.postStore, id: this.props.postId});
}
render() {
// show a loading message while loading data
if !this.state.loaded
return (Loading... )
// render the post
return (
{this.state.post.title}
{this.state.post.body}
)
}
}
```
#### CoffeeScript
```coffeescript
class BlogPost extends DeliveryService
constructor: (props) ->
super props
# create a new Store which connected to an API at /posts
@postStore = new Store 'posts'
# override bindResources to load all the resources needed for this component
bindResources: (props) ->
# retrieve the post from the Post Store by id
@retrieveResource @postStore, id: @props.postId
render: ->
# show a loading message while loading data
return Loading... unless @state.loaded
# render the post
{@state.post.title}
{@state.post.body}
```
DeliveryService can load multiple resources in `bindResources`. Simply execute additional `subscribeAll`, `subscribeResource`, `retrieveAll` or `retrieveResource` methods.
## Creating and updating resources
`RestForm` takes care of rendering create/edit forms and submitting to the API.
#### ES6
```es6
class BlogPostForm extends RestForm {
//build your form using Reactified versions of regular HTML form elements
render() {
return (
Create Post
)
}
}
```
#### CoffeeScript
```coffeescript
class BlogPostForm extends RestForm
# build your form using Reactified versions of regular HTML form elements
render: ->
Create Post
```
Then render your form component with either a blank model, or one retrieved from the API
#### ES6
```es6
// in component
// or to edit a blog posted loaded in a DeliveryService subclass
```
#### CoffeeScript
```coffeescript
# in component
# or to edit a blog posted loaded in a DeliveryService subclass
```
# Credits
React-at-Rest was developed by the team at [Payload](payload.net) and maintained by [Ben Sargent](https://github.com/fortybillion).
Event code from the [Backbone project](https://github.com/jashkenas/backbone).