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

Build a Vegetable App with JSX-REACT-VIEWS

  • make a directory for your homework
  • change into the directory you made
  • make a server.js file in that directory
  • make models views and controllers folders in that directory
  • init npm project in that directory
  • init git repository in that directory
  • touch .gitignore and add .env and node_modules to the file, write each on it's own line
  • git add -A && git commit -m "start here"
  • touch .env
  • add your MONGO_URI
  • go to https://github.com/new and make a new github repo
  • copy the git link from your new empty git repo
  • git remote add origin
  • open code in vs code

Step 1

  • setup basic express server
  • install appropriate packages express jsx-view-engine react react-dom
  • look at code from classwork to help you
  • You should not google this you are not far enough in the process to get the right information
  • You will be able to Google soon if you choose to

Steps

  1. Add A Model File For Vegetables to your vegetables app
  2. Create Index, Show, New and Create routes for Vegetables
  3. Create Index, Show and New jsx Views
  4. Add 5 Vegetables using your New Page
  5. Go to http://localhost:3000/vegetables/new
  6. Create a new vegetables
  7. See the fruit at http://localhost:3000/vegetables
  8. Show page for vegetable works
  9. You can see vegetables in your MongoDB Atlas DB vegetables database

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', {...})