Practice What You Learned

Vegetables

CRUD, MVC, REST, INDUCES and JSX: Remember where we are going

arthur_node_jsx_diagram_photoshopped

mvc-meme

Learning Objectives

  • Practicing index and show, new and create routes with express

Prerequisites

  • JavaScript
  • Express
  • Node
  • JSX

Steps

  1. Add A second Model File For Vegetables to your fruits app
  2. Add 5 Vegetables
  3. Create Index, Show, New and Create routes for Vegetables
  4. Create Index, Show and New jsx Views
  5. Refactor your application to work appropriately hint views can be reused but you can also make subfolders in the views folder, take the subfolders approach so that you can still follow along in class.

The User Stories

  • When a user goes to the /vegatables route they will see an index of veggies on the page
  • When a user clicks on the name of the vegetable, they will be taken to that vegetable's show page, and will see the vegatables's name and color and if its READYTOEAT.
  • When a user goes to /vegetables/new a user sees a form that allows them to create a brand new vegetable, and then redirects the user back to /vegetables

Hints

/views/fruits/Index.jsx
/views/vegetables/Index.jsx

res.render('vegetables/Index', {...})

res.render('fruits/Index', {...})

Copyright © Per Scholas 2023