Description
Adding inline comments to code examples would be helpful for beginners' comprehension in "Main Concepts" docs (along with the already provided explanations)!
Task
- 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
- Add comment in code snippet to assist with comprehension
//Hello, Harper Perez!
JSX is an Expression Too
- Add comments to code snippet, that it follows along with code example from above and what the function will return.
Specifying Attributes with JSX
- Show code example of invalid JSX
JSX Represents Objects
- Change "Babel compiles" to "Babel transpiles"
- 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
thiskeyword 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
todosin an array of objects with an id and text property - In second
todosexample, display a variable fortodosin an array of objects with no id and with text property