Health Monitor. The
/detail/ page uses React. Compare it to the home/list page which uses handlebars for rendering.
Ever done this?
1 2 3
It’s hard to tell if that’s even well formed, let alone correct.
React uses a syntax called JSX which intermingles markup with code. Here’s an example taken from the aforementioned project:
1 2 3 4 5 6 7 8
Listed below are a few pros and cons I’ve gleaned along the way.
<body>can cause hard to find bugs as many plugins add and remove there liberally.
Client-side Model/state management. They say it’s the “V in MVC” but I find its real strength is in how it maintains a proper model. Typically I’d just map json to input boxes and pull them out at the right time. React enforces an internal state, and each change is reflected in that state. When the user is ready to commit a form, there’s no giant method extracting and converting data as the model is current in state.
Occupies the sweet-spot between functionality and shallow learning curve. It’s bite size enough to allow the developer to convert their code over in steps, testing it along the way, but carries enough features and structure to encourage the developer to create powerful and modular components.
Documentation is pretty darn good about walking you through a typical design scenario.
Lends itself to iterative refactoring. As I was developing, it was easy to see when a couple elements had outgrown their space and could be pulled into their own component or group.
Passing a function down the parent-child chain feels like a bucket brigade. Everyone gets their hands on it, only the last guy uses it.
External event interaction. I couldn’t find a way to fire React’s SyntheticEvent in a way that bubbles up to parents. The datetimepicker fires its own change event
dp.change; how do I notify an ancestor React element levels away to update the model?
These points are taken from my limited experience in this particular domain. Different scenarios may invalidate some of this, YMMV.
Use React.addon.update to update state. It makes it easier to add a new object to state without having to preserve it explicitly in every
this.setState(). The query syntax for partial updating is pretty neat.
I like the pattern of tacking extra data onto
SyntheticEventto pass info back to a parent. e.g., TextInput.handleChange
Updating state kicks off a rerendering of all components under the parent. Here’s a typical flow:
- instantiate root React element
- fetch data async
- return with data
- put in state
Steps 2-4 incur a delay resulting in a brief flash of the 1st UI rendering, followed by a post-AJAX redraw. I use a
PageBusy flag in state here to suppress the first render until data comes back.