Mike Cronin MostlyFocusedMike

The Main Pattern for Vanilla JS

If you want to put your script tag in the <head> of a document, you're probably familiar with putting things into the DOMContentLoaded event:

document.addEventListener('DOMContentLoaded', () => {
    doThings();
    doOtherThings();
});

	# Intro To Node - Skills and concepts
	Hey, can we just take a second to marvel at how much you've learned in only a few weeks? Staggering really. For your convenience, here are all the raw skills and concepts from each lecture. Use it to make sure you know all of these topics.

	(CORE) denotes the more important concepts, but all of these are good!

	# 1.0.0 - Intro To Node!
	- (CORE) Understand we're using Node, not browser
	- (CORE) Create and run js files
	- Access the REPL
	- (CORE) module.export and require

	// CatInputs.js

	import React from 'react';
	import PropTypes from 'prop-types';

	const CatInputs = ({ idx, catState, handleCatChange }) => {
	const catId = `name-${idx}`;
	const ageId = `age-${idx}`;
	return (
	<div key={`cat-${idx}`}>

	import React, { useState } from 'react';

	const Form = () => {
	const [ownerState, setOwnerState] = useState({
	owner: '',
	description: '',
	});

	const handleOwnerChange = (e) => setOwnerState({
	...ownerState,

	import React, { useState } from 'react';

	const Form = () => {
	const [ownerState, setOwnerState] = useState({
	owner: '',
	description: '',
	});

	const handleOwnerChange = (e) => setOwnerState({
	...ownerState,

	import React, { useState } from 'react';

	const Form = () => {
	const blankCat = { name: '', age: '' };
	const [catState, setCatState] = useState([
	{ ...blankCat},
	]);

	const addCat = () => {
	setCatState([...catState, { ...blankCat }]);

	form {
	font-family: Arial, Helvetica, sans-serif;
	border: 0.15rem solid #000;
	width: 50%;
	margin: 1rem auto;
	padding: 1rem;
	}

	input {
	display: block;

	import React from 'react';

	const Form = () => {
	return (
	<form>
	<label htmlFor="owner">Owner</label>
	<input type="text" name="owner" id="owner" />
	<label htmlFor="description">Description</label>
	<input
	type="text"