Fun React
Fun React is a React framework.
Why?
Because I love functional programming and ELM, but I can only use JS in work.
Introduction
If you know ELM:
Great! Fun React is perfect for you. Because it basically mimic almost everything of ELM 0.17. I bet you can know how to use Fun React right after check the following example.
If you are using Redux:
The overall concept is the same: the state reducer. The main differences are:
- We call
reducers
asupdate
functions - We use simple type system to replace redux action
- We use
program
instead of<Provider />
- There is no
connect
.- For data, we encourage to pass data all the way down.
- For event, we use very simple event system, there is only two function need to know:
event
: event declarationlink
: event binding between parent and children
If you are using Cycle React:
TODO
Installation
npm install --save fun-react cycle-react react rx
Example
To run example
cd examples/__the_example__npm installnpm start
then open http://localhost:8080
in browser.
Basic counter
// 1. define message types by function createTypesconst Msg = // 2. define init dataconst init = 0 // 3. define update functionconst update = // 4. define view by function createViewconst Counter = // 5. compose program by the defined `init`, `update`, `view`const Program = // 6. mount the Program to actual DOMconst rootEl = documentReactDOM
Nested counter
TODO
Use with vanilla React
TODO
Use with flowtype
TODO
Learn more
TODO
Philosophy
The name imply the philosophy. So why name it Fun React:
- We treat react element as a functor of event and the virtual dom is the context of the functor, so Fun React means: Functor React.
- It is fun.
TODO explain what is Functor, and why can react element be a functor
TODO
- restructure examples
- nested counter
- todo list
- cycle interoperable
- react interoperable
- write doc
- README
- API document
- the config options
- add jsbin env
- add test
- Try to upgrade to rx 5 or annotate rx 4
Contributers
- rayshih: that's me
- wuct: https://github.com/wuct