For this course, we will stick with React Router version 2/3; version 4 is a paradigm shift that adds dynamic routing. Expect to see some warnings during installation, building and execution.

1. React Router

   1. What are the problems related to implementing routing in the context of single-page Web applications?
   2. Have you ever used an SPA of the complexity described in this introduction?

2. React Router Tutorial — Work through the first ten lessons, “Setting Up”– “Clean URLS”. We suggest that you start with the lesson 1 code and modify it as described in each successive lesson rather than moving to a new code base for each lesson. If you get messed up somehow, you can compare with their solutions.

   1. Lessons 1–2 — After lesson 2, you’ll have three (rather uninteresting) webpages: the main page (/); the about page (/about) and the repos page (repos/).
      • How can a Single-Page Application (SPA) have three “pages”?
      • Try entering the URL to one of these pages directly, e.g., localhost:8080/about. What do you get and why?
   2. Lesson 3 — Compare and contrast the HTML’s <a> and the React Router’s <Link>.
   3. Lesson 4 — What happens now when the user clicks on the “About” link on the main page?
   4. Lessons 5–7 — Nothing much new here, just enjoy the use of abstraction and parameters as you did in CS 1! Note that in lesson 6 you should be able to render the userName as well as the repoName.
   5. Lesson 8–9 — Explain index routes and index links.
   6. Lesson 10 —
      1. Compare and contrast the roles of the browser and the server in handling hash-based (e.g., localhost:8080/#/?_k=ty85cp) and browser-based (e.g., localhost:8080/) URLs.
      2. Check out how they are using the Webpack Dev Server. How can they get by without any server.js program?

You can find further documentation on the newer version here: React Training / React Router: Philosophy.