error in code, page 43, react book


#1

Hi
I had a lot of trouble to get this part, until I find something missing in the code:

return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

--------- Must be corrected to:

return (
      <div style={letterStyle}>
        {this.props.children}
      </div>
    );
  }
}

#2

Hi Prana! Are you running into the first issue listed here: https://www.kirupa.com/react/errata.htm ?

From looking at your post, both of the code snippets you pasted look identical.

EDIT: Sorry! After adding the code formatting for your post, I can totally see it. It is the same known issue and we’ll get it fixed in a future reprint.


#3

Thank you dear. yes it is the same error and I didn’t know about this errata page.
I really liked your book so far! the best point is that it doesn’t seem to be written by a programmer! Those written by programmers are so boring!
So far it has been easy to understand, up to chapter 8! There I hit a wall! there are too much to explain there and I got confused, the code also didn’t work. You may need to rewrite that chapter one more time.
Also while <React.Fragment> works, I cannot get the sexy <></> working!!


#4

For chapter 8, there is one code snippet that is wrong in the book: https://www.kirupa.com/react/errata.htm

Does that fix the problem? If not, can you paste your code here? I’d be happy to take a look :slight_smile:

Cheers,
Kirupa


#5

Kirupa,
The code at the end of chapter 8, which has extra styling and other stuff, works… but the code that is given step by step inside the chapter, doesn’t. Just read that chapter and follow along with your own instructions!
But that is not all that important anymore because I already read 40% of the book and I think I will give up on it before reaching the middle of it. It already feels I am reading Uranusian language and it is going to be Pluto lingo soon!

I had high hopes for this book, but after chapter 8, topics have escalated really fast and I am totally confused.

For example on page 127, you are advising us to just play with lifecycle methods inside the code until we can figure it out!

That’s no helpful advice bro! It is like being in an aircraft cockpit and the pilot advising you to “just play around until you figure out how to fly airplane!”

You went on explaining each method later, but those conceptual high-level stuff were not just boring… they were also meaningless to a newbie.

I am sure you didn’t feel that way when you wrote the book, because you get this stuff in high-level. But as someone who has done many websites and knows JS, HTML, CSS, and Node, I can assure you that I am not getting any of it! I have to take some other React training before reading your book.

The only fun thing that I had while reading your book was to open a new HTML file and recreate the task in vanilla JS, in 5 lines of code! And then wondering… do I even need to learn React??!


#6

React isn’t easy. It is very different than HTML, CSS, and JS. Getting frustrated as part of learning it is normal. Many people have found my take on it easier to understand than other content they’ve seen, but I do realize that doesn’t mean it can’t be improved. Based on feedback from the first edition, I created videos to complement each of the chapters: https://www.youtube.com/watch?v=O7zy7gVQRIM&list=PL478wQWRhpfaQbaET2DvDzG60EFGThtd1 Readers who found parts of the text confusing said the videos helped them out.

Regarding your comments:

Apologies about the code in Chapter 8. It doesn’t work, and I called it out in the errata link. Outside of that, the other pieces of code in that chapter worked when I tried it right now. It will be fixed in a future printing.

Regarding the lifecycle methods, they are just like regular DOM events. Playing with it is one way to make sense of it. What I meant by playing with it is running the code in your browser, clicking on the button, and seeing the appropriate log comments appear that corresponds to the appropriate lifecycle method. Here is the same example: https://www.kirupa.com/react/lifecycle_example.htm The alternative is explaining what each lifecycle method does. Like you point out (and I mention at the bottom of 127), that is painfully boring :stuck_out_tongue:

If other topics are still confusing, feel free to post them here. I’d be happy to explain the content in a different way.

Cheers,
Kirupa


#7

Kirupa,
Thank you for helping me out here with this.
I checked out the video for that chapter, it seems like a quick recap of the material already presented in the book and it didn’t help me to grasp it. Maybe, it is too early at this stage to present this idea in the book.
I had the same problem when learning Node. I read a heavy book on it and did all exercises but I had no idea how node worked or how can I use it on my own!
Then I got a outdated Node course on Udemy by Anthony Alicea, where he took time to open up the source code in C++ and explain how node is created. then he opened node moduals which are in JS and explained how a method has been written and how it works. That may seem initially boring… but that was when it all clicked inside me and I understood it all… in a level that I can use node on my own.
So as a student, I have 2 options, either I should memorize and copy your code, or I should get to understand it deeply.
For example, I should get a brief explanation on how React.Componenet is written and what it does.
If React is hard, then it needs more detailed and slow-pace approach. Things get boring when we don’t understand them… otherwise it is always fun!


#8

As a student, you should understand the code deeply. Memorizing doesn’t help. I’d state that all the code I provide is meant for deeper understanding as opposed to memorizing, which is why all the code snippets are explained line-by-line in how they work. Let’s go back to the component lifecycle article that is giving so much trouble.

Let’s ignore components for a moment. You probably already know that your HTML pages have a lifecycle to them. There is an event that gets fired when the page loads. There is an event that gets fired when all the content in the page has loaded. You have some modifiers on this behavior where your scripts can load asynchronously or even later. (Here is a refresher on this if this is new.)

Getting back to components. Your components have lifecycle as well. The way I explain it is not by throwing you head first into all of the various “events” that make it up. Instead, I have you play with them instead by giving you a full example. With the exception of the “event” names, all of the code there is based on code you’ve seen before - props, state, component constructor, and so on. That is why the section of lifecycle comes fairly late in the game. The comments in the example are verbose enough to show you what is going on at each point in you updating the counter:

After seeing the code in action (aka playing with it), the subsequent pages explaining each lifecycle method go into more detail on why what you saw works the way it does.

If you still feel that looking at source code will help you out, the nice thing is that React is open-source. You can crack open the JS library and look at how everything is made. You can pair that up with the API reference for it: https://reactjs.org/docs/react-component.html for some additional insights. You may notice that the contents in the book expand on the API reference, and at this point in the book, almost all the items they simply list have been covered in slightly more detail in previous chapters.

:smile: