Refactor 'html_form.js' using reactjs framework

[jeff1evesque]

We will refactor html_form.js, using the reactjs framework. The tie-breaker between angularjs, and reactjs, were largely considered in a previous issue, when considering the former.

[jeff1evesque]

An initial approach can be as follows:

• convert each if, else if statements to being separate react components
• take the code inside jquery .on events, and wrap them into method definitions
  • these method definitions, would be implemented within the same reactjs component

Note: it may be beneficial to separate each react component into its own file.

[jeff1evesque]

IRC #reactjs (12/16/15 ~ 10:15pm EST):

CedarsHope: React's a different ballgame to straight up jquery DOM manipulation, there's a few concepts to grasp... JSX, virtual doms, diffing, controlled and uncontrolled components

jeffreylevesque: how do i enable vdom?

CedarsHope: Basically react and jquery don't mix without a little work... it's not wise to have jQuery manipulating the DOM, when you make a react component, it becomes react's job to handle DOM changes from that point forward

jeffreylevesque: i will give this a pass through, and try to break it up as you suggest

CedarsHope: when you write a component in JSX, react produces a VDOM of that component from it's render method CedarsHope: well.. JSX isn't necessary, rather, when you use react in general... but that's nitpicking

jeffreylevesque: so, jsx components are the key pieces to virtualdom?

CedarsHope: in a way, yes CedarsHope: your render method produces an in memory representation of the DOM, called the virtual DOM, based on the component state and props (whichever combination you use in your render method) CedarsHope: then everytime you set state, the render method is ran again, and produces a new VDOM CedarsHope: react compares the new VDOM to the old, and finds the differences, and applys those changes to the real DOM CedarsHope: applies* CedarsHope: that's why jQuery shouldn't really meddle when it's react's job jeffreylevesque CedarsHope: there are react components that wrap jquery plugins, but that's more of a convenience for encapsulation

jeffreylevesque: very nice jeffreylevesque: i like the virtual dom concept

CedarsHope: yeah, it's important to grasp that JSX isn't a templating language in the same family as handlebars and stuff like that. JSX gets translated into pure javascript method calls at compile time, so all of those tags representing components become method calls so that react can represent the UI in memory

[jeff1evesque]

We can break up our current html_form.js into multiple jsx templates. Then, we can have a skeleton html_form.jsx template, implementing multipe require() methods, to require the latter templates via browserify:

IRC #Nodejs (12/17/15 ~ 8:45pm EST):

jeffreylevesque: I'm using reactjs: how can i require / include another js file (the compiled jsx file) in a js file? ReactJS uses npm jeffreylevesque: do i have to do require / include equivalent from the jsx template, or can it be done in js file - and, if i do some kind of require logic, does it need to be compiled to plain js?

solenoids: jeffreylevesque: are you using browserify? solenoids if not, start using it solenoids you can call require('./otherfile') using browserify to import other files, just like in node

jeffreylevesque: solenoids: yes sir, i'm using browserify jeffreylevesque: but, jquery can do it natively?

solenoids: jquery might have module loading functionality, but if you're already using browserify, it's a superior way to do it when using react solenoids: jquery's not very useful in react projects, the newer tooling and libraries out there works much nicer with react

jeffreylevesque: so i need to choose either to put the require logic in js, and switch the uglifyjs to browserify, or i need to put it into the jsx templates

solenoids: uglifyjs and browserify are different tools solenoids: browserify implements require for the browser and lets you bundle up multiple file projects into one file that can run in a Githubissues.

Githubissues is a development platform for aggregating issues.