React tutorial cokmments - lessons 4, 7

1

As in my previous post, I think the React tutorial is excellent. These comments are in no way criticism, but merely my suggestions to perhaps (maybe) improving it somewhat (but maybe not).

==================

For lesson 4, I just have the simple comment. In the notes we have:“There is a div with id=‘challenge-node’ available for you to use. Make sure you don’t change the JSX constant.” Why not show this div explicitly somewhere? Make it less mysterious.

================

Lesson 7 is perhaps more substantive. Is this line

<DemoComponent customClass = 'wrapperClass' />

equivalent (at least logically) to javascript-ish code:

	var props = {"customClass":"wrapperClass"};
	var ddiv = DemoComponent(props);

so that ddiv looks like

<div class(className?)="wrapperClass">

(in some storage syntax)? If so, it might be useful to add that such is the case.

My test response was originally

const MyComponent = function(props) {
		return ( <div>{props.someText}</div>);
}
<MyComponent someText = "now is the time"/>

Based on your example, this might be correct (Is it?). However, it does not pass the test. The solution code

const MyComponent = function() {
	return (<div>Demo Solution</div>);
	}

basically ignores the introductory example, so what is the point of introducing “props” in the first place?

IN ADDITION, in light of lesson 9 (composition), it wold be very useful to say something like: “This notation <…> actually returns a component which you can use in place of raw HTML. In this example, we are not using the return value, but in lesson 9 you will use it.”

Finally, a couple of quick questions.
Is the use of “const” mandatory, or could one use “var” or even let?
Does one need parens after “return”?

2

Are you talking about the FCC tutorial? If so, your comments are totally welcome but wasted here. Create an issue with your feedback at the github page, otherwise the esteemed @bonham000 won’t be likely to see it.

var is less than desirable in ES6 because it’s function scoped instead of block scoped. let is cool, but it’s a bit more efficient to use const if the variable isn’t going to be reassigned.

Your app isn’t likely to crash and burn without it, but it’s easier to read and parens will probably be mandated in any professional style guide.

1 Like
3

Thanks much.

As for github, my feeling is this: If a person (or people) have created a tutorial/challenge for FCC, and if they were interested in feedback, then they ought to be monitoring the forum at least occasionally for comments or problems (and generally mix it up with us rabble). It would be impossible for an individual camper to track down the appropriate person in that person’s favorite posting place in order to make a comment.

You have given me a link, which I greatly appreciate, and I will post a link there to this forum page (despite my considerable reluctance).

Thanks for the info, and for the responses to my questions. I appreciate it.

4

Hi @sabrawer,

As for your note on lesson 4, that div is literally embedded in the HTML of the page itself. That div is the target for ReactDOM to render to and you have to have a div with a specific id to target, or some other way to identify a div for ReactDOM. There’s really no way to show this div in the code editor.

As for challenge 7, this code, albeit terse, will pass all the tests:

const props = 'Demo Solution'
const MyComponent = () => <div>{props}</div>

I think the concept you have is correct, but there are some details about how these components are being rendered and tested that mean that if you try to stray too far away from the example it might not work. That’s mainly because of the difficulty of finding a way to actually test React components based on user input in this (somewhat contrived) environment. Also, we did want to introduce props here even though they are not required to solve this challenge because props come up again and again in the React challenges.

As for challenge 9, I’ll add a note that mentions the application of the < > tags a little more clearly.

Finally, the use of const is not mandatory, but it is quite common to see this in the official React and Redux documentation which is why we tended to use it here. Also, you do have to wrap parens after return if you are not actually returning some on the line of the return. For instance, this is not valid:

return
 <div>
 </div>

But this is:

return <div></div>

Also, the original post for this and the live app on Surge all direct contributions and feedback to the GitHub repo, the reason being that many people are reviewing these challenges and the goal was to have that discussion occur in a single place. Additionally, pull requests all always welcome (we’ve had over 50 so far) and those of course will take place on GitHub. It’s hard to monitor the forum because people post about React a lot but have nothing to do with these challenges. Thanks for your feedback!