Matthew Day samuraijane

Redux 101

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

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}`;
}

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>

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

	# 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

	// 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');

	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)
	});

	***
	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`

	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.');

	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