samuraijane

Redux 101

An overview of managing global state

• When we talk about <1>, we mean variables that can be accessed throughout the application regardless of what the view may be
• With React and its useState hook, state is managed locally– that is, the state variables are exposed only within the component where they are defined
• As such, they are specifically tied the component's corresponding <2> in the browser
• This type of architecture is known as <3>
• The <4> means the data, as defined by the state of a variable or variables, available to the view
• The <5> is the data that is rendered in the browser at a given point in time
• And the <6> is the logic that decides if the model should change

samuraijane

React 103

React props are similar to the argument and parameter of a JavaScript function

A JavaScript function that takes one or more <1> is defined with the same number of <2>

// definition --> `name` is the <3>
function greeting(name) {
  return `Hello ${name}`;
}

samuraijane

React 102

Managing state in React with onClick

State

• The term we use to refer to the value of some variable in <1> at a given moment in time is <2>
• Understanding how and when state <3> is critical to becoming a strong developer
• A hook is simply a <4> (before hooks, some developers would have called it a <5>)
• All hooks in React are <6> exports so to import a React hook, <7> are necesary
• Managing state requires a named <8> and a named <9> of your choice (the former holds a value while the latter sets the value)
• The syntax includes a <10> on an <11>

samuraijane

React 101

A brief introduction to React

React

• React is a <1> available at NPM
• As such, any project built with React will have the file <2> even though React is used to write front-end code
• A React project is built from separate <3> which keep the code compartmentalized
• It was created and is maintained by developers at <4>
• React uses a <5> to update the HTML DOM; your React code should not <6> the HTML DOM directly
• React attaches itself to the DOM through the <7> which is located in src/index.js

samuraijane

# Server 102
## Common express methods to handle client requests

`.get`  
Returns data to the client which the client has requested  
URL  
https://highonlife.com/members/328  
REQUEST BODY
```json
null

samuraijane

// DEFINE AND EXPORT
// save this in a file named "greeting.js"
function greeting(name) {
  return `Hello ${name}`;
}

module.exports = greeting;

// IMPORT AND USE
const greeting = require('./greeting.js');

samuraijane

const dns = require('node:dns');

const options = {
  family: 6,
  hints: dns.ADDRCONFIG | dns.V4MAPPED,
};

dns.lookup('google.com', options, (err, address, family) => {
  console.log('address: %j family: IPv%s', address, family)
});

samuraijane

***
BCRYPT
`npm i bcrypt`
[npm Docs](https://www.npmjs.com/package/bcrypt)
Creates a hashed string from an input. Uses callbacks, not promises.
 
 
***
BODY PARSER – DO NOT USE (SEE NOTES BELOW)
`npm i body-parser`

samuraijane

add the base64-encoded string on line 3 to the `src` value for an `<img>` tag.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjQAAAJYCAYAAAB1vXwiAAAABmJLR0QA/wD/AP+gvaeTAAB3SElEQVR42u29CXxTVd7/f37P8xdobniceWaecWacfRxHGSWFpkBzA+jMOKOO0kKKzuI4m+NOkyq4jEtIblIWgdICriNtUdEWZXFfRpqwiRu0LAq0BRTFBYUW2aHt/3tukjYtLW2Tm9zt8369vq+wtsk5557z6fd8F8YAAAAYnlbGlpGNxEgAAAAAQJc0M3YPiZlWsr0YDQAAAADoDhIx3yRrjgoabusxKgAAAADQFS2MrY4TMzF7CCMDAAAAAF1AwuWGLsRMzC7GCAEAAABA87Qwdrg7QUN/tw8jBAAAAABNQ4Ll6VN4Z2Ki5jWMFAAAAAA0CYmVS3oSMzFrZuw2jBgAAAAANEcLYw29FTRkR8m+hVEDAAAAgGYgcRLog5iJXT29g5EDAAAAgCYgcfI1siN9FTTRq6e7MYIAAAAAUB0SJi8mImaiXppmjCAAAAAAVOUEY+MSFTNxthIjCQAAAADVaGFshwKChl89XYfRBAAAAEDaaUkgEPgUdgAjCgAAAIC0QgLk262nqAicoD2BkQUAAABA2iDx8YLCYka244wNw+gCAAAAIOWQ6BidCjETtY0YYQAAAACknBYSHSkUNNwKMMoAAAAASBkkNgpTLGZ4bZr9GGkAAAAApAwSHHtTLWiiNgujDQAAAADFaWHskTSJGe6l4a0UTseoAwAAAEAxDjP2g3SJmThbiJEHAAAAgGKQuFiugqBpxcgDAAAAQBFIVbjUEDPRq6dnMAMAAAAASBoSFnUqCprjvCoxZgEAAAAACUNiwqOWmImz+zETAAAAAEiYFsY+14CgacRMAAAAACAhSEjM1oCYidlfMSMAAAAA6DMkIpo1JGiWY0

samuraijane

const shoppingList = ['apples', 'biscuits', 'cabbage', 'dip'];
const isCode200 = () => Math.random() >= 0.5;

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (isCode200()) {
        resolve(shoppingList);
      } else {
        reject('There was a problem with the server, please try again.');