Tag Archives: Flux

Learn Raw React — no JSX, no Flux, no ES6, no Webpack…

via Learn React By Itself — no JSX, no Flux, no ES6, no Webpack..

So you’ve heard all the fuss about React.js – apparently it is the best thing since XMLHttpRequest. But you’ve spent a couple hours investigating, only to find so many buzzwords that it just feels overwhelming. JSX and flux and ES6 and webpack and react-router and all I want is somebody to just tell me how to useReact already!

Luckily for you, that’s exactly what this series will do! Don’t believe me? That’s OK – you will after you’ve built your first React app in about 2 minutes time. Without downloading anything. Just by following this exercise:

Understanding Redux Middleware

via Understanding Redux Middleware — Medium.

I have been using Facebook’s React since v0.9.x in Feb 2014. I am a defector from Backbone.js which initially started after replacing our view layer with React. After understanding the benefits of Flux and it’s unidirectional flow architecture it became pretty evident that I did not need Backbone.js models and collections anymore. I will assume you have some basic knowledge of Flux, Redux, React, and functional programming. I will cover as much as I can in this article.

Single State Tree + Flux

via Merrick Christensen – Single State Tree + Flux.

When people ask me how I build user interfaces these days they often stare back at me with wide eyed shock when I tell them I manage all my state in a single tree using Flux to populate it.

Hypermedia and ReactJS: A Match Made in Post-Ember Heaven

via Hypermedia and React.js: A Match Made in Post-Ember Heaven – BoomboxBoombox.

Web application development is a constantly evolving science. Every year, a new set of frameworks emerge, open source projects are started and abandoned, and the landscape of available tools is constantly in flux. Some end up being winners, others losers. I’ll show you how we’ve started using React.js with hypermedia to pretty much blow Ember out of the water.

Building A Simple React Application Using The Flux Pattern: A Step-By-Step Guide

via Building A Simple React Application Using The Flux Pattern: A Step-By-Step Guide | Tony Spiro.

React is a very powerful library for building interactive JavaScript applications.  One of its strongest qualities is that it forces you to build your app in a uni-directional data flow.  This is much different from other frameworks’ two-way data binding. With React, every piece of your application is controlled from a single source, it’s owner.  The owner is defined by the Component that is passing “props” to its owned component.

As more nested components are added, this logic can grow out of hand and can make it difficult to keep track of events passed through the component hierarchy.  This is where Flux steps in to provide an outlet from the hierarchy to handle dispatched events and altered data within our application.

Rather than going into graphs and models to describe what Flux does, lets build an easy Flux example application.  We’ll be building our application with the help of ES6 and Babel.  If you’re unfamiliar with these, you can find out more about ES6 and Babel here. Babel allows us to use both ES6 JavaScript and JSX which will both compile to ES5 JavaScript which is compatible across all modern and legacy browsers. Now let’s get started…

Redux CRUD: A set of standard actions and reducers for Redux CRUD Applications

via Versent/redux-crud · GitHub.

Redux CRUD is a convention driven way of building CRUD applications using Redux. After building several Flux applications we found that we always end up creating the same action types, actions and reducers for all our resources.

Redux CRUD gives you an standard set of:

  • action types: e.g. USER_UPDATE_SUCCESS
  • actions: e.g. updateSuccess, updateError
  • reducers: for the action types above e.g. updateSuccess

Redux CRUD uses seamless-immutable for storing data.

Part 3: Universal React with Rails

via Universal React with Rails: Part III — Medium.

It’s been awhile since I wrote my previous post about Rails API. Meantime a lot of things happened in JavaScript world: ES6 was officially approved and renamed to ES2015, “isomorphic” javascript (almost) became “universal”, one of the flux frameworks (which I’ve started to use in my apps) was deprecated in favour of new one (which we will use in the next post).