ShareCourse Outline

Build an App with React and Ampersand

2-1 Creating a router and pages

next:Application pattern
previous:Converting to ES6

topics

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'>
    <h1>Labelr</h1>
  </header>
  <div>
    <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
    </a>
  </div>
</div>

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

header
  padding-top: 50px

.label
  height: 40px

  .label-color
    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