Skip to content

Instantly share code, notes, and snippets.

Guide to User-Centric CRUD using Express & Mongoose

Intro

Typically, logged in users interact with an application that results in data being created, updated and deleted.

In almost every case, the application's code will need to ensure that the logged in user can only update/delete data created by them, not the data of other users.

Fundamentals of React

React Fundamental Summary
React
  • A JS library for building dynamic UIs.
JSX
  • A syntax extension to JS that looks like HTML and makes defining UIs more intuitive vs. pure JS.
  • JSX emits text in the page when a JS expression is surrounded with curly braces
    <div>{/* JS Expression */}</div>.
  • JSX transpiles into a function call that returns a JS object, thus, JSX can be assigned to variables, passed as arguments to functions, etc.
  • JSX can render an array of components, however, each component needs a key prop with a unique value.
    const catList = cats.map(c => <div key={cat.id}>{cat.name}</div>);.
Components
  • A user interface is defined by a hierarchy of components.
User-Defined Component May be defined as a function or class but must be named using UpperC

RESTful Routes to CRUD Mapping

Example resource: posts

HTTP Method
(Verb)
Path/Endpoint/URI CRUD Operation Typical
Controller Action
Has Data
Payload
GET /posts Read all posts index No
GET /posts/:id Read a specific post show No
POST /posts Create a new post create Yes
PUT /posts/:id Update specified post update Yes