azat-co/react-quickly

Source code for React Quickly [Manning, 2017]: Painless Web Apps with React, JSX, Redux, and GraphQL 📕

React Quickly Source Code

Source code for React Quickly: Painless Web Apps with React, JSX, Redux, and GraphQL 📕 [Manning, 2017]. More information at the website or Manning Publications.

Available NOW in major book stores and at Manning.

react-quickly's Issues

Ch 15 : working with graphl

The page dosent open in browser .Gives Error: ENOENT: no such file or directory , stat 'C:\index.html'

ch10 tooltip use bootstrap.css v4.1

I'm using bootstrap.css v4.1 css class to build the tooltip widget. the script.jsx code is kept unchanged as in the book, but the web page was rendered differently as with bootstrap v3. Can you give some ideas on how I can set css style to make the tooltip display properly.

Listing 7.1 `this.state.radioGroup` not updated

onChange={this.handleRadio} not always updating the this.state.radioGroup
onClick={this.handleRadio} will always update the this.state.radioGroup

using an onClick handler instead of an onChange handler in listing 7.1 fix this issue

Can't remove event listener

Hi Azat, in Chapter 6 just past Figure 6-6 you write getEventListeners(document).mouseover[0].remove() but this gives me 'VM6598:1 Uncaught TypeError: getEventListeners(...).mouseover[0].remove is not a function
at :1:42' in the console...do you know what should be used instead and why this no longer works - as I mentioned in the previous issue, I did not need the binding and I wonder if this is related...

Chapter 4.5 - Code for clock-analog-digital does not work

Running the code shows the digital portion working.
But the hands for the analog portion don't update to reflect the updating time of the digital display.

ch14 example babel config won't start; deprecated babel config `latest`

From a clean clone of this repo, the ch14 example fails at npm start:
ben-15:redux-netflix ben$ npm start

 [email protected] start /Users/ben/src/react-quickly/ch14/redux-netflix
 concurrently "webpack --watch --config webpack.config.js" "webpack-dev-server"

[1] http://localhost:8080/webpack-dev-server/
[1] webpack result is served from /
[1] content is served from /Users/ben/src/react-quickly/ch14/redux-netflix
[0] Hash: ebff2e30884cfa7a06fe
[0] Version: webpack 1.13.1
[0] Time: 938ms
[0]    Asset    Size  Chunks             Chunk Names
[0] index.js  272 kB       0  [emitted]  index
[0]    [0] multi index 40 bytes {0} [built] [1 error]
[0]     + 328 hidden modules
[0] 
[0] ERROR in ./src/index.js
[0] Module build failed: Error: Couldn't find preset "latest" relative to directory "/Users/ben/src"

This seems related to the deprecation of babel-preset-latest.

I tried to resolve by switching to babel-preset-env as instructed in http://babeljs.io/env , but i am not yet skilled at webpack config.

Listing 7.1 handleRadio is incorrect

Currently, handleRadio(event) looks like this:

let obj = {}
obj[event.target.value] = event.target.checked // true
this.setState({radioGroup: obj})

This won't work as written. Since obj is an empty object, the radio buttons in the group besides the one checked will have a value of undefined after this.setState(). The handler should be written as:

let obj = Object.assign(this.state.radioGroup) // prevents undefined
/* iterate through object and set all to false since only one radio 
can be checked at a time.*/
for (const radio in obj) { obj[radio] = false }
obj[event.target.value] = true
this.setState({radioGroup: obj})

Yarn not running application anymore from the command line.

Yarn stopped working referring to the package.json file as not working. The app no longer runs.
yarn start
yarn run v1.3.2
$ concurrently "webpack --watch --config webpack.config.js" "webpack-dev-server"
/bin/sh: concurrently: command not found
error Command failed with exit code 127.

Chapter 14 Summary Typo

Pg. 304 Summary

The 4th bullet reads:

"With Redux, you can dispatch an action or put in into the properties object."

I believe the word "in" should be "it".

Why you are not using `create-react` cli tool in your book?

#Why you are not using create-react cli tool in your book?

babel script.jsx -o script.js fails for ch10 tooltip code

Had to move script.jsx to a directory outside ch10 tooltip folder to convert script.jsx to script.js with the command: babel script.jsx -o script.js

Issuing the command above inside ch10 tooltip folder fails with error:

Error: Couldn't find preset "react" relative to directory "../tooltip"
    at /usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transform (/usr/lib/node_modules/babel-cli/lib/babel/util.js:50:22)

CH17 Trying to run "node" project throws Invariant Violation exception

Was trying to run this code to see the output using node index.js.
I setup webpack to compile the email.jsx to email.js with the following webpack.config.js

module.exports = { entry: './email.jsx', output: { path: __dirname, filename: 'email.js', libraryTarget:'commonjs2' }, devtool: '#sourcemap', module: { rules: [ { test: /\.jsx?$/, exclude: /(node_modules)/, use: ['babel-loader'] } ] }, stats: { colors: true, reasons: true } }

but got this exception:
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. at invariant (/Users/cmchenry/js/node/node_modules/fbjs/lib/invariant.js:42:15) at ReactDOMServerRenderer.render (/Users/cmchenry/js/node/node_modules/react-dom/cjs/react-dom-server.node.development.js:2522:7) at ReactDOMServerRenderer.read (/Users/cmchenry/js/node/node_modules/react-dom/cjs/react-dom-server.node.development.js:2354:19) at Object.renderToString (/Users/cmchenry/js/node/node_modules/react-dom/cjs/react-dom-server.node.development.js:2726:25) at Object.<anonymous> (/Users/cmchenry/js/node/index.js:5:36) at Module._compile (module.js:643:30) at Object.Module._extensions..js (module.js:654:10) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3)

Found that if you change the following line in index.js
const Email = React.createFactory(require('./email.js'))
to
const Email = React.createFactory(require('./email.js').default)

Now the code will runs!

Thanks to MartaJ on StackOverflow

ch05 listing 5.4: confirm dialog not displayed on leaving or closing tab

This problem appeared in recent browsers ( firefox 95, brave version 1.33.106 Chromium: 96.0.4664.110, gnome web 41.3 ...).

The following article suggests using page visibility to not lose user or app state:
https://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/

ch08 pg 179. url denied by x-frame-options. framing not permitted

I found that if i use an embedded url like

https://www.youtube.com/embed/VIDEO_ID

then it was ok.

Small errata in page 59

In page 59 on section 3.3 there is a small errata which says the following.

Although there are various tools to transpile JSX, the most frequently used tool—
and the one recommended by the React team on the official React website, as of
August 2016—is Babel (formerly, 5to6).

Is 6to5 instead of 5to6.

ch05 logger Listing 5.1 has error

Listing 5.1 in the book has an error in the Content component class render() method:

if (this.state.counter > 2) return

should be:

if (this.state.counter > 2) return <div/>

Test fails on ch16/password/js/generate-password.js

First, thanks for the great book. I've found an issue while running tests of chapter 16's password example.

The tests failed with this error: ReferenceError: randomIndex is not defined.

The error seems to happen because of the omitted semicolon of randomIndex (1cc5dd1#diff-5e704127649b66c9fbbd04b9b9a55b78)

As a workaround, I put semicolon in front of the next line.
To avoid using semicolons in js, a line should not be started with [, (, or back-tick.
This might be helpful to understand this: https://feross.org/never-use-semicolons/

let randomIndex = Math.floor(Math.random() * value)

;[acc[value -1], acc[randomIndex]] = [acc[randomIndex], acc[value - 1]]

Full errors from Jest are like below:

> [email protected] test D:\work\react-quickly\ch16\password
> jest

 FAIL  __tests__\password.test.js
  ● Password › changes after clicking the Generate button

    ReferenceError: randomIndex is not defined

      at iterable.reduce (js\generate-password.js:34:29)
          at Array.reduce (<anonymous>)
      at shuffle (js\generate-password.js:31:29)
      at Object.<anonymous>.module.exports (js\generate-password.js:49:12)
      at Password.generate (jsx\password.jsx:43:46)
      at Object.invokeGuardedCallback [as invokeGuardedCallbackWithCatch] (node_modules\react-dom\lib\ReactErrorUtils.js:26:5)
      at executeDispatch (node_modules\react-dom\lib\EventPluginUtils.js:83:21)
      at Object.executeDispatchesInOrder (node_modules\react-dom\lib\EventPluginUtils.js:108:5)
      at executeDispatchesAndRelease (node_modules\react-dom\lib\EventPluginHub.js:43:22)
      at executeDispatchesAndReleaseSimulated (node_modules\react-dom\lib\EventPluginHub.js:51:10)
      at forEachAccumulated (node_modules\react-dom\lib\forEachAccumulated.js:26:8)
      at Object.processEventQueue (node_modules\react-dom\lib\EventPluginHub.js:255:7)
      at node_modules\react-dom\lib\ReactTestUtils.js:350:22
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules\react-dom\lib\Transaction.js:140:20)
      at Object.batchedUpdates (node_modules\react-dom\lib\ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules\react-dom\lib\ReactUpdates.js:97:27)
      at Object.click (node_modules\react-dom\lib\ReactTestUtils.js:348:18)
      at Object.done (__tests__\password.test.js:45:24)
          at <anonymous>
      at process._tickCallback (internal\process\next_tick.js:188:7)

 FAIL  __tests__\generate-password.test.js
  ● method generatePassword › returns a generated password of the set pattern

    ReferenceError: randomIndex is not defined

      at iterable.reduce (js\generate-password.js:34:29)
          at Array.reduce (<anonymous>)
      at shuffle (js\generate-password.js:31:29)
      at Object.<anonymous>.module.exports (js\generate-password.js:49:12)
      at Object.it (__tests__\generate-password.test.js:11:20)
          at <anonymous>

  ● method generatePassword › return a new value different from the previous one

    ReferenceError: randomIndex is not defined

      at iterable.reduce (js\generate-password.js:34:29)
          at Array.reduce (<anonymous>)
      at shuffle (js\generate-password.js:31:29)
      at Object.<anonymous>.module.exports (js\generate-password.js:49:12)
      at Object.it (__tests__\generate-password.test.js:16:21)
          at <anonymous>

Test Suites: 2 failed, 2 total
Tests:       3 failed, 3 total
Snapshots:   0 total
Time:        1.493s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

Could you explain the use of console.dir binding?

Hi Azat, got as far as Chapter 6 :) Just curious, would you mind clarifying the reasoning behind console.dir(event, this) binding in (for example) Listing 6-2? Eslint is saying that this binding is unnecessary in my project (I have a generic react project open for experimentation where I just added the same event handlers as shown in the listing). Thanks.

Typo error in chapter 1 quiz

In chapter 1, the quiz question number 4:

You must include react-com.js in order to render React elements on a web page.

The answer to this is true. I believe it should be true for react-dom.js instead of react-com.js.

React class component to functional hook

It's better to add a functional hook instead of a class component.

getEventListeners(document).mouseover[0].remove() does not work as stated in section 6.1.2

Listing 7.1 Failed propType warning

Failed form propType: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`

replace checked by defaultChecked will no longer show this warning.

ch16/password/js/generate-password.js, needed to use semi-colon after randomIndex

let randomIndex = Math.floor(Math.random() * value);

otherwise i get ReferenceError: can't access lexical declaration`X' before initialization