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();
});
// 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, |
// /src/components/Form.js | |
import React from "react" | |
class Form extends React.Component { | |
render() { | |
return ( | |
<form> | |
<label htmlFor="owner">Owner</label> | |
<input type="text" name="owner" id="owner" /> | |
<label htmlFor="description">Description</label> |
# 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 |
import React from "react" | |
class Form extends React.Component { | |
state = { | |
cats: [{name:"", age:""}], | |
owner: "", | |
description: "" | |
} | |
handleChange = (e) => { | |
if (["name", "age"].includes(e.target.className) ) { | |
let cats = [...this.state.cats] |
import React from "react" | |
import CatInputs from "./CatInputs" | |
class Form extends React.Component { | |
state = { | |
cats: [{name:"", age:""}], | |
owner: "", | |
description: "" | |
} | |
handleChange = (e) => { | |
if (["name", "age"].includes(e.target.className) ) { |
// src/components/CatInputs.js | |
import React from "react" | |
const CatInputs = (props) => { | |
return ( | |
props.cats.map((val, idx)=> { | |
let catId = `cat-${idx}`, ageId = `age-${idx}` | |
return ( | |
<div key={idx}> | |
<label htmlFor={catId}>{`Cat #${idx + 1}`}</label> | |
<input |
form { | |
font-family: Arial, Helvetica, sans-serif; | |
border: 0.15rem solid #000; | |
width: 50%; | |
margin: 1rem auto; | |
padding: 1rem; | |
} | |
input { | |
display: block; |
import React, { useState } from 'react'; | |
const Form = () => { | |
const [catState, setCatState] = useState([ | |
{ name: '', age: '' }, | |
]); | |
return ( | |
<form> | |
<label htmlFor="owner">Owner</label> |