Implement Home view in React components

[chadxz]

This PR implements the Home view as shown in this prototype in React components. In addition we implemented webpack-dev-middleware for easy refresh to see new changes. This patch was done by

• Chad Taylor caepo3@gmail.com
• Chad McElligott chad.mcelligott@gmail.com
• Julian Sy juliansy0@gmail.com

[chadxz]

This is not actually functional, it's just the ui. We still need to do work to make the geo coordinates resolve to a friendly place name, as well as make the search button work and the categories selectable.

It's a good start though!

You can start the server and see the results though. Here's a screenshot:

[chadxz]

I'll leave this up for a day or so for feedback or discussion. Once we have all the mockups completed and functional, I'd like to take a second-pass at the app and rework the way we're doing CSS to be more modular. It really feels icky to have this componentized functionality but have global css classes assigned to them.

[chrisbeaman]

Hmm, since I've written a lot of the CSS, maybe you can help me understand how it can be made more modular. My CSS is likely old-school. How can it be better?

[chadxz]

when using react, you build these components that are meant to do a single thing well. Ideally they'd be reusable and not have dependencies on global CSS classes brought in by stylesheets from the HTML page, because the component should be able to stand alone and declare it's own default styling.

There has been this movement to use "css modules" made available by the build tool we use, called webpack with a loader configured called css-loader. Essentially it would allow you to co-locate a CSS (or SCSS, LESS, or Stylus) file with the component, and do a require(./component.css) in the React component's code to pull in those styles. The module loader takes care of generating a unique "namespace" for the class names, and providing those generated class names to your code. This unique namespace ensures that the class name declarations do not clash with other class name declarations when ultimately exposed on the global scope. Then you just assign the classes to the different bits of the component as desired.

If you want to provide the ability to override any of the default styling, you can allow styles to be passed in via the React props and applied over top the default styling.

I don't know of a lot of resources for learning about this, since it's a fairly new thing, but if you check out the css modules repo there should be more info.

[chadxz]

https://css-modules.github.io/webpack-demo/

[chrisbeaman]

Hmm, so if I'm understanding this correctly, no high level/affect-everything styles, more component-by-component styles. Is that right?

[chadxz]

there may be high-level styles such as normalize.css or a site-wide theme that is applied, but in general it would be great to not have global rules defining the styled structure of a component (for instance, you wouldn't want to rely on something like font-awesome linked into the top-level document for a "button" component to do it's job correctly)

[chrisbeaman]

Sounds good Chad. If you have time this weekend (Saturday? Sunday?), want to get together and transition the CSS to a less global structure?

[chadxz]

not gonna wanna spend time on this over the weekend. Family stuff and all that. I think i'm fine with just merging this as-is and working on the css at a later date