React, baby!

Finally getting somewhere with React.js!

OK, so today I’ve been working on building a time logging app (just following instructions, folks) and now it’s starting to make a little bit more sense. By “it” I mean “React” and by “a little”, I mean “really really tiny little bit”. To reinforce what I’ve learned (or am learning) I’m going to break down the process for approaching building a React app here.

1. Break down the app into components, keeping in mind that each component should only be handling one thing (this is called the single-responsibility principle).

2. Build the static version of the app – so that you have something to work with (it should be rendered). This is good for planning the next step.

3. Figure out what should be “stateful“. Oooh, stateful, a big word in react. React consists of states and props. States are what is determined inside a component and props is what is passed to a component (from a parent component to a child component) – this is, I suspect, my uber simplified view of it!

4. Figure out where a state should live – if a component further up has no use for a particular state, it should be used by its child function instead. State means data? You use states for tracking information (e.g. is a form displaying or not).

5. Hard-code initial states – Don’t worry about collecting inputs and listening for events at this point!

6. Add data flows – essentially adding interactivity by putting event listeners (onClick, onChange) onto buttons and inputs.

7. The last step is Server communication for persisting (storing) data. Haven’t got to that part yet :).