Found one difference between normal CSS and svg CSS:
Default value for normal CSS:
transform-origin: 50% 50%

Default value for svg CSS:
transform-origin: 0 0
Hi Keith,
How you doing?
I am learning svg these days.
I stumbled on some CSS styles which are placed in defs element wrapped in SVG tag.
They look like:

I wonder if you have any knowledge on this sort of CSS.
If yes, would like to share in CSS in depth?
With combination of SVG inline CSS, HTML inline CSS and external CSS, how can I determine the stylesheet origin and so on?
By the way, page 125,
flex: 2 is equivalent to
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%

flex-grow: 2;
flex-shrink: 0;
flex-basis: 0%

This should be consistent with the tip on page 127
In the section about flex-basis, I thought the effect of flex-basis: 0% is similar with flex-basis: auto or no effect like 0 in flex-grow and flex-shrink.
So after I edit CSS and add this snippet:
flex-grow: 2;
flex-shrink: 0;
flex-basis: 0%;

I thought flex-shrink: 0 doesn't work at all because flex items look like they are "shrinking".
After fiddling with flex-basis: 0, I noticed that it will cause the width of flex items as narrow as possible.
So, in this case, flex-shrink even has no opportunity to do any thing about shrink.
The auto adjusting according to the width of viewport is all done by flex-grow property.

In case others would have same confusion as I did, it maybe better to add some details about flex-basis: 0 I think.
Keith J Grant wrote:What we want in the design here is for box 3 to appear on a new row, beneath box 1 (to “clear” it, or start beneath the bottom edge of box 1). Since box 3 doesn’t naturally clear, it doesn’t float all the way left, and instead only floats up against the bottom corner of box 1. Figure 4.10 illustrates this.

We fix this by using the `clear` property, listing 4.8.

May I take it this way:
box 3 is going to the far left end on his own way or on the row it resides.
So "clear" means to clear everything out of his way which may block it.
"catch" means box 3 is stuck by box 1 which stops box 3 to get to the left end.

Sorry for being so inquiring in advance, I googled the word "catch on" and found two meanings of it:
1. To understand something
2. To become popular
which make me confused...
After checking CSS code, I found that the small width div is coming from

.media { width: calc(50% - 1.5em);}

And because of div being display: block, so it should fill the left space of the line it resides.
So that causes this margin.
Am I right?
Hi, Keith,
Another question about this, this is a snap shot in chrome browser with dev tool info before adding
css style in Listing 4.14

It can be seen that there is a right margin on div .media-body.
But in the dev tool, the box model shows no margin there.
I also checked the child elements and no one contains a margin-right.
Do you know where does it come from?
Hi, Keith,
How you doing.
I am reading the section 'make sense of float' and not able to figure out what the words mean.
On page 96, close to the end, there is such a sentence:
So, instead of clearing box 1, it “catches” on it.

Could you please explain what do 'clearing' and 'catch' mean here?
I guess catch means box 3 is running fast from behind and his top is already higher than box1.
But I am not sure.
Keith J Grant wrote:The 768px is a common width of tablet (iPad, specifically). An iPhone 6 is 375px wide, so that times 2% becomes 7.5px

Ahhh~ I get it. My fault, I didn't get the point clearly.
iPhone is not tablet at all.
Thank you for your response.
Nice work!
capouch wrote:Because JSX is a "mixture," if you will, of HTML and JavaScript. The only part of the above content that is "JavaScript" is the {dateTimeNow} token; the rest is straight HTML, and as such, doesn't have to be quoted because it's not JavaScript.

OK, got it. Thanks.
On page 43, it is said that the width of iphone is 768.
font-size is set to 2vw
So the px on iphone should be 15px.
Why the
And worse, it scales all the
way down to 7.5px on an iPhone 6.
Page 72 Listing 4-4
This in the callback in setInterval function is dynamic.
It will result in that this.setState becomes undefined.
Replacing the callback with the arrow function snippet on page 71 will fix the problem.
Page 60, 61, 62
Typo of forHtml should be htmlFor.
I add key attribute to the span element so that I can avoid the warning.
The code becomes
<span>{[<span key='spanKey'>&copy;&mdash;&ldquo;</span>]}</span>
In section 3.10.1, the paragraph is talking about how to render special characters with variables.
If I want to do so, I need to do something special.
And one of the approaches is to break into multiple strings by outputting an array.
The code example is:

Please tell me how to understand the code example and what is the relationship between the code and variables to output.
I feel a little dizzy about that.

If I want to render this span element, browser will display a warning:
Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <span>. See for more information.

Page 52
render() {
return createElement('div', null,
(this.props.user.session) ? React.createElement('a', {href: '/logout'}, 'Logout') : React
.createElement('a', {href: '/login'}, 'Login') 

There should be a React. between return and before createElement().
When I run the code from github in the folder of hello-js-world-jsx, there is such a warning in the console.
react.js:20483 Warning: Unknown prop `frameworkName` on <h1> tag. Remove this prop from the element. For details, see
in h1 (created by HelloWorld)
in HelloWorld
in div

Could you please help to tell which best practice do you prefer and why?
On page 47, there is such snippet
class DateTimeNow extends React.Component {
  render() {
    let dateTimeNow = new Date()
    return <span>Current date and time is {dateTimeNow}.</span>

And I render this class to HTML and I got this error which states:
react.js:20150 Uncaught Invariant Violation: Objects are not valid as a React child (found: Wed Sep 07 2016 01:42:33 GMT+0800 (??????)). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `DateTimeNow`.

If I do some tiny modification like
let dateTimeNow = new Date().toLocaleString()

It works fine.
I have seen such code snippet in chapter 3 like
<h1>1. Hello world!</h1>

<span>Current date and time is {dateTimeNow}.</span>

There are no quotation marks around the text in the tags.
I can use babel to do the transformation and it works well.
There are quotation marks in the output JS though.
On page 57, it states that add this line into package.json
./node_modules/.bin/babel js/script.jsx ?o js/script.js

But it turns out that there is no need to use relative path on my machine with OS X.
babel js/script.jsx ?o js/script.js

is enough.
There is such a sentence on page 46
For example, it would be useful if a current date time component would
should a current date and time, not some hard-coded value.

What does would should mean?
I don't see a verb in the sentence.
Is it a typo or my English too bad?

And in this sentence, I believe the symbol should be called as backtick not tilde.
That's the symbol on the same key on which tilde is.
When working with JavaScript-only React, we resort to concatenation + or if you're using
ES6+/ES2015+, to string templates marked by tilde.
Could you please describe what is the differences between extending React.component and using React.createClass() to create custom React component class?
I didn't know what does "as in" mean in English.
But now I get it. So problem solved. Keep reading.

In the section of SPA and React, there is such a sentence in a pair of brackets stating that

Rendering as in generating HTML from templates or UI code, not as in actually rendering that HTML in the browser which sometimes called paining or drawing the DOM.

I don't understand what does this sentence mean. Could you please help to explain?
PS: I'm not a native English speaker.