matt.is-react
matt.is-react copied to clipboard
Published
20 hours ago •
mhuebert
mhuebert
Blog written with React and Firebase
Matt.is
SEO-friendly blog using Firebase and React using sparkboard-tools
Router
A Router mix-in matches each path to a single Handler component.
Routes are defined like this:
routes = [
{ path: "/", handler: Home },
{ path: "/writing", handler: Writing },
{ path: "/writing/:id", handler: WritingView },
...
{ path: "*", handler: NotFound }
]
A Handler component declares data dependencies in a manifest located in statics.subscriptions(). Data is synced into the root component's props.
Component = React.createClass
mixins: [SubscriptionMixin]
statics:
subscriptions: (props) ->
posts:
subscribe: ->
unsubscribe: ->
default: ->
shouldUpdateSubscription: (oldProps, newProps) ->
For convenience, we can define Firebase manifest:
manifest =
ref: new Firebase(FIREBASE_URL+'/photos')
query: (ref, done) -> done(ref.limit(10))
server: true
parse: (snapshot) -> snapshotToArray(snapshot).reverse()
default: []
...and convert the Firebase manifest into a subscription object:
subscription = firebaseSubscription(manifest)
Javascript & Styles
React-Middleware
Server-side rendering in express. We fetch Firebase data and supply it as props to our root component, Layout.
Properties for <head>
A Handler can specify metadata for the root Layout component in statics/getMetaData():
Component = React.createClass
mixins: [FirebaseMixin]
statics:
getMetadata: ->
title: "Welcome to Matt.is"
description: "My great site."
mhuebert