CS312 - Assignment three

Due: 2017-03-07 11:00a

Topics

• Learn the basics of working with React

Simplepedia

For the next few assignments we will be working on developing a baby version of Wikipedia called "Simplepedia". Simplepedia was a project developed with Davin Chia in Fall 2016 as an independent study. The goal of this project will be to give you a simplified taste of developing a full single page web app in preparation for doing the project.

## Phase 1: The article browser

This week, you will be constructing the basic interface for looking at a collection of articles. Here is the goal you are aiming for:

Along the top of the page, there is a list of sections. Clicking on one of them brings up the appropriate list of articles. Clicking on an article title brings up the contents of the article at the bottom of the page. All of our articles have a title, some contents, and a modification date.

Breaking the interface down

With React, our first step is to break the interface down into components.

We will break this interface down into two main components: IndexBar (red rectangle) and Article (green rectangle). We will further break down the IndexBar into IndexSections (blue) and IndexTitles (cyan).

Implementation

To get you started, grab a copy of my starter code. You will see that this looks a lot like the result of starting a project with create-react-app (because it is). I've removed some of the junk you don't need and added some styling. I've also added some seed data and some code that imports it into the application.

make sure your read the README file for more information about working with a project setup with create-react-app.

One important feature of this setup, is that instead of using all of the React.createElement functions you saw in class, you can use JSX. JSX is a JavaScript extension that allows you to put what appear to be HTML tags into your code directly. This makes it much easier to write React code (though it does require a build process). I recommend starting by getting a introduction to JSX.

When you are reading to start coding, start by creating a folder called components in the src directory. This is where you will store your new components.

IndexBar

The first component you should create is the IndexBar. Put it in a file called IndexBar.js in the components folder. You should pass two props to the IndexBar component. The first should be a reference to the data collection, and the second should be a callback to be called when a title is selected.

Internally, you will have two sub-components, though you do not necessarily need to make them formal sub-components. The sections list (the individual letters across the top) should be implemented as an unordered list (ul). Wrap this in a div with the id "section-list". My styling is designed to turn your list into the horizontal form seen in the pictures.

You should add an onClick callback to each li in the list which sets the current section as state for the IndexBar.

The second section should be the list of titles found within the current section. This should also be implemented as an unordered list (though you should sort the titles – "unordered" just means that the list isn't displayed with numbers on the left). For these li, make sure to call the callback that was passed down with the props when the user clicks a title.

Finally, when the user clicks a new section, you should send a blank title back to the callback in props to make sure no article is showing.

When you are done, the HTML should look something like this:

<div>
  <div id="section-list">
    <ul>
      <li>A</li>
      <li>B</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>Apple</li>
      <li>Anteater</li>
      <li>Auton</li>
    </ul>
  </div>
</div>

Also, here is one way to transform an array into a list:

const list = ['daleks', 'cybermen', 'ice warriors', 'autons'];
const races = list.map((race)=>(<li key={race}>{race}</li>));

return (
  <ul>{races}</ul>
  )

This would produce this HTML

<ul>
  <li>daleks</li>
  <li>cybermen</li>
  <li>ice warriors<?li>
  <li>autons</li>
</ul>

Article

For the Article component, make a new JavaScript file in components called Article.js. The Article component should take one prop: an article record. Our articles have three fields: title, extract (the contents), and edited (the time the article was last edited).

This one should be fairly simple. Just display the title, text, and date. I'm assuming the entire article will be wrapped in a div with id = "article". The title should have the id "article-title", the text should have the id="article-text", and the date should have the id "article-timestamp" (I have provided styles for some of these).

Putting it together

In App.js, you should put all of these things together. You should add the title and the two components to the page. You need to make sure that you hook up all of the props so that the callbacks connect together properly so that clicking on a section, opens the title list, and clicking on a title opens the related article for viewing.

Grading

To hand in your work, please make a copy of you working directory, rename the copy username_hw03 remove node_modules from it, and then zip it up. I would rather regenerate node_modules when I look at your work rather than having you submit the huge directory, so really, please don't include it.

You can then submit the zipped folder on Canvas.