Corrections to Chapter 4 "Learning React".

1

Kirupa,

I hope this is the place to post corrections to the “Learning React” textbook. I cannot seem to find any specific place to do this, so I’m trying here. The InformIT website does not contain any such capability this I can locate either.

Working on creating a Javascript Frameworks class. Using your “Learning React” as the textbook.
Working thru all the examples in the book. Reached Chapter 4 so far…
Chapter 4, Page 44 9th line down on the page ( highlighted in yellow ), should read
<div style={letterStyle}> I believe. This correction matches further examples of similar code starting on pages 56 thru 62. The code does not perform the intended function without this change, I believe. And this is the first example of this syntax in the text, which makes this correction quite necessary. Checked the electronic version on the InformIT website, and this correction is necessary there also.
Finally 2 times on page 45, the text reads bgColor ( capital C ), when the text in the example code reads bgcolor ( lower case “c” ). Not sure yet, if/whether, this matters, but Javascript being case sensitive then this probably does matter.

Greg B

1 Like
2

Well, I guess the html formatter swallowed my snippet…
Lets try <div style={letterStyle}>.

Greg B

3

Hey Greg. For inline formatting, use backticks (`), e.g. `code`. For code blocks, you can use three ticks above and below the code

```
code here
```

Also, the errata for learning react is available here: https://www.kirupa.com/react/errata.htm

4

Thanks! This is exactly what I was looking for. I figured this error had been caught long ago, I just could not find where. Guess I should have looked in www.kirupa.com rather than forum.kirupa.com. Oh well, always more to learn.

Thanks again.
Greg B

1 Like
5

You didn’t do anything wrong here. This is on me to figure out how to make the book errata more noticeable on the forums :slight_smile:

6

OK. Wow. It was 19 days ago that I posted these posts. Boy, how time flies. Here is a suggestion I have for the book. It does not fall under the category of errata ( instead it is an enhancement I think ). Anyway, after a couple of days going over chapters 12 and 13 and getting all the dev environment working and such ( many many thanks for this by the way, the videos that go with the book are really great! ) I spent basically a whole day trying to get the output of “npm run build” to work. And went full circle. Here is my suggestion for addition to the Production Build section of Chapter 13…

Creating a Production Build

We’re almost done. We’ve got just two more things left to do. So far, we’ve been building this app in development mode. In this mode, our code isn’t minified and some of the things run in a slow/verbose setting so that we can debug issues more easily. When it’s time to send the app live to our real users, we want the fastest and most compact solution possible. For that,

  1. Navigate to the helloworld folder that you have been building the helloworld app in. Find the file named “package.json”. Open the file with your favorite Text Editor…
    See near the top of the file the following…
    {
    “name”: “helloworld”,
    “version”: “0.1.0”,
    “private”: true,
    “dependencies”: {

Add the line “homepage”: “.”, to the file as shown…

{
“name”: “helloworld”,
“version”: “0.1.0”,
“private”: true,
“homepage”: “.”,
“dependencies”: {

Save and exit the “package.json” file.

  1. Now, we can go back to the command line and enter the following (after stopping the build by pressing Ctrl+C):

npm run build

The script takes a few minutes to create an optimized set of files for you. Once it has run to completion, you’ll see some confirmation text that looks as follows:

FINAL BUILD OUTPUT SCREEN SHOWN HERE.

When this has completed, you can follow the onscreen prompts to deploy it to your server or just test it locally using the popular serve node package.

Also take a moment to browse through all the files that were generated in the “build” folder inside the helloworld project folder. The end result is just plain HTML, CSS, and JS files. No JSX. No multiple JS files. We have just a single JS file that contains all the logic our app needs to work. You should be able to open the “index.html” file now with a browser directly and the web app should show and function correctly, same as in the development environment.

Thanks again for the great book an the videos. I love your humor.

Greg Buchmann

1 Like
7

Thanks for the suggestion, Greg! I just started an e-mail thread with my publisher on future book ideas (including revising Learning React), so I’ll add your feedback to the list of items I would like to address in the next edition :slight_smile:

8

Thank you for posting this. I was pulling my hair out trying to figure out what the book was trying to tell me to do.

1 Like
9

Your Welcome. I hope that Kirupa gets a new version of the book out soon.

Greg B

1 Like
10

Still in discussions. With Covid, the publishing industry (and the printing facilities) are mostly offline, so it’s been tough to figure out when the next version can be scheduled :frowning: