Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

React and Flux: How Many Articles and References Do You Need?

DZone's Guide to

React and Flux: How Many Articles and References Do You Need?

Getting this right is key to making your app work, so don't miss out!

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

As an experienced developer of some 21 years, I have no problem in stating that learning React and Flux has a steep learning curve. It’s complex (until you understand it). If anyone else tries to tell you anything different I’d question if they know what they are talking about. They probably don’t. In fact they’re flat out lying if they say it’s anything but complex.

The official Facebook documentation for Flux is terrible. I challenge anyone to build a working React app using Flux using the solely the Facebook Flux docs and no other sources and no other prior knowledge of how to build a React app using Flux. You won’t be able to. There’s too much information that’s missing. You might be able to create Actions and send them to your Dispatcher, but you won’t get to the point of having a working Flux event flow through View Controller, creating an Action, sending it to the Dispatcher, the Store, emitting events, and triggering a Component to update based on Store changes.

In learning Flux, I’d say I went through a substantial number of articles piecing together snippets of different approaches before I got to the point where I got the concept, and then many more to get to the point of actually having a working simplest case app up and running. In addition, I’ve also worked through a React and Flux tutorial on PluralSight, and part of part of another similar course on Udemy, and also watched numerous presentations on YouTube.

The trickiest part I found was that the docs and many articles talk about each of the individual parts of Flux, creating Actions, creating the Dispatcher, creating a Store, but what seems to be missing is the key part of how do you hook them all up to together, so the one way event flow works as it should. Miss out any one part and nothing happens. Your app just doesn’t work. Or you get obscure errors and you’ll have no idea what they’re talking about.

Here’s a summary of the best articles I’ve found that were the most useful:

Here’s a list of articles and posts for working around specific (weird) errors that I ran into:

Understanding binding ‘this’ to access setState() in ES6, to avoid this error:

Uncaught TypeError: this.setState is not a function

The magic answer from user troutowicz: “React components using ES6 classes no longer autobind this to non React methods. In your constructor, add:this.onChange = this.onChange.bind(this)"

What JavaScript voodoo is this!

Understanding this error when attempting to output state in the render() for a component: “Uncaught Error: Objects are not valid as a React child”

  • This error is particularly obscure. It turns out the ‘object’ in question was a property object where I was referencing part of the object parent properties to display in a render() using { } but the property I needed was nested further down. So...
  • { this.state.labelValue }

    Gave the error above, this referencing the property data correctly (in my case) like this worked:

      { this.state.labelValue.labelValue.value }

    This was hinted by this post:
    http://stackoverflow.com/questions/33117449/invariant-violation-objects-are-not-valid-as-a-react-child

    I finally got to a working example, simplest case example, which you can see on my GitHub here. I feel like I’ve just earned my Flux badge.

    Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

    Topics:
    articles ,references ,react ,flux ,web dev

    Published at DZone with permission of Kevin Hooke, DZone MVB. See the original article here.

    Opinions expressed by DZone contributors are their own.

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}