Mike Cronin MostlyFocusedMike

## JS-Resources_full_review
# 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

## the-main-pattern.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                MostlyFocusedMike
                / the-main-pattern.md
            
            
              Last active
              March 24, 2021 03:09
            
          
    The Main Pattern for Vanilla JS

How to deal with DOM elements

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

  
## dynamic-form-6.js
// 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}`}>

## dynamic-form-5.js
import React, { useState } from 'react';

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

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

## dynamic-form-4.js
import React, { useState } from 'react';

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

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

## dynamic-form-3.js
import React, { useState } from 'react';

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

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

## dynamic-form-2.js
import React, { useState } from 'react';

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

    return (
        <form>
            <label htmlFor="owner">Owner</label>

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

input {
    display: block;

## dynamic-form-1.js
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"

## eslint-starter.js
module.exports = {
    "extends": "airbnb-base",
    env: {
        browser: true,
        node: true,
        es6: true,
        jquery: true,
    },
    rules: {
        "indent": ["error", 4],
	# 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 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;
	module.exports = {
	"extends": "airbnb-base",
	env: {
	browser: true,
	node: true,
	es6: true,
	jquery: true,
	},
	rules: {
	"indent": ["error", 4],