ColdFusion Summit East Notes: CF + ReactJS, Minh Vo

(Minh’s talk was a stellar intro to ReactJS, and how easy it is to start using. He showed just enough of a video game prototype to show how to build a real world app with it, but the demo wasn’t so big as to get the audience lost. His code samples where clear and he explained the sections very well. I didn’t take a ton of notes because I got sucked into watching the demos, but here are a few takeaways from his preso.)

“Getting to the moon is not an extension of climbing a tree”
exploring more all the time

What is React?
composable JSX (custom syntax) is tag-based (similar to CF Custom Tags)
- gets transpiled back to vanilla JavaScript

<componentName prop1={value} onWheel=wheelHandler()…>
    <child tag…>
</componentName>

Why React?
Fundamental change in the way components (and webapps) should be built
Introduced unidirectional data flow to props and state. View (what you see) is a pure function of the data
- if the data is consistent, the resulting view will always be the same
- easier to reason about and debug

Removes mundane, boilerplate, and config to allows you to focus on rapid prototyping — thanks to “create-react-app” tool.

extremely fast due to “virtual DOM”
- immediate mode rendering, taken from video game development
will keep track of all elements on the screen
only redraws when it realizes the element has changed since the last render cycle

be aware of -
Node.js package manager ala package.json
create-react-app
- wizard that preconfigures a sample app, can forgo technical details
- css, absolute positioning so we can above left top, right, bottom
- vh and vw unites, preferred over percentage units (screen current height and width)
- display: flex, mainly for auto-margins (centering the person) and flush alignment of assets
in React, inline styling uses camelCase style (backgroundColor not background-color)

animations
transform()
transitions()
animation: and @keyframe to an element
-shorthand for a flip-book style animation

props and state
props - represents your CF args
state - session or application scope (if every app is a new component)

(nice callback references to Giancalo’s talk! It was -perfect- that this session was immediately after his!)

all the code is in a repo here: draftstudios.com
Slide deck: https://goo.gl/q9KCPs