Dec 28th React Training Notes

[dcrescim]

Here's a placeholder for folks to add comments / suggestions for the React Training.

[NCharby]

Suggestion:
learn-react.html -> "What is React?"

We talk about components that are rendered as markup, but that's not really the useful part of React. I think it would go a long way to talk about two-way binding and do a light introduction of the virtual DOM

[NCharby]

Change:
intro-to-jsx.html -> JSX Interpolation

Wrap example 1 and 2 with a function. These are good, but speed reading devs (like myself) may cntl+c cntl+v these and find that they don't work verbatim.

[NCharby]

Nitpick:
intro-to-jsx.html -> Using Loops

Mapping an array to elements will throw a warning without assigning keys.

If we mention the virtual DOM earlier, this is an opportunity to talk about how elements are tracked

[EmilK15]

Intro to JSX notes:

Section 2:

We can pass attribute-like things to our components
=> We can pass variables to components
All other attribute-like things can be called variables.

These are called props.
-> When we say props we can mention its short for properties
Notice also, that these props make the component more reusable. Above, I'm reusing the component with 3 different names.
-> Also these props make the component more reusable, as the above component is used with 3 names without duplication of code.

Section 3:

React allows us to embed HTML into our components. This is called JSX
-> React allows us to embed HTML into our components. This is called JSX which stands for JavaScript XML
element API link is unclear and doesn't point to createElement example mentioned below.
React splits apart the steps where you "define" the HTML from the part where you "render" it, because it affords you a couple niceties.
=> React splits apart the steps where you "define" the HTML from the part where you "render" it, and will "re-render" components when the data going into them changes. We'll discuss some of the benefits that offers us in the section below.

Siblings:

JSX requires that any sibling elements are wrapped inside of a parent. This is one of the most common errors encountered by beginners.

The following JSX would throw an error:

<div>Sibling 1</div>
<div>Sibling 2</div>

This can also work by returning a list:

render([
<div>Sibling 1</div>,
<div>Sibling 2</div>
])

Some nitpicks:

(ie. "Bitovi") => (i.e. "Bitovi")

JSX Is JavaScript => JSX is JavaScript

[kylegifford]

Learn React -> Course Outline

This guide begins by walking you through how to set up an environment, providing an introduction into JSX (JavaScript flavor of XML) and some basic react theory.

React needs to be capitalized

[kylegifford]

Setting Up Your Environment -> Try It Out

minified and bundled

Given the audience, they may not know what these terms mean. It could be worth linking them to a resource that explains the benefits, or briefly writing it out.

[kylegifford]

Introduction to JSX -> 1. The HelloWorld component is simply a function and the first letter is capitalized.

I think the link to PascalCase is showing the URL when it should be a link.

[kylegifford]

Introduction to JSX -> 2. We can pass attribute-like things to our components. These are called props.

Above, I'm reusing the component with 3 different names.

This is the only point so far where first person is used. I'd switch it to say "Above, the component is being reused 3 times, each time with a different name prop"

[NCharby]

I think the link to PascalCase is showing the URL when it should be a link.

I caught this in #219

[EmilK15]

What are React Components notes:

Exercise

This should include a hint for a link on the description of the onClick event handler ex. https://reactjs.org/docs/handling-events.html

[kylegifford]

Introduction to JSX -> Exercise. It'd be nice to "give away" the CSS for centering the letter in the box. It seems wasteful for people to have to Google that.

[kylegifford]

Introduction to JSX general note ... I think there's a way to have subsections appear in the timeline on the top right. It'd be nice to have an easy way to jump back to the styles, loops, etc sections, since this is a very long page.

[kylegifford]

What are React Components -> Components. Typo here:

Earlier, we learned that React JSX is almost always the return value of our components.

[kylegifford]

Props: Component Arguments -> Basic Props Usage

In the solution to the previous exercise, it passes a key in to each Square, but it's never used. I would update the solution to log Clicked ${key} as a "bonus", and then at the beginning of this exercise, refer back to that for a simple example of basic props usage.

[EmilK15]

Styling in React notes:

Inline styling

We should link to the emotion repo: https://emotion.sh/docs/introduction

[NCharby]

@dcrescim @EmilK15 Notes on virtual dom are here #221

It's tiny, let me know if there's any other content to be updated around this concept