Skip to content

Commit

Permalink
[modify]update README.
Browse files Browse the repository at this point in the history
  • Loading branch information
shunta saito committed Nov 8, 2016
1 parent 7cb2614 commit 3ab262d
Show file tree
Hide file tree
Showing 9 changed files with 267 additions and 237 deletions.
19 changes: 14 additions & 5 deletions README-ja.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
# router-redux [![Build Status](https://travis-ci.org/subuta/router-redux.svg?branch=master)](https://travis-ci.org/subuta/router-redux) [![Coverage Status](https://coveralls.io/repos/github/subuta/router-redux/badge.svg?branch=master)](https://coveralls.io/github/subuta/router-redux?branch=master)
View framework agnostic router for redux :)
This is [react-router-redux](https://github.com/reactjs/react-router-redux) for your vdom-based project.
View framework agnostic [react-router-redux](https://github.com/reactjs/react-router-redux) :)

- `virtual-dom`系のライブラリを利用した開発フローを簡単にします。
- [virtual-dom](https://github.com/Matt-Esch/virtual-dom)と使ったり
- [snabbdom](https://github.com/paldepind/snabbdom)する想定です。
- [Stateless component](https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.4ure2ot2k)を活用した開発フローを実現するライブラリです。以下のライブラリで動作確認済となります。
-[React](https://github.com/facebook/react)
-[vidom](https://github.com/dfilatov/vidom)
-[snabbdom](https://github.com/paldepind/snabbdom)
- 他の`virtual-dom`系ライブラリでも、おそらく使えます(https://github.com/Matt-Esch/virtual-dom)
- pushState/popStateを使ったクライアントサイドでのルーティングを実現します。
- 軽量(5K以下)ですが、パワフルなRedux向けのrouterです。

Demo: http://subuta.github.io/router-redux/

## Installation
```
npm install router-redux --save
Expand Down Expand Up @@ -82,6 +85,12 @@ router.onLeave('/', (state) => {
});
```

詳細なサンプルは `example/components` 配下を見てみてください。
- `/react` -> [React](https://github.com/facebook/react)[JSX](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx) プラグインを使ったサンプルです。
- `/vidom` -> [vidom](https://github.com/dfilatov/vidom) を使ったサンプルです。
- `/snabbdom` -> [snabbdom](https://github.com/paldepind/snabbdom) を使ったサンプルです。
- 他(`actions/reducers/store`)は共通のredux向けのファイルです。

## Documentation

- 基本的なAPIのアイデアは [react-router-redux](https://github.com/reactjs/react-router-redux) を参考にしてます。thanks!
Expand Down
15 changes: 11 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
# router-redux [![Build Status](https://travis-ci.org/subuta/router-redux.svg?branch=master)](https://travis-ci.org/subuta/router-redux) [![Coverage Status](https://coveralls.io/repos/github/subuta/router-redux/badge.svg?branch=master)](https://coveralls.io/github/subuta/router-redux?branch=master)
View framework agnostic router for redux :)
This is [react-router-redux](https://github.com/reactjs/react-router-redux) for your vdom-based project.
View framework agnostic [react-router-redux](https://github.com/reactjs/react-router-redux) :)

- Make your vdom-based development flow easy. with these libraries.
- Make your [Stateless component](https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.4ure2ot2k) based development flow easy. work with these libraries.
-[React](https://github.com/facebook/react)
-[vidom](https://github.com/dfilatov/vidom)
-[snabbdom](https://github.com/paldepind/snabbdom)
-[React](https://github.com/facebook/react)
- Should also work with other vdom libraries(https://github.com/Matt-Esch/virtual-dom)
- Adds pushState/popState based client-side routing to your project.
- Light weight(around 5K) but yet powerful router for Redux.

Demo: http://subuta.github.io/router-redux/

[README - 日本語版](README-ja.md)

## Installation
Expand Down Expand Up @@ -86,6 +87,12 @@ router.onLeave('/', (state) => {
});
```

see `example/components` for full example.
- `/react` -> example of [React](https://github.com/facebook/react) with [JSX](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx) plugin.
- `/vidom` -> example of [vidom](https://github.com/dfilatov/vidom) plugin.
- `/snabbdom` -> example of [snabbdom](https://github.com/paldepind/snabbdom)
- other files are common redux files(`actions/reducers/store`)

## Documentation

- API idea came from [react-router-redux](https://github.com/reactjs/react-router-redux) thanks!
Expand Down
4 changes: 2 additions & 2 deletions docs/bundled.js

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions example/app.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// Load react example.
// require('./components/react/app.js').default()
require('./components/react/app.js').default()

// Load snabbdom example.
// require('./components/snabbdom/app.js').default()

// Load vidom example.
require('./components/vidom/app.js').default()
// require('./components/vidom/app.js').default()
1 change: 1 addition & 0 deletions example/components/react/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const render = inject(({state}) => {
});

export default () => {
console.log('react example loaded');
// Patch into empty DOM element – this modifies the DOM as a side effect
// - with diff then patch(efficient way / with vdom)
const update = () => {
Expand Down
1 change: 1 addition & 0 deletions example/components/snabbdom/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const render = inject(({state}) => {
});

export default () => {
console.log('snabbdom example loaded');
// Patch into empty DOM element – this modifies the DOM as a side effect
let tree = document.querySelector('#app-container'); // We need an initial tree

Expand Down
1 change: 1 addition & 0 deletions example/components/vidom/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const render = inject(({state}) => {
});

export default () => {
console.log('vidom example loaded');
var container = document.querySelector('#app-container');
const update = () => {
container = document.querySelector('#app-container')
Expand Down

0 comments on commit 3ab262d

Please sign in to comment.