Reactjs.org: Add inline comments to code snippets in Main Concepts

[JavaScriptErika]

Adding inline comments to code examples would be helpful for beginners' comprehension in "Main Concepts" docs (along with the already provided explanations)!

Task

• [x] Comb through Main Concepts to clarify and _enhance_ the learning experience by adding in comments to code snippets, and update plan below.

📚In current progress as of 7/8📚
WIP PR made #1048

Plan for Main Concepts

2. Introducing JSX

Embedding Expressions in JSX

• [x] Add comment in code snippet to assist with comprehension //Hello, Harper Perez!

JSX is an Expression Too

• [x] Add comments to code snippet, that it follows along with code example from above and what the function will return.

Specifying Attributes with JSX

• [x] Show code example of invalid JSX

JSX Represents Objects

• [x] Change "Babel compiles" to "Babel transpiles"
• [x] Add "It's helpful to keep this object model in mind" as we will explore rendering React elements to the DOM[...]

4. Components and Props

Functional and Class Components

• [ ] Add: We'll show you how this code comes together with using "props" in Rendering a Component (several lines below).
  (Class Components)
• [ ] Add:You may have noticed the this keyword in front of props.name.

Rendering a Component

• [ ] Add explanation: We can name JSX attributes how we wish. In our component example, we chose name="Sara" (some naming conventions are required for Handling Events). When you write a JSX attribute inside of a component, think of it as adding key and value pairs to an object in JavaScript.
• [ ] In example place comment underneath with // props: { name: "Sara"}

Composing Components

• [ ] Add comments:
  renders the following and displays:
  Hello, Sara
  Hello, Cahal
  Hello, Edite

Extracting Components

• [ ] In first code snippet, highlight Avatar block and comment // In the next example, we'll be extracting this block of code into its own component

• [ ] In the second code snippet, add comment with highlighted Avatar component with \\ Avatar component will access props with user instead of author, explanation is below

5. State and Lifecycle

Converting a Function to a Class
Last 2 sentences

• [ ] Add (with existing text) "''Since Clock is now defined as a class rather than a function, the this keyword inside of Clock points to its <Clock /> instance. In this case, that instance is inside of our ReactDOM.render() method.
• [ ] Add to beginning of (last sentence) "Having defined our component as a class lets us...."

8. Lists and Keys

Keys

• [ ] Display a variable for todos in an array of objects with an id and text property
• [ ] In second todos example, display a variable for todos in an array of objects with no id and with text property

[JavaScriptErika]

I'd 💙 to take on this task @gaearon!

I would update the tasks here of my current progress / plans and suggestions as I work on my PR before submitting it.

[gaearon]

That sounds great, thank you!

[JavaScriptErika]

@gaearon Here are my proposed additions for sections 2 - 8 that I'd like to begin implementing. I can expand on my outline too if needed.

[gaearon]

Can you send the first few changes as a PR so I can get a better sense of the exact way you want to do them?

[JavaScriptErika]

Absolutely! I'll work on that this coming up weekend- thanks!

[JavaScriptErika]

I have been attempting to run the docs locally and get the error: Cannot find module '../build/Release/sharp.node' when I run yarn dev.

I did some research, and I removed .cache, installed node-gyp and the necessary window build tools. That helped me not receive any dependency errors when I ran yarn. I tried also adding sharp, and removed and reinstalled node_modules. Still getting that pesky error!

[alexkrolick]

Does it work if you switch to Node 8, if you're not already?

[JavaScriptErika]

Thank you for getting back with me @alexkrolick !
Currently using 8.10.0

[alexkrolick]

Ok... you shouldn't have to install sharp or node-gyp manually, they should come in with the node_modules. Could be a yarn issue... try yarn cache clean and make sure you are on the latest version.

You can also try yarn remove gatsby-plugin-sharp gatsby-transform-sharp then add them back after everything else installs

[JavaScriptErika]

:tada: Thank you so much @alexkrolick! That absolutely did the trick, and I think it was a yarn issue as you suggested (wasn't on the latest version). I kept track of what I did below so if someone comes across this with a similar issue, it can help!

rimraf node_modules (rimraf is a utility for nodejs)
yarn cache clean
yarn upgrade

I'll get working on the PR and submit a WIP sample of my suggestions here soon.