Skip to content

Instantly share code, notes, and snippets.

@khumphrey
Last active November 1, 2019 02:10
Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 20 You must be signed in to fork a gist
  • Save khumphrey/310c394ab494ac588c1cf4b1bc169130 to your computer and use it in GitHub Desktop.
Save khumphrey/310c394ab494ac588c1cf4b1bc169130 to your computer and use it in GitHub Desktop.

Vanilla javascript

  • A general smattering (too much to list, codewars problems are great practice!)

Database

  • If you want more detail refer to Gist: Sequelize-Express-Study-Guide
  • How to connect to connect to the database from node (i.e. connection string - protocol://address:port/dbName)

Model

  • Definition
  • Attribute validations and default values
  • Class methods, Instance methods, Hooks (what is this?)
  • Eager loading/defaultScope: include keyword

Relations

Server

  • Making a middleware match (verb & URI, app.use, app.all)
  • Accessing information from request in express
    • req.body
      • body-parser (urlencoded and json)
      • PUT and POST have a request body GET and DELETE do not have a request body
    • req.params
      • Part of our URI in the request and in our middleware - preceded by : in middleware
    • req.query
      • Part of our URI in the request but not in our middleware
  • Importing (requiring in) the database
  • Querying / mutating database
    • In-built Model methods: findOne, findById, findAll, update, destroy, create (all of these are Promises)
    • In-built Instance methods: update, destroy, save (all of these are Promises)
  • Using custom class/instance methods
  • Setting statuses/sending responses (e.g. response.status(201).send(createdUser) )
  • Statically sending files (e.g. express.static())
  • Error handling

Browser

React

  • Props
    • How to access them
      • In "dumb" components through the function parameter (e.g. function (props) => { return (<div> { props.nameOfVariable } </div>) }
      • Class - this.props.nameOfVariable
    • How to send them down (e.g. <BestComponentEver handleChange={this.handleChange} /> OR <BestComponentEver {…this.props} />)
  • Creating state
    • Class definition style
    • In the constructor function (don't forget to invoke super())
    • e.g. this.state = { stateVariableName: defaultStateValue }
    • State is mutable. Know how to mutate it (i.e. this.setState({ stateVariableName: newStateValue }))
  • JSX
    • Nesting in pure React (In the render of a ParentComponent include <ChildComponent />)
    • Enumeration
      • Use && or a conditional (e.g. {this.props.name && /* Do Enumeration */ })
      • Use return() for multi-lines
      • Give a key to each JSX item you return
  • Forms
    • How to get a value from a field (i.e. input, textarea, select)
    • How to create, send and use functions for onClick, onChange, onSubmit
      • Don't forget to bind them
      • Referred to as this.functionName within their component
      • How to invoke these functions with parameters in child components

Redux

  • Creating a store
    • Initializing middleware
    • Creating a root reducer with combineReducers
  • Actions - plain objects with type whose value is a string and who may optionally have more data
  • Action Creators
    • Functions that return actions
    • Defining synchronous action creators
  • Dealing with the store
    • subscribe-ing to store changes
    • unsubscribe-ing to store changes
    • dispatch-ing actions to the store
  • Reducers
    • Initializing state (e.g. export default (state = initialState, action) => { /* Do the reducing! */} )
    • Conditional logic based on action type
    • Remember these are pure functions (No side effects)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment