An introduction to interesting ideas in React world

React is the latest thing to talk about in Javascript land.

And I think there might actually be a reason why people are excited!

The new programming models that emerged together with React can drastically simplify
the way we build applications.

This sounds awesome. But if you are convinced and want to get started,
you probably don’t get far because you get stuck in a jungle full of different Flux implementations.

At least that’s what happened to me.
While playing around with all those different libraries and frameworks,
I picked up some core ideas I especially like:

Atomic state

Hot load

Actions object

Action logging

// actions.js
edit (render, state, todo) {
  render(
    state.set('editing', todo.get('id'))
  )
}

// actions.test.js
t.test('edit', t => {
  t.plan(1)

  var todo = todos.first()

  actions.edit(s => {
    t.equal(s.get('editing'), todo.get('id'), 'edits the right todo')
  }, state, todo)
})

Interaction

Components

  clearCompleted (render, state) {
    render(
      state.update('todos', todos => todos.filter(
        todo => !todo.get('completed')
      ))
    )
  }

If you think this sounds interesting and you just want to see a simple application
as an example how this could work, I might have something for you!

It turns out, you don’t need any framework or library to get all this.
I created Miniflux-TodoMVC as a starting point for everyone curious.

Update: Time Travel

I added time traveling to the demo application.
It records all states and you can preview them or set the current state to one of the previous ones.
It’s really basic for now but it works pretty well already.

Time traveling

Give it a try over here: jorinvo.github.io/miniflux-todomvc