VectoMaster

What does the multer node package do?

"When a user wants to upload images through a form in React it helps with that" (Week 5 day1 4:15) Week 5

How do you write an IFII Function.

(function () {... })(); Week6

Explain creating custom directives. in Angular

*example of non-custom directive: ngStyles, ngClass, ngIf, ngFor -To create custom directive use the command ng g directive nameOfDirective -It creates a file like this import { Directive} from '@angular/core'; @Directive({ _____selector: '[appNameOfDirective]' }) export class NameOfDirective{ _____constructor() { } } - "The directives are similar to components but don't have all the life cycle hooks" - A directive attaches it self to the element we place it in and allows use to modify that element. ex: <p [nameOfDirective]>directive can modify this tag</p> -Importing things like HostBinding and HostListner into your directive allows us grab data from the dom more efficently vid Week 8 Day2 @02:35

Explain ActivatedRoute and Params in Angular

- ActivatedRoute gives us the information of the current active route url - Params allows us to read data from the url -ex: in A component you are routing to import {ActivatedRoute, Router, Params} from '@angular/router' ... constructor(private route:ActivedRoute){} ... ngOnInit():void{ ___this.route.params.subscribe((params: Params)=>{ ________console.log(params['id']); ___}) }) } This will log the id property of the params object that is parts of the active route. This is a subscription to an observable but since its built into Angular we don't have to destroy it. vid Week 8 Day3 part2 @00:58

Explain the Life Cycle Hook DoCheck in Angular

- Can call to check class properties ex: ngDocheck(){ __if(this.oldVal !== this.changeVal{ _____//Do Something __} } vid Week 8 Day2 @00:25 - Detect and act upon changes that Angular can't or won't detect on its own. Called immediately after ngOnChanges() on every change detection run, and immediately after ngOnInit() on the first run. https://angular.io/api/core/SimpleChange Week 8

Explain using services in Angular

- You can create a service with the command ng g service path/nameOfService vid Week 8 Day2 @01:08 - "A service is nothing more than a class Thats going to have methods and properties in it" vid Week 8 Day2 @01:08 - To use a service you have to import it into the app.module.ts and add it to your providers array, or inject it. Then you add it in your component by importing it and injecting it. Week 8

Explain passing / sharing data from the class to html in Angular

- You can use local reference to set up #var as an attribute that can then be accessed in the component class. You can then feed that data into methods in the (click) -Implement 2way data binding -Implement ViewChild Week 8

Explain the Life Cycle Hook AfterContentInit in Angular

-"Give you the ability to view your local reference" vid Week 8 Day2 @00:28 -Responds after Angular projects external content into the component's view, or into the view that a directive is in. -Called once after the first ngDoCheck(). Week 8

Explain the Life Cycle Hook onChanges() in Angular

-"When anything within the component itself regarding data properties that are being passed through @Input onChange gets called" vid Week 8 Day2 @00:15 -Called before ngOnInit() and whenever one or more data-bound input properties change. Note that if your component has no inputs or you use it without providing any inputs, the framework will not call ngOnChanges() https://angular.io/guide/lifecycle-hooks Week 8

Explain the Life Cycle Hook AfterViewInit in Angular

-"When the component puts it's content onto the page" vid Week 8 Day2 @00:36 - Respond after Angular initializes the component's views and child views, or the view that contains the directive. - Called once after the first ngAfterContentChecked(). https://angular.io/guide/lifecycle-hooks Week 8

Explain reading data from local reference in .ts using ViewChild in Angular

-A local reference gives angular the ability to read data from your html file with out 2way data binding. in your <input> create an attribute with #inputName. -Then in your component import {ViewChild , ElementRef} from '@angular/core' -Then in your component call @ViewChild('inputName') inputName: ElementRef; - You can then do this.inputName.nativeElement.value to get the value of your <input> Week 8

Explain Dependency injection in Angular

-Add a dependency in the arguments of a components constructor ex: import {Service} from 'path/name.service' constructor(public service:Service){} public: is the access modifier service: is the var name Service: is the var type vid Week 8 Day2 @01:15 - This allows us to use things like services within a component Week 8

Explain routerLink in Angular

-Add the attribute routerLinkActive="active" to an element, like a <li>, to make it a router link. - You may also add the attribute [routerLinkActiveOptions]="{ exact: true }" to make the exact path required -Then instead of the hrefs used in and <a> use routerLink="/path" vid Week 8 Day3 part2 @00:31 -If doing nested routes use [routerLink]="['/path', server.id]" vid Week 8 Day3 part2 @00:44

Explain attribute and structural directives like ngStyles, ngClass, ngIf, ngFor in Angular

-Attribute directives: Are used to manipulate attributes in an element, and are between the [ ] in an element. Basically just manipulate the dom. vid Week 8 Day1 part2 @00:21 -Structural directives: Have the ability to add to the dom. They start with an '*' _____-ngStyles sets the style of an element _____-ngClass takes in an object with a boolean value to indicate if it should apply the class for styling. _____-ngIf is what it sounds like _____-ngFor is what it sounds like Week 8

Explain creating class components In React.

-Components are classes that extend the React.component class. -React.component class contains the render() which can return jsx, that can be renderd on the DOM -Must call ReactDOM.rend(<ClassName/>, document.getElementById('filename') ) to render the component. Week6

Explain creating components with angular cli in Angular.

-Components go in the src/app folder -Each component is a class like in React -can create components with the cli tool by using the command ng g c componentName -Components are folders which can contain 4 files _____>cn.component.css _____>cn.component.html (necessary) _____>cn.component.spec.ts _____>cn.component.ts (necessary) Week 8

Explain the Method SimpleChanges in Angular

-Correlates and works with the Life Cycle Hook OnChanges() -"Gives you the changes on the before and after" OnChanges() vid Week 8 Day2 @00:04 -Represents a basic change from a previous to a new value for a single property on a directive instance. Passed as a value in a SimpleChanges object to the ngOnChanges hook. https://angular.io/api/core/SimpleChange Week 8

Explain implementing expess-JWT

-Create a .env and store a secrete in it. This secret can then be verified by jwt.verify(token, process.env.JWT_SECRET); -To generate a token you can use: const token = jwt.sign({ _id: user._id }, process.env.JWT_SECRET); this will generate a token with { _id: user._id } and the secret stored secret, after a user has logged in for example. -You can the persist the token as 't' in cookie with an expiry date like so: res.cookie('t', token, { expire: new Date() + 9999 }); Week7

Explain using and storing information in JWT

-Create a .env and store a secrete in it. This secret can then be verified by jwt.verify(token, process.env.JWT_SECRET); -To generate a token you can use: const token = jwt.sign({ _id: user._id }, process.env.JWT_SECRET); this will generate a token with { _id: user._id } and the secret stored secret, after a user has logged in for example. -You can the persist the token as 't' in cookie with an expiry date like so: res.cookie('t', token, { expire: new Date() + 9999 }); Week7

Explain creating our own custom module in Angular

-Create a file with the .module.ts extension and add at the end @NgModule({ __imports:[what you wat to import] __exports: [what to export it as] }) export class AppName of{}; Week 8

Explain passing data from parent to child using @Input in Angular

-First in your child component class import {Intput} from '@angular/core'. Intput is a decorator. -Then call in you child component class @Intput() name: type; -Then in parent html [name]="value" Week 8

Explain passing data from child to parent using @Output and eventemitter in Angular

-First in your child component class import {Output, EventEmitter} from '@angular/core'. Output is a decorator, and EventEmitter is a class. -Then call in your child component class @Output('alis') nameOfFunc = new EventEmitter<T>(); T is a generic type which you can set with an object like {prop1: type, prop2: type} can add 'alis' to refer to 'nameOFunc' -Then you can call it with in your child component class this.nameOfFunc.emit({prop1:value, prop2: value}) - Then in the parent component html in child element add the attribute (nameOfFunc) = "someFuncInParent($event)" -Then in the your parent component class add the method someFuncInParent(data: {prop1:value, prop2: value}){...} Week 8

Explain the wrapper ElementRef in Angular

-Its the type of the elements you get from the DOM @ViewChild('input') input: ElementRef; -A wrapper around a native element inside of a View. -An ElementRef is backed by a render-specific element. In the browser, this is usually a DOM element. https://angular.io/api/core/ElementRef Week 8

Explain the files within generated application from cli in Angular like Karma.conf, angular.json, tsconfig, etc

-Karma.conf is for testing with Karma. -Angular.json is all the configurations for you angular app, like boot strap. -tsconfig is the compile settings for type script. -tslint is the telacense for type script. -.browserslistrc is to make sure app is cross browser compatible (has webpack in it) -src is where your code is goin to be -e2a is for testing -src/app/app.module.ts, This is the source where your components are rendered. Containst >imports all your components and other imports >@NgModule({ ____declarations:[ all your components] ____imports:[ All of your modules ] ____providers:[ all of your services ] } >export class AppModule { }//just runs main.ts RETURN TO THIS WITH MORE DETAILS WHEN YOU KNOW MORE Week 8

Explain the Parameter decorator ContentChild in Angular

-Life Cycle helper method to get data from the DOM - ex : @ViewChild('textInput') serverNameInput: ElementRef; grabs the value of the input tag <input type="text" class="form-control" #textInput> -"At a very high level, it will give us access to the text in-between The component tags" vid Week 8 Day2 @00:05

Explain using the ngOnInit Life Cycle Method in Angular

-Method that must be implemented when implementing OnInit interface -This is the Hook that gets called when the component gets rendered vid Week 8 Day2 @00:19 -"Initializes the directive or component after Angular first displays the data-bound properties and sets the directive or component's input properties." Called once, after the first ngOnChanges(). https://angular.io/guide/lifecycle-hooks Week 8

Explain the Life Cycle Hook AfterViewChecked in Angular

-Respond after Angular checks the component's views and child views, or the view that contains the directive. -Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked(). https://angular.io/guide/lifecycle-hooks Week 8

Explain storing jwt tokens on client side and sending to server in fetch requests

-To create the token you would first generate ex: const token = jwt.sign({ _id: user._id }, process.env.JWT_SECRET); Then store it as a cookie ex: res.cookie('t', token, { expire: new Date() + 9999 }); -Then you would make a fetch request to an endpoint that would return a token ex. const result = await fetch('url', req); const data = await result.json(); const { token } = data; Week7

Explain Hierarchical injectors in Angular

-To inject a service with in a service first import {Injectable} from '@angular/core' import {service} from 'path/name.service' -Then at the top of the class call @Injectable() Which will give the service the ability to use other services -Then in the services constructor inject the service constructor(public service:Service){} vid Week 8 Day2 @01:48 -See drawing @vid Week 8 Day2 @01:57 Services are inherited so if you inject it into your app.module then app and children components share that service. if you inject it lower in the tree than only children after you inject it share it. To do that add the service in a component's @Component -ex: @Component({ ... __providers:[ service] }) Week 8

Explain ViewContainerRef in Angular

-ViewContainerRef "We use ViewContainerRef when we're creating structural directives, because structural directives are either going to add or remove elements from the the DOM itself" .."Where ever the directive is placed [element] that's going to be the view container" and we use ViewContainerRef to get at it." vid Week 8 Day1 part1 @00:04 -TemplateRef "This is what we attach inside of a container, this is where the html is goin to be place inside the ViewContainerRef", "gives your app the ability to read data without 2way data binding " vid Week 8 Day1 part1 @00:06 -ex: import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core'; @Directive({ _____selector: '[appUnless]' }) export class UnlessDirective { _____@Input() set appUnless(condition: boolean) { ________if(condition){ __________this.vcRef.createEmbeddedView(this.templateRef); ________} else { __________this.vcRef.clear(); ________} _____} _____constructor(private templateRef: TemplateRef<any>, private vcRef: ViewContainerRef) { } } -set: The keyword set means that when ever we use the directive with an * it triggers it automatically. Week 8

Explain Routes and RouteModule in Angular

-You can create a RouteModule, by creating a file, usualy call app-routing.module.ts. Then in app-routing.module.ts import {Routes, RouterModule} from '@angular/router'; import allOfYourComponents from 'path/name'; Then create an array of object containing data about your routes const appRoutes: Routes =[ __{ _____path:'path', //back slash '/' not required _____component: componentName _____children[//for nested routing _________{path: ':id', component:childComponent} _____] __} ] -Then to let angular now this is goin to be used for routing @NgModule({ __imports:[RouterModule.forRoot(appRoutes)] __exports: [RouterModule] }) export class AppRoutingModule{}; -Then import it in your app.module.ts -The directive is then <router-outlet></router-outlet> Week 8

Explain Creating custom subscriptions in Angular

-You must import {Subscription} from 'rxjs'; Then create a var of type Subscription testSub: Subscription; Then set it equal to the subscription of something that's an observable like an interval const inv =interval(1000); this.testSub=inv.subscribe(val => console.log(val)); Every time inv changes testsub will log val. -If not destroyed it causes a memory leak. To destroy import {OnDestroy} from '@angular/core' which is an interface so, then implement OnDestroy(){ ___this.testSub.unsubscribe(); } Week 8

Explain passing content between component tags using ng-content in Angular

-ng-content is a templet or element directive. -It's used to pass content between parent and child components -Place <ng-content> data </ng-content> tags in component1.html -Then data placed in between <component1></component1> in component2.html will be passed to component1 Week 8

Explain creating and using selectors in redux

//store is the store and test is what we want export default (store, {test})=>{ ________//filter through store values ________return store.filter((value)=>{ ______________//if test exist in this store[value] match = true ______________const match=value.includes(test); ______________return match; ________}) } Week7

2 FOR 1 1-How do you setup mongodb 2-How do you setup Mongodb in node

1 - Download latest version of mongodb - Extract the files. - Move the extract folder to its permanent place - Create a folder to hold the data produced by mongodb -In the command prompt navigate to the folder that contains the extracted folder and the created data folder. -Execute the command mongodb/bin/mongod --dpath= asolute path to created data folder. 2 const {MongoClient}= require('mongodb'); let _db const mongoConnect = callback=>{ //always sets up on 27017 MongoClient.connect('mongodb://localhost:27017/'); _db = client.db(); callback(); }) then in app.js mongoConnect(()=>{ app.listen(3000); }); May need to rewrite Week 4

How do you include stuff from outside files in an html file using ejs?

<%-include('path to file to include)%>// for partials <%=valuesPassed%>//for values <% if(true) %> //for executable code Week 4

What is the react virtual Dom?

A copy of the real dom, which when changed the real dom is updated. Is more efficient than changing and reuploading the real dom, because it doesn't need to re-render the hole dom just what is needed. Week 5

Explain using decorators like @Component in Angular

A decorator runs before a components constructor. Executes functionality in the background while constructor is running. Contains the following properties: -selector: The element for this component. -templateUrl: path of a template file for an Angular component. -styleUrls: ['./path to css'] registers css for this component. >Can also use styles:[.h1{...}] Week 8

Explain concurrently package

Allows you to Run multiple commands concurrently. Like npm run watch-js & npm run watch-less but better. Week7

Explain blocking rendering of compponents with higher order components

Create a function which takes an obj of props as parameters. Then have that function return a <Route/> component which has a function in its component attribute, that returns a <Redirect/> component based on the arguments passed in the function. Week7

How is data stored in Mongodb?

Database > Collection/table > Documents> Fields> Properities. Think of Json. Week 4

How is data stored in Mongodb?

Database > Collection/table > Documents> Fields> Properities. Think of Json. Week 5

In react how can you stop a page from reloading after and event?

Event.preventDefault(); Week 5

Explain mapping state to props from redux store in React

First import { connect } from 'react-redux'; Create a stateless function and have except the state as a param and return the prop:state example const mapStateToProps = (state) => { _________return { ______________expenses: state _________} } Week6

Explain grabbing data from params in. url using props.match.params in React.

First import { connect } from 'react-redux'; const mapStateToProps = (state, props) => { ________return { ______________expense: state.find(expense => expense.id === props.match.params.id) _______} } Week6

how to get file name directories with require.main.filename

In a Utils folder usually you would set up a file with const path = require('path'); module.exports = path.dirname(require.main.filename); Week 4

Explain connecting individual components to store using connect method In React

In a component file First import { connect } from 'react-redux'; then at the end of the page use export using export default connect()(AddExpensePage); Week6

Explain subscribing to store to trigger functions after state is changed in redux store React.

In app.js you would do something like const store = createStore(countReducer); store.subscribe(() => { ________What you want to do on change state }); Week6

Explain event.preventDefault() behavior.

In react Event.preventDefault() is how can you stop a page from reloading after and event. Week6

To bind a method to a button in Angular what do you do

In the button attributes do something like (click) ="methodName()" Week 8

Explain how to Combine multiple reducers in one redux store

In the file where you are configuring your store import { combineReducers } from 'redux'; Then import your reducers then when you create your store with createstore() use the combineReducer() and do something like const store = createStore( __________combineReducers({ __________________key1: Reducer1, __________________key2: Reducer2 _________}) ); Week6

How do you set a components default props

In the js where you are defining the component do component.defaultProps ={ prop: 'value'} Week7

Explain using loaders with webpack.

In the webpack.config.js in the module prop, rules array define an object with properties loader: 'any loaders you want to teach webpack' test: a regular expression to to find the files exclude: files to exclude You must create an object for every file type you want webpack to bundle, like js, css, and scss. (css and scss can be done in one with the regular expression /\.s?css$/, in test Week6

How do you connect to a database with mongoos

In you main app.js mongoose.connect(uri to connect to).then(()=>{ app.listen(3000); }).catch(clg); Week 4

Explain dispatching actions within components in React

In your component file first import { yourAction } from '../path to action'; Then in the onSubmit attribute you may use your action Example: <ExpenseForm ________onSubmit={(expense) => { ________props.dispatch(addExpense(expense)); ________props.history.push('/'); _______}} /> Week6

Explain how to create a bundled file in webpack.

In your package.json script add "build": "webpack" then type in the terminal type npm run build Week6

Explain using webpack as a dev server.

In your package.json script add "dev": "webpack-dev-server" then type in the terminal type npm run dev Week6

Explain creating dynamic routes

In your route tag add a :id like so <Route exact path="/page/:id" component {Page} /> then when Linking to the page <Link to="/page/some Prop">some Prop</Link> "some Prop" is then passed as props Week6

Explain using react-router-dom

In your router file import { BrowserRouter, Route, Switch } from 'react-router-dom'; BrowserRouter: Is the container to let to let react know that routing is goin to happen between <BrowserRouter></BrowserRouter> Switch: Place your <Route> tag between <Switch></Switch> Route: Routes to a sepcified component when and endpoint is hit, Example <Route exact path="/" component={HomePage} /> D3, 00:19 Week6

Explain Selectors in redux

It is a technique you can use for searching state based on a filter you apply with out changing that state. It will return stuff from the state based on that filter. Week6

Explain Selectors in redux

It is a technique you can use for searching state based on a filter you apply with out changing that state. It will return stuff from the state based on that filter. Week7

What is a context in Context API?

It is essentially a component that you can rap your app in. To create a context use the createContext method from react ex: import {createContext} from 'react'; const errorContext = createContext(); Week7

The fetch API is used for

It is used to reduced the amount of code to handle asynchronous functions when fetching data from a url. Example: function fetchData(url){ ___fetch(url); //returns a promise. } fetchData(url).then(data =>{ ____console.log(data)//prints the raw data });

What does the useReducer() method from react do?

It takes two arguments and sets the state and the dispatcher so that when the dispatcher is called it dispatches an action on to the state ex: const [state, dispatch]=useReducer(reducer, initialState); The state is tied to the "initialState" argument and when ever we dispatch an action the "reducer" argument is used. Week7

NavLink vs Link components in react-router-dom

NavLink is a special version of the <Link> that will add styling attributes to the rendered element when it matches the current URL. To use a NavLink you must import { NavLink } from 'react-router-dom'; In your webpack.config.js you must have devServer: { ______historyApiFallback: true } syntax <NavLink to="/" activeClassName="" exact={true}>Home</NavLink> To use a Link you must import { Link } from 'react-router-dom'; syntax <Link to="/">Home</Link> Week6

How can you get data from the DOM in node?

One way is to have an element with the attribute "method=POST" Week 4

What is a REST API

REST is acronym for REpresentational State Transfer. Is an API which can respond to requests to endpoints. It is a de-facto standard for a software architecture for interactive applications that typically use multiple Web services. Week 5

What Method in react renders the dom.

ReactDom.Render(..Fill out arguements) Week6

Explain implementing 2 way data binding in react

Set an onChange handler in render() return() equal to a method. Then in the method except an event as a param, and use it to set the state. Example render() { ____return ( _________onChange={this.onDescriptionChange} ____) } onDescriptionChange = (e) => { ___const description = e.target.value; ___this.setState({ description }); }; Week6

how the virtual dom works in React.

The virtual DOM (VDOM) is a programming concept where an ideal, or "virtual", representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM. This process is called reconciliation. Week6

How to use the useState() method?

This is an example of hooks. This is use to create a state within a component, first: import React, { useState } from 'react'; then const [state, setState] = useState(defaultState); The "state" var is the state When you want to make changes to "state" call "setState()". "useState()" sets the default state with the given argument. Week7

How to use the useContext() method?

This sets the context of a component, first: import { useContext } from 'react'; then const var = useContext(context); var is now set with the given context and has access to it. Week7

Explain the difference between adding middleware within routes vs the express application itself.

To add middleware within routes you would use a package like express-validator by adding it in your router file by first extracting body from express validator const {body}=require ('express-validator'); then add a second array argument in your router.post/get like so router.post('/add-product', [ body('title') .isString() .isLength({ min: 3 }), isAuth, ], adminController.postAddProduct); You can also define a function, like isAuth, and use that as an argument instead of an array. Week 5

Explain rendering components within components in React.

To render components with in component, the parent component must have access to the child component (so import it) then reference the child in the parents render() method's return. Example: render(){ ________return( ___________<Child/> ________) } Week6

Explain how to use bcryptjs and hashing values

To use bcrypt you must first import it with const bcrypt = require('bcryptjs') you may has a password by bcrypt.hash('password', 10).then(hashedPassword) this returns a promise which contains the hashed password in hashedPassword. You can compare a hashedPassword to a real password with bcrypt.compare('password','hash').then(match) which returns a promise containing the boolean as to wheather they match Week 5

Explain adding middleware in express routes with jwt

Use the expressJwt({}) function which excepts and object as and argument, which the properties secret: process.env.JWT_SECRET, //where secret is userProperty: 'auth', //property algorithms: ['HS256'] //algo your using then import it into your routes file, and add it as the second argument in the rout.post/get methods as middleware Week7

How do you help the express package read request and response sent from an http server?

Use the package body parser. const bodyParser = require('body-parser') app.use(bodyParser.urlencoded({extended: false})); Week 4

Spread Operator '...'

Used to combine objs let carAttributes1={ ___make: 'ford', ___model: mustang }; let carAttributes2={ ___make: 'ford', ___model: mustang }; let allCarAttributes= {...carAttributes1, ...carAttributes2}; creates object with all fields.

What does the package dotenv do?

Used to create environment variables, stored in the ".env" file. The contents of the .env file are store in process. Week7

Explain using plugins in babel to use expierenmental features in javascript

You do it through you package.json In you package.json add something like "plugins": ["transform-class-properties"] Example: "babel":{ ______"presets":["@babel/preset-react"] } Week6

Explain splitting components up in different files.

You must import React from 'react' and any other necessary imports. Then create a component. Then end the file with export default ComponentName; Week6

Using babel to transpile react code.

You need 3 different packages, @babel/cli, @bable/core, and @babel/preset-react -The @babel/cli is the cli tool that allows use to transpile -The @bable/core is the over all babel functionality -The @babel/preset-react tells babel that this is only goin to be a react application in package.json create the object "babel": { "presets": ["@babel/preset-react"], to tell babel this is a react app. Week6

Explain connecting redux store to react app using react-redux package and Provider component

You need react-redux package In your configureStore.js import { createStore } from 'redux'; import expensesReducer from '../reducers/expenses'; export default () => { ________const store = createStore(expensesReducer); ________return store; }; then in app.js import { Provider } from 'react-redux' const store = configureStore(); const jsx = ( _____<Provider store={store}> __________<AppRouter /> _____</Provider> ); Week6

Explain implementing 2 way databinding in Angular.

You use and attribute directive. First you have to turn it on by import {FormsModule} from '@angular/form'; in your app. module then include it in your imports array. Then in your input element include the attribute [(ngModel)]="whatToBind" Week 8

Explain dispatching other actions within an action

You use redux-thunk to define a function that dispatches another action. Week7

Explain mapping dispatch actions to props

You would create a function, usually called mapDispatchToProps, which takes takes a dispatch as an argument and returns a dispatch(action()); You must then set it as the second argument in connect when exporting. Example: const mapDispatchToProps= (dispatch) => ({ action: () =>{ ________return dispatch(action()); }}); export default connect(state,mapDispatchToProps)(component) Week7

Creating a web server with the http package?

You would do something like const http = require('http'); const server = http.createServer((req, res)=>{ const {url} =req.url;//tell us what url is being requested //depending on what the url is if(url ==='/'){ //send back html res.write( `<html><html> ) } }); server.listen(3000)//this starts server on port 3000 Week 4

How do you use bcrypt to compare a password to a hashed value?

bcrypt.compare('password123', hashvalue)); Week 5

Explain react component lifecycle methods

componentDidMount(): "When the component if finish mounting on the page execute this functionality" componentDidUpdate(): "Triggerd only when a state has changed within the application"D2, 01:48 Week6

Example of Hooks

const [text, setText] =useState(''); -text is the state -setText is how you change the state -the '' in useState('') is the initial state vid contextapiandhooks 01:34:00. Week7

What are some helpful mongodb Methods

const db = getDb(); //updates a record collection('products').updateOne({ _id: this._id }, { $set: this }); //inserts a record dbOp = db.collection('products').insertOne(this); //deletes a record db.collection('products').deleteOne({ _id: new mongodb.ObjectId(id) }).then( //finds & returns a record db.collection('products').find({ _id: new mongodb.ObjectId(id) }).next().then( Week 4

Using express to easily create web servers

const express = require('express'); const app = express(); app.use("Url you want") Week 4

creating endpoints with express.Router

const express = require('express'); const router = express.Router() router.get('/cart',shopController.getCart); Week 4

Explain jsx expressions.

jsx expressions in tag are between {}, in the render methods return Week6

Explain adding middleware with redux-thunk

redux-thunk allows you to add middle-ware to your store. In your configureStore.js import thunk from 'redux-thunk'; then from redux import { applyMiddleware, compose } from 'redux'; Then in the arguements for createStore createStore(compose(applyMiddleware(thunk)) This will give the ability to trigger function and dispatch other actions instead of just returning an object. Week7

How do you change the url after a response?

res.setHeader('Location', '/'); Week 4

How do you set the status code of a response in node?

res.statusCode = #; Week 4

How do you add functionality to Schema in mongoose

schema.methods.methodName = function(){ //.this = schema's this }; for statics use Schema.statics.methodName = function(){} Week 4

How do you destroy a session

with req.session.destroy(err => { res.redirect('/'); }) Week 5

How do you create schema properties in mongoose

you would do something like const schema = new Schema({ title:{ type:String, required:true //makes field required } }) Week 4