Public Repos and Components

In notebook:
Building Modern Web Apps
Created at:
2016-01-21
Updated:
2016-01-21
Tags:
React libraries JavaScript Ampersand
creates a dir named pages 

exercise

Set up to render a real page

Suggests that render is very fast, so don't worry about premature optimisation. It will only touch the DOM if the resulting diff is different.
in the pages directory, public.js (the index page) and repos.js
  // repos.js
import React from 'react'

export default Reac.createClass({
    render () {
        return (
            <div>
            <h2>Repos</h2>
            </div>
        )
    }
})
public.js (login page in his repo) is the same with different JSX/html content.
To note:
  • always close your html tags
  • class attribute will become className​ (actually name in js)
  • for becomes html-for
Then in the router.js
  import Router from 'ampersand-router'
//**** 1. import the pages
import PublicPage from './pages/public'
import ReposPage from './pages/repos'
//**** 3. also import React
import React from 'react'

export default Router.extend({
    routes: {
        '':'public',
        'repos': 'repos'
    },
    public () {
        //**** 2. render the pages
        React.render(<PublicPage/>, document.body)
    },
    repos () {
        //**** 2. render the pages
        React.render(<ReposPage/>, document.body)
    }
})
uses yeti css (@import yeticss) in his stylus css file