Exit Ticket: Day 13 - Fullstack Data Flow & Juke

day13-exit-ticket.md

Exit Ticket: Day 13 - Fullstack Data Flow & Juke

Pick the correct order for the following flows of data.

1. The browser makes a request to get index.html from the server.
2. Express sends index.html to the browser.
3. The browser executes the bundle referred to in a script tag with a defer attribute.
4. React components are mounted for the first time.
5. A route returns a list of albums.

Pick which folder each file or line of code should be under.

• unicodesnowman.png 👉 public
• class SingleSong extends React.Component 👉 client
• import app from './app' 👉 client
• require('./app') 👉 server
• Artist.findAll() 👉 server
• <script defer src="/bundle.js"></script> 👉 public/client
  • Personally, I prefer to have the index.html file inside of the public directory and serve it from from /server/index.js using:

    // Static file-serving middleware
    app.use(express.static(path.join(__dirname, '..', 'public')))

  • Nonetheless, it boils down to preference. Juke has the index.html file in the client directory and serves it up from /server/index.js using:

    // Sends our index.html (the "single page" of our SPA)
    app.get('/', (req, res, next) => {
      res.sendFile(path.join(__dirname, '..', 'client', 'index.html'))
    })

Any other questions for morning review?

• Question: When do you need to pass props into a react components constructor/super functions? Sometimes the solution code has it, sometimes it doesn't.
  • Answer: Please refer to "Why Do We Write super(props)?".