7101–ReactJS Student List

Media Files

No media files provided.

Project Submission

+ Submit Assignment

Your submissions

Background

We want to render the following student list by using ReactJS library.

Here is the HTML mockup:

<div>
  <h1>Student List</h1>
  <p>Sort by <a>name</a> <a>score</a> <a>top 3</a> <a>fail</a>.</p>
  <ul>
    <li>75—Thomas Mak</li>
    <li>75—John Kwan</li>
    <li>62—Steven Wu</li>
    <li>58—Susan Lee</li>
  </ul>
  <p>Total: 10</p>
</div>

Requirement

  • Try to use ReactDOM to render the view.
  • You need to define your own data structure.
  • You will need to divide the HTML code into different React Component.

Help

âť“ Show help content

Submission guideline

  • If you use codepen with Babel for the exercise, please submit the URL.
  • If you work on files, you may upload them in the submission form through zip or files.

Notes

If you want, you can find my CSS style here, but they are not necessary to complete the functionality of the exercise.

.fail {
  color: red;
}

/* Make it beauty */
body {
  padding: 2em;
}

h1 {
  font-size: 1em;
}

ul,
ol{
  padding: 0;
  list-style-position: inside;
}

a {
  color: #666;
}
a:hover {
  color: #222;
}

Marking scheme