Skip to content

Instantly share code, notes, and snippets.

<Your Project's Title>

A description of your game. Background info of the game is a nice touch.

Screenshot

acreenshot

acreenshot

Technologies Used

React Router Route Params/useParams Practice Exercise

Code a React app to demo Client-Side Route Params & the useParams hook.

Instructions

  1. Create a new React-based project in StackBlitz.

  2. Add react-router as a dependency by:

  • Shutting down the React development server in the terminal with [ctrl] + [c]

Walk-thru of JavaScript Closures

Road Map

  • Intro
  • What's a "free" Variable?
  • Review of Scope
  • "Persisting" Scope Using Inner Functions

React Basics Review - State, Styling & Event Handling

Setup

  1. Browse to stackblitz.com and create an account if you don't have one.
  2. Click [+ New Project]
  3. Select the "Frontend" tab
  4. Choose the React (JavaScript) template
  5. Click the "Vitejs - Vite (forked)" at the top and rename to something like "React State & Styling Exercises"

Python Intro / Control Flow Review Questions:

  1. Instead of using code blocks delimited with curly braces, Python uses i_________.

  2. The line preceding an indented block of code must end with a _ character.

  3. True or False, the number 0 is falsey in both JS & Python?

  4. True or False, the number 1 is truthy in both JS & Python?

MERN-Stack CRUD Code Flow

Note: The code above is not meant to be complete.

FEATURE A - Load & Display Posts Upon First Render

STEP DESCRIPTION

Fundamentals of React

React Fundamental Summary
React
  • A JS library for building dynamic UIs using components.
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 n
:root {
background-color: white;
}

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.