Work through Facebook’s ReactJS tutorial^*. Note the following.

• Initialize a new Lab08 directory using code from the Unit08-React course repo. This implements everything from the tutorial before the “Your first component” section.

• In general, try to build the example code up by hand rather than by just copying from their repo. Here are some notes on the files you’ll build.

  • server.js — You can safely ignore the other versions of their server for different web servers (e.g., GoLang, Flask, PHP, ...).
  • package.json — Use this as written.
  • comments.json — There are some default user comments hard-coded in this JSON file.
  • public/index.html — They ask you to write your JavaScript code here in script tags; we suggest that you delete the script tag and include your code from a separate scripts/example.js.
  • public/css/base.css — The repo provides this stylesheet, but the tutorial, as written, never uses it. Integrate it so that you can have (slightly) better formatting and so that you can work with CSS in future labs.
  • public/scripts/example.js — Delete their solution here; you’ll build it up piece by piece.

  You should already have your own .gitignore file. You should now be able to configure and run a server that serves up a blank HTML index page and JSON-formatted comments via the route coded into the server.

Submit this code for Lab 8.

When you’ve worked through the tutorial and have a running application, record your explanations of the following issues.

1. Explain:

   1. the component structure of the application. What makes the UI composable and why does this matter?
   2. what JSX does.
   3. why ReactJS is safe with respect to XSS.
   4. how the data flows through the components. How are comments loaded? created? saved.
   5. the nature and purpose of props and state. Which is immutable and which is mutable and why does this distinction matter?

2. Consider the following, more detailed questions based on statements in the tutorial.

   1. Try editing the comments.json file (to add or remove a legal comment). What happens and why?
   2. When the CommentBox has loaded comments from the server (in loadCommentsFromServer()), why doesn’t it call render() to make them visible?
   3. Of what advantage, if any, is it to require that components always represent the current state of the view?
   4. The app implements optimistic updates. Isn’t optimism here more like foolishness? What if the server rejects the new comment (for whatever reason)?

Write brief answers to these questions in lab8_2.txt.