natewr/cyf-react-syntax

Scratch readme for CYF react-syntax

👋 Hello, my name is Nate Wright

and I have more than a decade of experience building open source tools for the web. I had a previous career in journalism and I’m interested in working on projects at the intersection of information, communication, and social change.

View my portfolio and contact me if you think I can help you with something.

cyf-react-syntax's Issues

review

Really good test!

Just some minor things I noticed, feel free to ignore some/all of them:

---

Components

//lonely comma in there
this.state = {
			fullName: '',
		};

Also, <Button> component needs a self closing slash at the end.

---

HTML Output section:

"There are two components in the code above. What are their names?"

There are only some HTML tags in that resulting code (not really any components). Should this read: "The above code was rendered by two React components. What are their names?"

---

Props

Should we re-name the Button component to something else? It renders an html button as its child, which gets its own set of attributes. Might be confusing to which button we're referring when talking about props? For example: "The Button component receives isDisabled and text properties. These are passed to the button as props"

In the ContactForm component, is method a property passed to the Button component?
What are the names of the properties that the Button component receives from the ContactForm?

Should we use "props" everywhere (or inputs) instead of "properties"? Looking at React's docs it seems that they never use the term "properties" (even if linguistically that's what it stands for).

---

State

// the semicolons won't work inside setState (here and a few other places)
this.setState({
			emailAddress: event.target.value;
		});

---

JSX and HTML

// needs to be this.props.text
render () {
	return (
		<button>{props.text}</button>
	);
}

In a React component, you write JSX code in the render function.

Might be worth saying that it applies only to class components. In functional components, you return it directly.

Instead of "compiled" could we say:

// Will get converted to this HTML
<button id="submit-button">Submit</button>

---

Attributes and child components

typo:
"How can yout ell if"

When we write attributes on a React component (), we call them properties.

Are they called "properties"? I thought React tries to be as close as possible to the native browser APIs so when you use React components you write them the same way you'd write a normal HTML tag, and "add" attributes to them. Then inside the component's implementation, we get them as part of this "props" object. I might be wrong, this is just an assumption, but maybe it's not wrong to let them think they're also "attributes"?