React & MVC Blog Post

01.jsx

// Defining the component
const ProfilePage = ({ username, numPosts, numComments }) =>
  <main>
    <h1>{username}</h1>
    <span>{numPosts} Posts</span>
    <span>{numComments} Comments</span>
  </main>

ProfilePage.propTypes = {
  username: PropTypes.string.isRequired,
  numPosts: PropTypes.number.isRequired,
  numComments: PropTypes.number.isRequired
}

// Rendering the component as HTML
ReactDOM.renderToStaticMarkup(
  <ProfilePage
    username="test"
    numPosts={100}
    numComments={400}
  />
)

02.jsx

const HomePage = ({ currentUser }) =>
  <main>
    <header>
      <Navigation>
        <NavigationLink to="/profile">
          {currentUser.username}
        </NavigationLink>
      </Navigation>
    </header>
    <article>
      <h1>Hello World</h1>
    </article>
  </main>

HomePage.propTypes = {
  currentUser: PropTypes.shape({
    username: PropTypes.string.isRequired
  })
}

HomePage.getInitialProps = async function () {
  const { username } = await get('/user')
  return { currentUser: { username } }
}

03.jsx

app.get('/basket', async function (req, res) {
  const user = await Session.getCurrentUser()
  const lineItems = await Basket.forUser(user)
  const recommendedItems = await Recommendations.forUser(user)

  res.renderComponent('BasketPage', {
    username: user.username,
    lineItems: lineItems.map(item => ({
      name: item.name,
      quantity: item.quantity,
      price: item.price
    })),
    recommendedItems: lineItems.map(item => ({
      name: item.name,
      image: item.image
    }))
  })
})

04.jsx

function componentMiddleware () {
  return function (req, res, next) {
    res.renderComponent = function (pageName, pageProps) {
      if (this.req.accepts('application/json')) {
        renderJson({ pageName, pageProps })
      } else {
        renderHtml({ pageName, pageProps })
      }
    }

    next()
  }
}

05.json

{
  "page": "Basket",
  "props": {
    "username": "trustno1",
    "lineItems": [
      { "name": "Pencil", "quantity": 100, "price": "£10.00" }
    ],
    "recommendedItems": [
      { "name": "Water bed", "image": "https://cdn.example.com/img/waterbed-2131244.jpg" }
    ]
  }
}

06.jsx

export { default as HomePage } from './HomePage'
export { default as AboutPage } from './AboutPage'
export { default as UserProfilePage } from './UserProfilePage'

07.jsx

window.__pageState = {
  page: 'HomePage',
  props: {
    currentUser: {
      username: 'fox'
    }
  }
}

08.jsx

const express = require('express')
const bodyParser = require('body-parser')
const { renderJson, renderHtml } = require('./lib/renderer')

const server = express()

server.use(bodyParser.json())

server.post('/render', function (req, res) {
  const { page, props } = req.body

  if (req.accepts('application/json')) {
    renderJson({ page, props })
  } else {
    renderHtml({ page, props })
  }
})

server.listen(3000, () => `Rendering server listening on http://localhost:3000`)

09.rb

def show
  user = User.find(params['id'])
  props = {
    user: {
      username: user.username,
      age: user.age
    }
  }

  render component: { name: 'UserPage', props: props }
end

10.json

{
  "page": "UserPage",
  "props": {
    "user": {
      "username": "scully",
      "age": 40
    }
  }
}