Matthew Day samuraijane

React 101

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

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>

	// callback functions can help us deal with asynchronous code but it can also get messy if we have multiple sequential callbacks (not shown here)

	var shoppingList = ['apples', 'biscuits', 'cabbage'];

	function addItem(item, callback) {
	setTimeout(() => {
	shoppingList.push(item);
	console.log("Item added to shopping list");
	callback();
	}, 200);

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

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

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

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

	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

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

	# 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