ShareCourse Outline

Build an App with React and Ampersand

2-1 Creating a router and pages

next:Application pattern
previous:Converting to ES6


modules installed

Since updates will be released over time, we're listing specific versions used at time of recording to minimize issues caused by future releases.

npm i --save ampersand-router@3.0.2`

copy/paste code

HTML used in render method of src/pages/public.js:

<div className='container'>
  <header role='banner'>
    <p>We label stuff for you, because, we can&trade;</p>
    <a href='/login' className='button button-large'>
      <span className='mega-octicon octicon-mark-github'></span> Login with GitHub

Some basic styles to add to src/styles/ below the @import 'yeticss':

  padding-top: 50px

  height: 40px

    width: 24px
    height: 24px
    border: 1px solid grey
    border-radius: 20px
    display: inline-block

  > span
    margin-left: 10px
    margin-right: 10px

other notes

Code Viewer